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

Odpowiadasz na komentarz Natalia Wolak EACTIVE.

Podpis i/lub Nazwisko / Pseudonim *

E-mail *

Zabezpieczenie przed spamem. Jakie jest motto firmy EACTIVE?
Jak nie wiesz w pole poniżej wpisz: wiemy jak

Zasady komentowania

Gdy dodajesz komentarz, pamiętaj, aby:
1. Komentarze podpisywać imieniem i/lub nazwiskiem lub pseudonimem.
2. W polu „witryna internetowa” umieszczać link tylko do strony głównej.
Wszystkie komentarze są moderowane i zastrzegamy sobie prawo do usunięcia lub edytowania wpisu/komentarza, który:
1. zawiera wulgaryzmy;
2. obraża innych użytkowników;
3. może być uznany za spam lub ma charakter reklamowy;
4. nie pasuje tematycznie do wpisu, nie zawiera treści merytorycznej;
5. zawiera linki do stron, które naruszają Polskie prawo.

Zgoda obowiązkowa: Wyrażam zgodę na przetwarzanie przez EACTIVE #wiemyjak - Kliszczak sp. k. moich danych osobowych w celu zamieszczenia komentarza na stronie internetowej https://www.eactive.pl/blog/ i jego podstronach. Szczegółowe informacje dotyczące Administratora przetwarzania Twoich danych znajdziesz .

Powiadom mnie kiedy zostaną dodane nowe komentarze.

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);
});
});