Menu zwijane przy mniejszych rozdzielczościach.

pytanie zadane 23 maja 2015 w JavaScript przez Robert Saternus Stary wyjadacz (12,180 p.)

Czołem.

Mam pytanko. Chce zrobić zwijane menu do ikony przy mniejszych rozdzielczościach, a po kliknięciu by się rozwijało. Przykład o co mi chodzi możecie zobaczyć na stronie głównej miroslawzelent.pl

Wiem, jak taki efekt uzyskać Bootstrapem jednak czy jest jakiś odpowiednik w JS a najlepiej jQuery? Może znacie jakieś fajne tutoriale na ten temat?

2 odpowiedzi

odpowiedź 23 maja 2015 przez Comandeer Guru (604,880 p.)
wybrane 23 maja 2015 przez Robert Saternus

Najlepsza

Jedno menu, które zmienia się w zależności od rozmiarów ekranu. Kod JS jest w gruncie rzeczy niepotrzebny, bo menu można też rozwinąć dostawiając #menu do adresu:

<!DOCTYPE html>
	<html lang="pl" dir="ltr" class="no-js">
		<head>
			<meta charset="UTF-8">
			<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
			<title>Ehhhh</title>
			<style>
			*, *:before, *:after
			{
				box-sizing: border-box;
			}

			.visuallyHidden
			{
				clip: rect(0, 0, 0, 0);
				position: absolute;
			}

			.nav-menu
			{
				list-style: none;
				display: none;
			}

			.nav-menu:target, .nav-menu.open
			{
				display: block;
			}

			.nav-menu-item-link
			{
				display: block;
				height: 40px;
				line-height: 40px;
				padding: 0 20px;
				background: #0f0;
			}
			.nav-menu-item-link:hover, .nav-menu-item-link:focus
			{
				background: #0d0;
			}

			.nav-menu-item + .nav-menu-item
			{
				border-top: 1px #000 solid;
			}

			@media screen and (min-width: 1000px)
			{
				.nav-toggle
				{
					display: none;
				}

				.nav-menu
				{
					display: table;
				}

				.nav-menu-item
				{
					display: table-cell;
				}
				.nav-menu-item + .nav-menu-item
				{
					border-left: 1px #000 solid;
					border-top: none;
				}
			}
			</style>
		</head>
		<body>
			<nav class="nav">
				<h2 class="nav-header visuallyHidden">Nawigacja</h2>

				<a href="#menu" class="nav-toggle" title="Rozwiń/zwiń menu"><img src="https://cdn2.iconfinder.com/data/icons/tasty-bites-icon-set/512/hambruger.png" alt="Rozwiń/zwiń menu" width="50" height="50"></a>

				<ul class="nav-menu" id="menu">
					<li class="nav-menu-item">
						<a href="#" class="nav-menu-item-link">Link</a>
					</li>
					<li class="nav-menu-item">
						<a href="#" class="nav-menu-item-link">Link</a>
					</li>
					<li class="nav-menu-item">
						<a href="#" class="nav-menu-item-link">Link</a>
					</li>
					<li class="nav-menu-item">
						<a href="#" class="nav-menu-item-link">Link</a>
					</li>
					<li class="nav-menu-item">
						<a href="#" class="nav-menu-item-link">Link</a>
					</li>
				</ul>
			</nav>

			<script>(function(togglers)
			{
				[].forEach.call(togglers, function(toggler)
				{
					toggler.addEventListener('click', function(e)
					{
						e.preventDefault();

						document.getElementById(toggler.getAttribute('href').substring(1)).classList.toggle('open'); //jeśli potrzebujemy wsparcia od IE 9, nie 10, to warto spojrzeć tutaj: http://youmightnotneedjquery.com/#toggle_class
					});
				});
			}(document.querySelectorAll('.nav-toggle')));</script>
		</body>
	</html>

komentarz 23 maja 2015 przez Robert Saternus Stary wyjadacz (12,180 p.)

O to mi właśnie chodziło. Dzięki!

Swoją drogą idziesz jak burza. Dopiero tydzień tu jesteś a już top 30. Niedługo krecika przegonisz :) Brawo!

komentarz 23 maja 2015 przez Comandeer Guru (604,880 p.)

Heh, zobaczymy ;)

odpowiedź 23 maja 2015 przez JakisCwaniak Początkujący (350 p.)
edycja 23 maja 2015 przez JakisCwaniak

.main{
    display:block;
}

.hamburger{
    display: none;
}

@media screen and (max-width: 600px) {


.main{
    display:none;
}

.hamburger{
    display:block ;
}
}

W tym przykładzie trzeba stworzyć 2 osobne menu. Jedno z klasą main (które bedzie dla wszystkich urządzeń z szerokością >600px), drugie z klasą hamburger (dla szerokości <=600px).

Ustawiasz .main na block oraz .hamburger na niewidoczny. I później dzięki @mediaquery zamieniasz po prostu wartości display, dlatego .main znika i pojawia się .hamburger.