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

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

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

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

22/04/2016
Jakub Lisiecki

Udostępnij:

x

ZAMÓW bezpłatną WYCENĘ

Filtr antyspamowy

Podanie imienia i nazwiska jest dobrowolne, natomiast podanie numeru telefonu i adresu e-mail jest niezbędne do obsługi zapytania. Państwa dane będą przetwarzane w celu obsługi wysłanego zapytania i tak długo, jak to konieczne do obsługi tego zapytania. Mają Państwo prawo do dostępu do swoich danych, ich sprostowania, usunięcia, ograniczenia przetwarzania, wniesienia sprzeciwu wobec przetwarzania oraz przeniesienia danych. Wysłane zapytanie obsługiwane jest przez EACTIVE wiemy jak sp. z o.o. sp. k.

* Pole wymagane

#wiemyjak

Komentarze

*

*

*

Zasady komentowania

  1. Gdy dodajesz komentarz, pamiętaj, aby:
    1. Komentarze podpisywać imieniem i/lub nazwiskiem.
    2. W polu „witryna internetowa” umieszczać link tylko do strony głównej.
  2. 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ą prawo polskie.

  1. kuba pisze:

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

  2. Jakub Lisiecki EACTIVE pisze:

    @kuba
    kod należy umieścić pomiędzy znacznikami <script type=”text/javascript”> … </script> tuż przed znacznikiem zamykającym </body>

  3. Pomidor Krzaczasty pisze:

    A gdzie są zdefiniowane divy „header” i „wrapper”?

  4. Natalia Wolak EACTIVE pisze:

    Divy nie są potrzebne do działania menu. W tym przypadku zostały wstawione jako „przedstawienie” struktury stron.

Znajdź nas na Facebooku
Eactive - wiemy jak Lubię to