Das Erstellen kreativ unterschiedlicher Menüs ist manchmal ziemlich schwierig, wenn Sie keine gute Idee oder Inspiration haben. Aber diese Art von Problem kann durch die Suche nach anderen inspirierenden Menüdesigns oder mit Hilfe von Tools behoben werden. In dieser Angelegenheit, jQuery.Mmenu ist ein ziemlich praktisches Werkzeug.

jQuery.Mmenu ist ein benutzerfreundliches jQuery-Plug-in zum Erstellen eines beweglichen App-Navigationsmenüs auf Ihrer Website. Dieses raffinierte kreative Menü bringt eine schönere und ordentlichere Benutzererfahrung.

Einstieg

Zum Einstieg jQuery.Mmenu, gehen Sie zur Download-Seite und das Plugin wird automatisch heruntergeladen. In diesem Beitrag werden wir versuchen, ein einfaches Menü zu erstellen.

Genau wie bei anderen jQuery-Plugins müssen Sie, um dies zu verwenden, die erforderlichen Abhängigkeiten zu Ihrer Website hinzufügen. Jene sind jQuery, jquery.mmenu.js und jquery.mmenu.css. Der Ausschnitt lautet wie folgt:

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

Und das sollte ausreichen, um ein Basismenü mit allen Funktionalitäten und Stilen zu erstellen. Bei erweiterten und zusätzlichen Funktionen müssen Sie zusätzliche JS- und CSS-Dateien hinzufügen.

Ein … Erstellen Menu

Lassen Sie uns das Grundmenü so erstellen, wie Sie es normalerweise mit dem erstellen nav, ul, li und a Elemente. In dieser Demo erstellen wir ein horizontales Menü, das drei Untermenüs und auch drei Unter-Unter-Menüs hat, etwa so.

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

Im obigen Menü haben wir das Navigationssystem mit einer Menü-ID eingefügt, die als jQuery.mmenu-Funktionsreferenz verwendet wird. Dann ruf die an plugin mit dem javascript Funktion und fügen Sie die ID so ein.

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

Im LI-Tag sehen Sie eine Klasse mit dem Namen Selected, ist diese Klasse nützlich, um bei der Initialisierung das standardmäßig ausgewählte Menü zu erstellen. Sie können auch Ihre eigene Klasse hinzufügen (z active), aber stellen Sie sicher, dass Sie es wie folgt in den Konfigurationsabschnitt aufnehmen.

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

Dieses Plugin hat automatisch die Links zum Schließen und Öffnen des Untermenüs hinzugefügt, sodass wir sie nicht erstellen müssen. So sollte unsere Speisekarte aussehen.

Fazit

jQuery.mmenu bietet Ihnen eine großartige Lösung, um verschiedene Menüs so einfach wie möglich zu erstellen. Sie können mit diesem Plugin sogar andere interaktive Elemente erstellen, zum Beispiel können Sie einen verschiebbaren Tooltip und eine Benachrichtigungsleiste für die mobile Website erstellen.

jQuery.Mmenu kann auch für die Vorabnutzung angepasst werden. Sie können beispielsweise eine mobile-ähnliche Kontaktliste auf Ihrer Website erstellen, indem Sie die Themenerweiterung, das Addon (Labels, Zähler, Kopfzeile, DragOpen und Suchfeld) und die Positionierung kombinieren.

Wenn Sie den Artikel gefunden haben Einfaches Erstellen eines Gleitmenüs mit jQuery.mmenu nützlich, teilen Sie es bitte mit Ihren Freunden. Wir sehen uns in den nächsten Beiträgen. Folgen driveria.net um die neuesten Updates zu erhalten!