![[MENU]](https://www.eactive.pl/wp-content/themes/eactive/images/menu_icon.svg){kind=icon}
Poniżej prezentujemy bardzo prosty i szybki sposób na rozwijane menu mobilne. Nasz przykład zawiera jedynie mechanikę działania – wszelkie aspekty wizualne zostaną pominięte.
#wiemyjak prowadzić skuteczną strategię SEO i SXO
POZNAJ naszą ofertę na POZYCJONOWANIE
- Szkielet dokumentu zawierający jedynie podstawowe elementy oraz nasze menu:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Menu mobilne</title>
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<button id="menu-button">MENU</button>
<ul id="menu">
<li><a href="#">Strona główna</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</body>
</html>
Menu zostało stworzone w oparciu o listę nienumerowaną.
W przypadku pracy na własnym kodzie należy koniecznie pamiętać o podpięciu biblioteki jQuery ponieważ to dzięki niej będziemy mogli poprawnie rozwijać menu na mniejszych rozdzielczościach.
- Style:
#menu-button {display: none;}
#menu {list-style: none; float: left; width: 100%;}
#menu li {float: left; display: block; padding: 0 1%;}
#menu li a {text-decoration: none; color: #222;}
@media screen and (min-width: 480px) {
#menu {display: block !important;}
}
@media screen and (max-width: 480px) {
#menu {display: none;}
#menu li {width: 100%; padding: 2% 0;}
#menu-button {display: block;}
}
Dzięki powyższym stylom, a konkretniej regułom „media” przycisk odpowiadający za pokazywanie/ukrywanie naszego menu pojawi się dopiero na ekranach o rozdzielczości mniejszej niż 480 pikseli, a elementy listy menu ułożą się jeden pod drugim.
- Kod jQuery odpowiadający za rozwijanie menu:
$(document).ready(function(){
$('#menu-button').click(function(){
$('#menu').stop().slideToggle(300);
});
});
Mechanizm jest bardzo prosty. Po kliknięciu przycisku, który na powyższym przykładzie ma id = „menu-button” następuje rozwinięcie elementu menu o id = „menu”. Po ponownym kliknięciu przycisku menu zostanie schowane. Wartość podana w nawiasie po funkcji „slideToggle” pozwala na określenie szybkości pokazywania i chowania elementu. Funkcja „stop()” zapobiega powielaniu się animacji po szybkim, wielokrotnym wciśnięciu przycisku.
Poniżej link do działającego przykładu na CodePen (należy zmniejszyć okno do rozmiaru mniejszego niż 480px):
Divy nie są potrzebne do działania menu. W tym przypadku zostały wstawione jako „przedstawienie” struktury stron.
A gdzie są zdefiniowane divy „header” i „wrapper”?
@kuba
kod należy umieścić pomiędzy znacznikami <script type=”text/javascript”> … </script> tuż przed znacznikiem zamykającym </body>
Witam, mam pytanie w którym miejscu mam umieścić dany kod do rozwijania menu?
$(document).ready(function(){
$(’#menu-button').click(function(){
$(’#menu').stop().slideToggle(300);
});
});