Mérei Tamás webdesigner

Responsive menü

Szerző:   |   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");
});

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

43 hozzászólás

  1. Jávorkai György
    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?

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

      Lehet, hogy a telefonod nem az alapértelmezett nagyítást használja.

  2. János
    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?

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

      Megoldható, de akkor másik markup kell.

  3. Reni
    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 🙂

    • Györe Márk
      2016. április 14. csütörtök - 11:51

      Szia írd azt, hogy :

      align=”center”

      Vagy

      css-ben: center center fixed;

  4. Péter
    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 🙂

    • cyrex
      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.

  5. Adrián
    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!

    • cyrex
      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.

  6. Ádám
    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 🙂

    • cyrex
      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.

  7. Ádám
    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! 🙂

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

      Ez kell neked: box-sizing: border-box

  8. Kashin
    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.

    • cyrex
      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.

  9. Tamás
    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.

    • cyrex
      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.

    • Tamás
      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

  10. bootstrapthemeslab.com
    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!

    • mészáros Tamás
      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!

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

      A demo oldalon látod a teljes forráskódot.

  11. KingSearcg
    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!!!

  12. Egedi László
    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???

    • Egedi László
      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!!!!

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

      jquery.com esetleg?

    • adm
      2015. február 17. kedd - 17:00

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

      https://developers.google.com/speed/libraries/devguide#jquery

    • Levente
      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. :/

  13. Gergő
    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.

    • cyrex
      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 }

  14. Mate
    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!

    • cyrex
      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ó.

  15. Robi
    2014. szeptember 18. csütörtök - 17:38

    Mivel kevered ki a színt?

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

      Több hasznos alkalmazás létezik, pl. Adobe Kuler.

  16. Robert Herold
    2014. szeptember 17. szerda - 21:32

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

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

      Lesz bootstrap is majd.

  17. Robert Herold
    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… 😉

    • cyrex
      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.

  18. leslie23
    2014. augusztus 18. hétfő - 02:03

    nagyon szaftos anyag, köszönet!

  19. Sándor
    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?

    • cyrex
      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.

  20. Jamborka
    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 "”;?>

    • cyrex
      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.

Hozzászólás

Legújabb hozzászólások