Jak stworzyć proste menu mobilne przy użyciu CSS oraz jQuery?

22 kwietnia 2016
Autor: jlisiecki

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):

https://codepen.io/Eactive/pen/WwpJNE

Komentarze

Dodaj komentarz

Natalia Wolak EACTIVE pisze:
29/08/2018 o 13:59
Divy nie są potrzebne do działania menu. W tym przypadku zostały wstawione jako „przedstawienie” struktury stron.
Pomidor Krzaczasty pisze:
28/08/2018 o 23:34
A gdzie są zdefiniowane divy „header” i „wrapper”?
Jakub Lisiecki EACTIVE pisze:
03/08/2017 o 11:45
@kuba
kod należy umieścić pomiędzy znacznikami <script type=”text/javascript”> … </script> tuż przed znacznikiem zamykającym </body>
kuba pisze:
03/08/2017 o 11:29
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);
});
});