Responsive menü

Szerző: Mérei Tamás   |   2014-08-10

Felbontásfüggetlen menü, mely mobil eszközön összeugrik és hamburger ikonnal nyitható.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód

<nav>
	<div class="navbar clear">
		<a href="" class="logo">Logo</a>
		<div class="menu-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div>
		<div class="menu">
			<ul>
				<li><a href="">menu 1</a></li>
				<li><a href="">menu 2</a></li>
				<li>
					<span class="open-submenu">menu 3 <span class="arrow down"></span></span>
					<ul>
						<li><a href="">almenupont 1</a></li>
						<li><a href="">almenupont 2</a></li>
						<li><a href="">almenupont 3</a></li>
						<li><a href="">almenupont 4</a></li>
					</ul>
				</li>
				<li><a href="">menu 4</a></li>
			</ul>
		</div>
	</div>
</nav>

CSS forráskód

* {
	margin: 0;
	padding: 0;
	border: 0
}
body {
	background: #f4f4f4;
	font-family: tahoma;
	font-size:14px
}
a { text-decoration:none }
.clear:before,
.clear:after {
	content:" ";
	display: table
}
.clear:after { clear: both }
.arrow {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle
}
.arrow.down {
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent
}
.arrow.up {
	border-bottom: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent
}

