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

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

Komentarze

Dodaj komentarz

  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.

Zamów bezpłatną wycenę

Imię i Nazwisko
E-mail*
Numer telefonu*
Adres strony internetowej*
Treść wiadomości
TAK

Jeśli chcesz zostawić nam więcej danych wypełnij brief.

Otrzymaliśmy twoje zgłoszenie

Dziękujemy!

 

Co dalej?

  1. Otrzymasz od nas maila potwierdzającego zgłoszenie.
  2. Nasz wyspecjalizowany zespół już niedługo skontaktuje się z Tobą i opowie o dalszym procesie współpracy.
  3. W oczekiwaniu na telefon zapraszamy do zapoznania się z naszymi REFERENCJAMI.

KLAUZULA INFORMACYJNA

Informujemy, że:

  1. Administratorem Twoich danych osobowych jest EACTIVE wiemy jak sp. z o.o. sp. k. z siedzibą w Świętej Katarzynie, zarejestrowana pod adresem ul. Główna 26/2, 55-010 Święta Katarzyna, reprezentowaną przez: Michała Kliszczaka - Prezesa Zarządu.
  2. Administrator nie wyznaczył Inspektora Ochrony Danych Osobowych. Wszelkie kwestie dotyczące danych osobowych można kierować na e-mail: ochronadanych@eactive.pl lub pisemnie na adres korespondencyjny: EACTIVE wiemy jak sp. z o.o. sp. k. ul. Aleksandra Zelwerowicza 18 A, 53-676 Wrocław.
  3. Twoje dane będą przetwarzane w celu odpowiedzi na zapytanie oraz przygotowania i przedstawienia propozycji współpracy.
  4. Podstawę prawną przetwarzania Twoich danych osobowych jest art. 6 ust. 1 lit. a RODO, czyli Twoja zgoda na przetwarzanie danych osobowych w jednym lub większej liczbie określonych celów oraz art. 6 ust. 1 lit. b RODO, zgodnie z którym przetwarzanie danych jest konieczne w celu podjęcia działań na żądanie osoby, której dane dotyczą.
  5. Dane osobowe nie będą przekazywane innym odbiorcom.
  6. Twoje dane osobowe będą przetwarzane do czasu cofnięcia wyrażonej zgody bądź złożenia sprzeciwu wobec przetwarzania danych.
  7. Podanie danych osobowych jest dobrowolne, jednak podanie adresu e-mail i numeru telefonu jest niezbędne do obsługi zapytania.
  8. Administrator nie przetwarza Twoich danych osobowych przy użyciu narzędzi do zautomatyzowanego podejmowania decyzji, w tym profilowania.
  9. Przysługuje Ci prawo do żądania od Administratora dostępu do Twoich danych osobowych, ich sprostowania, usunięcia, ograniczenia przetwarzania lub ich przeniesienia.
  10. Przysługuje Ci prawo do wniesienia sprzeciwu wobec przetwarzania Twoich danych, a także prawo do cofnięcia wyrażonej zgody w dowolnym momencie - wycofanie zgody nie ma wpływu na zgodność z prawem przetwarzania, którego dokonano na podstawie Twojej zgody przed jej wycofaniem.
  11. W przypadku uznania, że przetwarzanie przez Administratora danych osobowych narusza przepisy RODO przysługuje Ci prawo do wniesienia skargi do organu nadzorczego (tj. Prezesa Urzędu Ochrony Danych Osobowych).

Więcej informacji na temat zasad przetwarzania i ochrony danych osobowych przez EACTIVE wiemy jak sp. z o.o. sp. k. znajdziesz w naszej Polityce Prywatności, dostępnej tutaj.

Rozumiem