• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

menu responsywne nie otwiera się

Object Storage Arubacloud
0 głosów
248 wizyt
pytanie zadane 11 sierpnia 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)
edycja 12 sierpnia 2018 przez YakumoPL

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;
		
	}
	

}

 

komentarz 11 sierpnia 2018 przez wolfix Użytkownik (860 p.)
Dlaczego chcesz pobrać bibliotekę jQuery tyle razy? Raz wystarczy.
komentarz 11 sierpnia 2018 przez YakumoPL Obywatel (1,970 p.)
Dziękuję :)
komentarz 12 sierpnia 2018 przez YakumoPL Obywatel (1,970 p.)

@wolfix, wiesz może co mogę zrobić żeby działało?

komentarz 14 sierpnia 2018 przez Programista 22 Bywalec (2,270 p.)
edycja 14 sierpnia 2018 przez Programista 22

@YakumoPL, dlaczego w css masz dwa razy ul i dwa razy ul li? Sytuacja się powtarza z selektorami:

 #toggle

#container (tutaj też mamy dwa razy witdh:100%)

 

P.S Nie wiem czy nie powinno być ul>li

komentarz 15 sierpnia 2018 przez YakumoPL Obywatel (1,970 p.)
Już zmienione, dzięki :)

1 odpowiedź

–1 głos
odpowiedź 15 sierpnia 2018 przez Programista 22 Bywalec (2,270 p.)
Nie zainkludowałeś bootstrap'a czy też innego framework'a do responsywności.

Podobne pytania

+1 głos
1 odpowiedź 212 wizyt
pytanie zadane 25 grudnia 2020 w HTML i CSS przez Piotrek123321 Nowicjusz (130 p.)
0 głosów
1 odpowiedź 391 wizyt
pytanie zadane 10 marca 2020 w JavaScript przez Hehe$zky Nowicjusz (140 p.)
0 głosów
3 odpowiedzi 1,566 wizyt
pytanie zadane 28 lipca 2017 w HTML i CSS przez jjanek Użytkownik (630 p.)

92,575 zapytań

141,424 odpowiedzi

319,650 komentarzy

61,961 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...