nav {
	width: 100%;
	background: #6CC49B
}
nav .navbar {
	width: 95%;
	max-width: 1000px;
	margin:0 auto
}
nav a { color: #fff }
nav .logo {
	float: left;
	display: inline-block;
	font-size: 30px;
	font-weight: bold
}
nav .menu-toggle {
	cursor: pointer;
	display: none;
	float: right;
	padding: 12px;
	margin: 10px 0;
	background: #62b38d;
	transition: background-color .5s
}
nav .icon-bar {
	background-color: #fff;
	display: block;
	width: 22px;
	height: 2px
}
nav .icon-bar + .icon-bar { margin-top: 4px }

nav .menu ul { float: right }
nav .menu li {
	float: left;
	list-style: none;
	border-left: 2px solid #62b38d
}
nav .menu li:first-child { border-left: 0 }
nav .menu li a,
nav .open-submenu {
	color: #fff;
	cursor: pointer;
	position: relative;
	display: block;
	padding: 12px 20px;
	transition: background-color .3s
}
nav .menu li a:hover,
nav .open-submenu:hover ,
nav .open-submenu.active,
nav .menu-toggle.active  {
	background: #FFBB22;
	transition: background-color .5s
}
nav .menu ul ul {
	z-index: 100;
	display: none;
	float: none;
	position: absolute;
	background: #FFBB22
}
nav .menu ul ul li {
	float: none;
	border: 0
}
nav .menu ul ul a:hover {
	background: #62b38d;
	transition: background-color .3s
}

@media(max-width:600px) {
	nav .logo { padding-top: 8px }
	nav .menu-toggle { display: inline-block }
	nav .menu { display: none; clear: both }
	nav .menu > ul { float: none }
	nav .menu li { width: 100%; border: 0 }
	nav .menu li:last-child { margin: 0 0 15px 0 }
	nav .menu li a,
	nav .open-submenu {
		display: block;
		background: #62b38d;
		padding: 10px;
		margin: 2px 0 0 0
	}
	nav .menu ul ul {
		position: static;
		background: transparent;
		display:none
	}
	nav .menu ul ul a { background: transparent }
	nav .menu ul ul a:hover { background: #FFBB22 }
}

jQuery forráskód

var menu = $(".menu");
$(window).resize(function(){
	$(".menu-toggle").removeClass("active");
	if($(window).innerWidth() > 600){
		menu.show();
	} else {
		menu.hide();
	}
});
$(".menu-toggle").click(function(){
	$(this).toggleClass("active");
	menu.slideToggle();
})
$(".open-submenu").click(function(){
	$(this).toggleClass("active");
	$(this).next("ul").slideToggle();
	$(this).children(".arrow").toggleClass("down up");
});

60 hozzászólás

1. 2018. október 10. szerda - 22:03

   Kedves Tamás,

   nagyon tetszik amit csináltál az egész weboldalad igen hasznos szerintem mindenki számára.

   Ezzel a menüvel kapcsolatban lenne pár kérdésem, amit nem tudtam megoldani.

   Szeretném ha a az almenüt jelző háromszög csak akkor változna át kattintásra, amikor mobil verzió van, amikor asztali verzióban vagyok mindig lefele mutatna, sajnos ezt nem tudtam megoldani.

   Illetve amikor le vannak nyitva az almenük és megmozdítom az ablak szélességét akkor ami le volt nyitva az nyitva maradt, s mivel több almenüs főcímem van egymás mellett ezért egymáson vannak ha kisképernyőről átváltok asztali nézetre.

   Ezekben ha tudnál segíteni nagyon örülnék, sajnos én csak most ismerkedem a jqueryvel, nem igazán megy még.

   Nagyon köszönöm előre is a válaszod!

   Válasz
   • 

     2018. november 23. péntek - 22:53

     Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat.
     Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb egy bootstrap-es navbart behúzni: https://getbootstrap.com/docs/4.1/components/navbar/
2. 2018. június 13. szerda - 12:04

   Reszponzív menünél hogyan lehetne azt megcsinálni, hogy a menü oldalról kússzon be úgy ahogy neked volt itt? Gondolom egészen más markup kell hozzá.

   Válasz
   • 

     2018. június 13. szerda - 20:35

     Van ezer féle plugin ami ezt tudja, én ezt a kettőt szoktam használni:
     https://www.berriart.com/sidr/
     https://www.adchsm.com/slidebars/
3. 2018. május 24. csütörtök - 16:16

   Hali, csináltam egy hasonló menüt, csak nekem hoverre nyílik le az almenü. Viszont ezzel az a problémám, hogy meg kellene oldani valahogy, hogy mobil eszközön mikor megjelenik, ne hover hanem click legyen. Írtam rá egy feltételt a javascriptben, de valamiért nem működik.. Nagyjából ennyi a kód:

   
   if($(window).innerWidth() > 800) {
       $(".page_item_has_children1").hover(function(){
   					$('.open-submenu.1').toggleClass("active");
   					$('.open-submenu.1').next("ul").fadeToggle("fast");
   					$(this).children(".arrow").toggleClass("down up");
   				});
   } else {
   $(".page_item_has_children1").click(function(){
   					$('.open-submenu.1').toggleClass("active");
   					$('.open-submenu.1').next("ul").fadeToggle("fast");
   					$(this).children(".arrow").toggleClass("down up");
   				});
   
   }
   
   

   Válasz
   • 

     2018. május 24. csütörtök - 16:57

     Eszközre kell tesztelni nem felbontásra. Itt van hozzá script: http://detectmobilebrowsers.com/

     Ha jQuery-t használsz, akkor így működik miután behúztad a detect scriptet:

     
     if(jQuery.browser.mobile) {
     	// mobile
     } else {
     	// desktop
     }
     
     
   • 2018. május 24. csütörtök - 19:35

     Köszi a választ! Megcsináltam, és most igazából működne a dolog, csak nekem olyan a menüm, hogy a lenyitható menük is “a” tagek, és ha rákattintunk, átvisz a másik page-ra mielőtt lenyílna. Gondolom számtalan megoldás van a probléma kiküszöbölésére, nekem most van egy ötletem, de az kicsit túl bonyolított, ezért kérdezlek inkább téged, hogy te hogy oldanád ezt meg?
   • 

     2018. május 24. csütörtök - 20:34

     Igen, ezek jó kis kalandok amikor a főmenünek is linkelnie kell, viszont mobilon meg nincs ugye hover. Ha jQuery-t használsz, akkor a preventDefault() függvénnyel meg tudod gátolni, hogy az tag ne linkeljen akkor se, ha van rajta href: https://api.jquery.com/event.preventdefault/

     Persze ebben az esetben mobilról nem fogod elérni sehogyan a főmenüpontot, úgyhogy célszerű betenni mobilnézetben az almenü első pontjának a főmenüt is.
   • 2018. május 24. csütörtök - 23:54

     Köszönöm megint a segítséget! Sikerült megoldani. Ez mellett még hozzá írtam a feltételhez, hogy ne csak mobil eszközöknél, hanem 800 alatti ablakszélesség mellett is kattintani kelljen. (A feltétel így néz ki: if(jQuery.browser.mobile || window.innerWidth < 800) ) Működni működik, viszont ha összehúzom a böngészőablakot 800 alatti méretre, csak azután fog működni a clickes dolog, miután frissítettem az oldalt, addig hover van. Fordítva ugyan így igaz. Gondolom ez azért van, mert a script csak az oldal betöltésekor fut végig, és amilyen eredményt kapott az elágazásban, azt tartja meg, nem ellenőrzi le újra a feltételt, csak ha újra töltődik az oldal. Ez igazából annyira nem nagy probléma, mert egy átlagos felhasználó normál esetben nem fogja összevissza méretezni a böngésző ablakát, viszont ettől függetlenül talán ezt a problémát meg tudom majd oldani azzal a függvénnyel, amit ebben a videóban is használtál a .menu-toggle "active" class-jának eltávolítására ablak átméretezés esetén. Úgy gondoltam ki, hogy minden ablakátméretezéskor az elágazást végig futtatja, és így talán majd megfelelően működni fog, de ma már nem próbálom ki, csak holnap.
   • 

     2018. május 25. péntek - 08:59

     Ha az egészet $(window).resize-ba teszed, akkor minden egyes alkalommal amikor megváltozik az ablak mérete, újból lefut. Ezzel minden eshetőséget le lehet kezelni. Mire mindenen végigmegy az ember megérti, hogy miért nincs hoveres menü Bootstrap-ben 🙂
   • 2018. május 25. péntek - 10:09

     A hover nélküli egyszerűbb változatot én is szívesebben megcsinálnám, viszont úgy gondoltam jobb ezen is végigmenni, mert ha majd webdesignerként dolgozok, és ezt követelik tőlem, valahogy ezt is meg kell oldani. Jelenleg most még tapasztalatot gyűjtök, és eközben a portfóliómat készítem, és szerintem jó ha egy portfólióban elemenként több fajta megoldás is található, és nem egyféleképpen van megoldva az összes.
4. 2018. május 20. vasárnap - 18:07

   Hali! JQuery-ben slideToggle-n kívül milyen toggle effectek vannak még? Igazából én csak egy sima, fokozatosan megjelenő almenüt akarok és nem legördülőt. Sima toggleval megy a dolog, csak szeretnék egy kis transition hatást elérni megjelenéskor.

   Válasz
   • 

     2018. május 21. hétfő - 09:18

     Használd a .fadeToggle()-t!
   • 2018. május 21. hétfő - 14:20

     Köszi
5. 2018. február 16. péntek - 20:58

   Kedves Tamás!

   Megörültem a példa menüdnek, ki is próbáltam (amúgy tetszik), de két problémába ütköztem:
   – 1./ha több almenüm van, akkor ha egyikből átlépek a másikba, nem csukja be az előzőt, így beteríti az oldalt (ez a teljes képernyőnél is így van).
   -2./ mivel nincsenek oldalak a példában, összeházasítottam, egy másik responzív site-al, de a menü így egyáltalán nem csuk be (ez csak a mobil nézetben van így).

   Köszönöm előre is: V. Péter

   Válasz
   • 

     2018. február 17. szombat - 12:07

     Ez a menü kattintásra működik, nem hoverre, ezért záródik be automatikusan.
     Ha összeakad más class nevekkel, akkor nem fog működni. Nevezd át valami egyedire a menüt, adj neki egy ID-t és akkor működni fog bármilyen oldalon.
6. 2016. július 19. kedd - 15:20

   Szia Tamás!
   A tutorialod alapján elkészítettem a reszponzív menüt. Amikor a számítógép böngészőjén húzom össze a képet, tökéletesen követi a képméret változását a media query-k szerint. Mobilon viszont nem a telefon kijelzőjének megfelelő media query jut érvényre, hanem eggyel nagyobb. Ennek mi lehet az oka?

   Válasz
   • 

     2016. december 19. hétfő - 08:47

     Lehet, hogy a telefonod nem az alapértelmezett nagyítást használja.
7. 2016. május 16. hétfő - 18:20

   Szia Tamás!
   Lehetséges elérni valahogy, hogy az almenük szélessége azonos legyen az elem szélességével, amire rákattintottunk, hogy megjelenjen?

   Válasz
   • 

     2016. december 19. hétfő - 08:45

     Megoldható, de akkor másik markup kell.
8. 2016. február 26. péntek - 15:50

   Szia
   Ott még nem tartok, hogy magamnak legyártsak egy ilyet, de ezt nagyon szépen testre tudom szabni és jól is működik.
   Egy dologra még nem jöttem rá: hogy tudom azt elérni, hogy ezek a menüpontok a középre legyen igazítva? Balra és jobbra már sikerült, de mit és hova írjak be, hogy szépen középen legyenek?
   Köszönöm 🙂

   Válasz
   • 2016. április 14. csütörtök - 11:51

     Szia írd azt, hogy :

     align=”center”

     Vagy

     css-ben: center center fixed;
9. 2015. december 8. kedd - 14:23

   Szia,
   Nagyon jó ez a menü, az alapjait jól tudom használni. Egy problémám azonban felmerült. Hogyan lehet kiegészíteni úgy a hamburger ikonos menüt, hogy amikor valamelyik linkre (oldalon belülit használok) kattintok, akkor a menü visszacsukódjon automatikusan. Ugyan ezt szeretném akkor is elérni ha valaki megnyitja a menüt, de mégsem kattint bele csak elkezd fel-le görgetni az oldalon, akkor is visszamenjen a menü.

   Előre is köszi a segítséget 🙂

   Válasz
   • 

     2015. december 10. csütörtök - 11:25

     jQuery-vel is lehet figyelni, hogy történt e scrollozás. Ha elmozdul a scroll, akkor hide-olod az almenüt.
10. 2015. augusztus 7. péntek - 01:53

    Üdv!
    Jó ez az egész blog, amit csinálsz, irtó hasznos! De ezzel a CSS menüvel van egy kis magán-problémám. Én úgy szoktam meg a menü rendszert, hogy ha ráhúzom a kurzort, akkor magától kinyílik a lenyíló menü. Ha pedig elviszem felőle, akkor bezáródik. Itt viszont az van, hogy csak akkor nyílik- és záródik, ha ráklikkelek, még akkor is, ha az összes lenyíló menüt megnyitom. Ezt nem lehetne orvosolni valahogy?
    Köszönöm!

    Válasz
    • 

      2015. augusztus 11. kedd - 18:15

      De igen, csak akkor külön le kell kezelni, hogy mobil eszközön kattintásra (tappolásra) működjön, mert ott ugye nincs hover. Elvileg automatikusan is kezelik valamilyen szinten az eszközök, de jobb kódszinten is felkészülni az ilyesmire.
11. 2015. augusztus 4. kedd - 13:06

    Hello Cyrex!

    Az mért van, hogy ha az almenüre ráírom pl, hogy left: -10px vagy akármi, akkor azt nem a hozzá legközelebb álló relative elemhez pozícionálja, hanem a böngésző széléhez pozícionálja?

    Válaszodat előre köszönöm 🙂

    Válasz
    • 

      2015. augusztus 11. kedd - 18:27

      Mert a felette lévő LI nem relatívra van állítva. Ha azt átírod, akkor ahhoz fogja igazítani.
12. 2015. május 25. hétfő - 16:52

    Helló Tamás!

    Tudom, hogy ez a kérdés nem ehhez a témához tartozik, de azt szeretném tudni, hogy miért van az, hogy van egy inputom, amin van bal- és jobb oldalon is 10 px padding és erre az inputra ráteszem a 100%-os szélességet akkor túl fog lógni 20px-el, de látom, hogy nálad is van az inputokon belül 10px-es bal és jobb padding mégsem lóg túl nálad, pedig 100%-ra van állítva nálad is a szélességük. Nálam miért lóg túl?

    Válaszodat előre is köszönöm! 🙂

    Válasz
    • 

      2015. május 25. hétfő - 20:49

      Ez kell neked: box-sizing: border-box
13. 2015. április 28. kedd - 18:37

    Hello!

    Nagyon jó és hasznos responsive menü, de safari böngészőben megnyitás után ha sok benne a menü és kicsit legörgetnék közöttük rögtön összecsukódik. Teszteltem iphone 4s-en iphone 5s-en és iphone 6-on viszont chrome böngészőben az iphoneokon is jól működik.

    Válasz
    • 

      2015. május 9. szombat - 11:25

      Ez csak egy tutorial, nem ellenőriztem minden böngésző alatt, előfordulhat, hogy nem mindenhol tökéletes.
14. 2015. április 14. kedd - 11:54

    Szia én még nagyon kezdő vagyok, és meg kell jegyeznem nagyon tetszik amit csinálsz.
    De lenne egy kérdésem nekem mégsem müködik ez amit csináltál mi lehet a baj a teljes html-t és css-t li másoltam minden ugyan az mégsem nyílik le a hamburger ikon.
    Köszönöm a segítséget.

    Válasz
    • 

      2015. április 14. kedd - 12:11

      Valamit nem jól csinálsz. Ott van a link a működő menüre, ha azt kimásolod akkor működnie kell.
    • 2015. április 14. kedd - 14:05

      Igen ebben teljesen biztos vagyok, hogy nálam van a probléma és 90%-ig biztos vagyok benne, hogy a jquery.js – nél van gond mivel még nem használtam ilyet vagy a head részből hagytam ki valamit vagy nem tudom.
      Köszönöm a gyors válaszod
15. 2015. április 3. péntek - 17:01

    nice very nice tutorial thank you for jquery codes.. I didn’t see before responsive menu tutorial with submenu and toggle class. Good luck!

    Válasz
    • 2016. június 24. péntek - 21:36

      Kedves Tamás nekem a fejlécben lévő adatok kellenének de azokat nem tudom leírni mivel a videóban nem mutatod meg kérlek el tudnád küldeni.
      előre is köszönöm!
    • 

      2016. december 19. hétfő - 08:46

      A demo oldalon látod a teljes forráskódot.
16. 2015. február 9. hétfő - 11:29

    Tegnap infórmatika órára a példaképedet kellet bemutatni! Ha nem bánod téged választotalak! 😀 Csak így tovább Tamás!!!

    Válasz
17. 2015. február 1. vasárnap - 17:23

    Kedves Tamás!

    Próbából elkészítettem a Responsive menü-t, de nem működik.
    Nem nyílik le az almenü.
    Szerintem a jqueri.js hiányzik. Honnan tudom letölteni???

    Válasz
    • 2015. február 1. vasárnap - 18:03

      Túl gyorsan tettem fel a kérdést!
      Közben már megoldottam a problémát.
      De azért köszi

      Szuperul működik!!!!
    • 

      2015. február 17. kedd - 14:27

      jquery.com esetleg?
    • 2015. február 17. kedd - 17:00

      Innen is betudod tölteni a könyvtárakat:

      https://developers.google.com/speed/libraries/devguide#jquery
    • 2015. április 6. hétfő - 11:26

      Kedves László!

      Hogy sikerült megoldanod ezt a problémát, mert én is ezzel küszködök. :/
    • 2018. augusztus 21. kedd - 07:08

      Nekem egy lezáró tag hiányzott a jquery-nél…rögtön sokkot kapok 🙂
18. 2014. október 26. vasárnap - 21:55

    Üdv!

    Azt szeretném elérni hogy ha a honlapomon ha egy cikk címére húzom az egeret akkor ne a cím kapjon hover effect-et hanem a hozzá tartozó kép. Tehát pl. a kép világosodjon meg.

    Válasz
    • 

      2014. november 23. vasárnap - 20:49

      Linkeld be az egész dobozt, és a doboz hover-én belül add meg az img változását: div.box:hover img { opacity: 0.5 }
19. 2014. szeptember 18. csütörtök - 22:16

    Szia!
    Köszi a videót, nagyon hasznos volt, sokat segítettél! 🙂

    Ugyanakkor van egy kis problémám: kicsit más számokkal dolgoztam, de a lényeg, hogy 810px-nél kéne, hogy átváltson mobil nézetbe. Ez szépen meg is történik, viszont ha elkezdem összehúzni a böngészőt, 825px-nél eltünteti az eredeti menüt, és a 810px-nél megjelenő mobilos menüig gyakorlatilag nincs navigáció az oldalamon. Ha a js kódot kiszedem jó, ha a “$(window).resize(function(){…” részletet kiszedem, úgyszintén.
    A js kódban egyébként módosítottam 810-re a számot.

    Egyszerűen nem tudok rájönni, hogy mi lehet a hiba. Elírhattam valamit?
    Előre is köszi a segítséget!

    Válasz
    • 

      2014. szeptember 21. vasárnap - 13:08

      Két helyen kell átírnod a számot, a CSS fájlban, és a JS-ben is. Kipróbáltam, nálam jó.
20. 2014. szeptember 18. csütörtök - 17:38

    Mivel kevered ki a színt?

    Válasz
    • 

      2014. szeptember 21. vasárnap - 13:04

      Több hasznos alkalmazás létezik, pl. Adobe Kuler.
21. 2014. szeptember 17. szerda - 21:32

    Ééértem!
    …és Bootstrap-ről lesz fent videó? Szerintem sokakat érdekelne… 🙂

    Válasz
    • 

      2014. szeptember 21. vasárnap - 13:03

      Lesz bootstrap is majd.
22. 2014. augusztus 18. hétfő - 10:08

    Juhhúú! 🙂 Erre a tutorialra vártam! 🙂 Köszi a feltöltést!
    Amúgy nekem a window innerWidth 600 helyett jobban tetszik az, h 601px fölött egy display: block !important-al mindig megjeleníti a menüsort! Vagy ez rossz megoldás?

    Amúgy jó lett az új design! Tetszik a színe! 🙂 Csak a gombok még olyan pirosas színűek… ha azok is kékek lennének… 😉

    Válasz
    • 

      2014. augusztus 18. hétfő - 10:18

      Csak akkor működik, ha inline stílusban rakod rá. CSS fájlból nem tudod felülírni az inline stílust még !important-al sem. Emiatt muszáj hozzá a JS.
23. 2014. augusztus 18. hétfő - 02:03

    nagyon szaftos anyag, köszönet!

    Válasz
24. 2014. augusztus 12. kedd - 19:51

    Kedves Tamás!

    Régebben fenn voltak az oldaladon az eddig elkészített munkáid (weboldalaid).
    Erről most esetleg nincsen valami elérhetőség?

    Válasz
    • 

      2014. augusztus 12. kedd - 21:19

      Nincs, nagyon ritkán csinálok már önálló weboldalakat amióta nem webfejlesztő cégnél dolgozom.
25. 2014. augusztus 12. kedd - 11:13

    én ez annyival egészítettem ki magamnak, ha az elvetemült user a kisfelbontáson mégis a teljes nézetet akarja megnézni akkor lehessen váltani ezt egy kis php-val oldottam meg és két styl sheettel:

    ez pedig a head tag-ek közé
    <?php echo "”;?>

    Válasz
    • 

      2014. augusztus 12. kedd - 21:22

      Hali, így nem fog megjelenni, a WP escape-eli a tageket. Cseréld le html entity-re az összes < és > jelet: & gt; és & lt; karakterekre. A PHP kódnál meg hagyd el a nyitó és záró taget.