Witam, stworzyłem menu na podstawie tego filmu https://www.youtube.com/watch?v=XZsuI5wyRzs&t=65s&index=3&list=PLZ4N4HehQxyX9AAWb-BY8jTIv9osmc98C . Zastanawiam się już ponad godzinę dlaczego to nie działa, ale już nie mam pojęcie po prostu :D. Może ktoś chciałby mi powiedzieć co robię źle. Na filmie po kliknięciu w ikonę menu się wysuwa. U mnie nic się nie dzieje.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<script src="skrypt.js"></script>
<link rel="stylesheet" href="css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div id="container">
<nav>
<div id="toggle">
<i class="icon-menu menu"></i>
</div>
<ul>
<li id="home"><a href="#s">Home</a></li>
<li id="portfolio"><a href="#s">Portfolio</a></li>
<li id="aboutme"><a href="#s">O mnie</a></li>
<li id="contact"><a href="#s">Kontakt</a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script>
jQuery(function($)
{
$.scrollTo(0);
$('#home').click(function() { $.scrollTo($('#container'), 1000); });
$('#portfolio').click(function() { $.scrollTo($('#wydarzenie1'), 1000); });
$('#aboutme').click(function() { $.scrollTo($('#info'), 1000); });
$('#contact').click(function() { $.scrollTo($('#formularz'), 1000); });
}
);
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('nav').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').click(function(){
$('ul').toggleClass('active');
})
</script>
</body>
</html>
body
{
width: 100%;
margin: 0;
background-image: url(img/zwartevilt.png); /* Background pattern from Toptal Subtle Patterns */
color: white;
font-family: arial;
}
#container
{
width: 100%;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
/*MENU*/
nav
{
width: 100%;
background-color: black;
font-size: 20px;
}
ul
{
width: 80%;
margin: 0 ;
padding: 0;
}
ul li
{
list-style: none;
display: inline-block;
padding: 10px;
}
ul li a
{
color: white;
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
}
#toggle
{
width: 100%;
padding: 10px;
background-color: black;
text-align: left;
box-sizing: border-box;
display: none;
}
/*KONIEC MENU*/
/*MOBILNA STRONA*/
@media only screen and (max-width: 768px){
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Arial;
text-align: center;
}
/*MENU*/
#toggle
{
display: block;
}
ul
{
width: 100%;
display: none;
}
ul li
{
display: block;
text-align: left;
}
.active
{
display: block;
}
#container
{
width: 100%;
background-image: url(img/zwartevilt.png); /* Background pattern from Toptal Subtle Patterns */
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
}