Tworzenie twórczo odmiennego menu jest czasem dość trudne, gdy nie masz dobrego pomysłu lub inspiracji. Ale ten rodzaj sprawy można rozwiązać, wyszukując inne inspirujące projekty menu lub za pomocą narzędzi. W tej sprawie, jQuery.Mmenu jest bardzo przydatnym narzędziem.

jQuery.Mmenu to łatwa w użyciu wtyczka jQuery do tworzenia przesuwanego menu nawigacyjnego aplikacji mobilnej w Twojej witrynie. To zgrabne, kreatywne menu zapewni ładniejsze i schludniejsze wrażenia użytkownika.

Pierwsze kroki

Na początek jQuery.Mmenu, przejdź do strony pobierania, a wtyczka zostanie pobrana automatycznie. W tym poście postaramy się zbudować podstawowe menu.

Podobnie jak w przypadku innych wtyczek jQuery, aby z niego skorzystać, musisz dołączyć wymagane zależności do swojej witryny. To są jQuery, jquery.mmenu.js oraz jquery.mmenu.css. Fragment kodu wygląda następująco:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

A to powinno wystarczyć do stworzenia podstawowego menu ze wszystkimi funkcjonalnościami i stylizacją. W przypadku bardziej zaawansowanych i dodatkowych funkcji musisz dołączyć dodatkowy plik JS i CSS.

Tworząc Menu

Stwórzmy podstawowe menu, tak jak zwykle tworzysz je za pomocą nav, ul, li oraz a elementy. W tym demo utworzymy poziome menu, które ma trzy podmenu, a także trzy podmenu, tak jak powyżej.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

W powyższym menu umieściliśmy nav z identyfikatorem menu, który będzie używany jako odniesienie do funkcji jQuery.mmenu. Następnie zadzwoń do plugin z javascript funkcji i dołącz taki identyfikator.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

W tagu LI możesz zobaczyć klasę o nazwie Selected, ta klasa jest przydatna do ustawienia domyślnego menu podczas inicjalizacji. Możesz także dodać własną klasę (na przykład active), ale pamiętaj, aby uwzględnić go w sekcji konfiguracji, tak jak w ten sposób.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Ta wtyczka automatycznie dodała podmenu zamykające i otwierające linki, więc nie musimy ich tworzyć. Tak powinno wyglądać nasze menu.

Wniosek

jQuery.mmenu oferuje świetne rozwiązanie do tworzenia różnych menu tak łatwo, jak to tylko możliwe. Możesz nawet tworzyć inne interaktywne elementy tej wtyczki, na przykład możesz utworzyć przesuwaną podpowiedź i pasek powiadomień dla witryny mobilnej.

jQuery.Mmenu można również dostosować do wcześniejszego użycia. Na przykład możesz utworzyć listę kontaktów podobną do mobilnej w swojej witrynie, łącząc jej rozszerzenie tematów, dodatki (etykiety, liczniki, nagłówek, dragOpen i searchfield) i pozycjonowanie.

Jeśli znalazłeś artykuł Tworzenie przesuwanego menu z łatwością za pomocą jQuery.mmenu przydatne, podziel się nim ze znajomymi. Do zobaczenia w kolejnych postach. Podążać driveria.net aby uzyskać najnowsze aktualizacje!