So erstellen Sie eine Off-Canvas-Navigation mit jQuery.mmenu

Dieses Tutorial führt Sie durch jQuery.mmenu, ein jQuery-Plugin, mit dem umfangreiche Webseitennavigation erstellt wird. Wenn wir uns das genauer ansehen, werden wir sehen, wie wir dieses Plugin verwenden können, um ein neues Menü außerhalb der Leinwand zu erstellen.

Was ist jQuery.mmenu?

Die beste Beschreibung für jQuery.mmenu finden Sie auf der Github-Seite:

„Das beste jQuery-Plugin für App-ähnliche Menüs auf und außerhalb der Leinwand mit verschiebbaren Untermenüs für Ihre Website und Webapp.

Das Plugin "jQuery.mmenu" ist sehr anpassbar und wird mit vielen Add-Ons (z. B. Zählern und Teilern) sowie Erweiterungen (z. B. Effekten und Seitenschatten) geliefert. Für diejenigen, die es vorziehen, ist es als Wordpress-Plugin verfügbar und funktioniert in einer Vielzahl von Browsern gut!

Erste Schritte mit jQuery.mmenu

Zunächst müssen Sie eine Kopie der Bibliothek erwerben. Dies kann durch den Besuch der offiziellen Seite, durch einen Paketmanager (z. B. Bower) oder ein CDN (z. B. cdnjs) erfolgen..

Nach dem Download müssen Sie die erforderlichen CSS- und JS-Dateien in Ihre Seiten einfügen. 

Bitte beachten Sie, dass abhängig von dem Menü, das Sie erstellen möchten, unterschiedliche Elemente erforderlich sind. Für ein Off-Canvas-Menü ist beispielsweise die Option erforderlich jquery.mmenu.css (oder ihre reduzierte Version) und jquery.mmenu.js (oder ihre reduzierte Version) Dateien. Wenn Sie das Standardverhalten des Menüs ändern möchten (z. B. seine Position nach rechts verschieben), müssen Sie auch die Dateien einschließen, die mit dem Zusatzmodul "off canvas" zusammenhängen. Wenn dies verwirrend erscheint und Sie sich keine Gedanken darüber machen müssen, welche Dateien erforderlich sind, verwenden Sie die Dateien "all" (d. H. jquery.mmenu.all.css und jquery.mmenu.min.all.js ) in deine Projekte.

In unserer Demo importieren wir die "alle" Dateien über ein CDN. Das Kopf Das Element unserer Seite verweist auf die CSS-Datei "all":

Auf dieselbe Weise platzieren wir vor dem Schließen das Skript "all" (und eine Kopie von jQuery) Etikett:

Beginnen wir also mit dem Aufbau des Menüs!

HTML einrichten

Beginnen wir mit dem Verständnis der Struktur unserer Seite. Hier ist der entsprechende HTML-Code:

Beachten Sie, dass wir alle Elemente außer dem nav Element innerhalb eines Containers div. 

Wir können ein anderes Element als Container verwenden, aber dann müssen wir das Plugin dann über die entsprechende Konfigurationseigenschaft (d. H. Das.) Über diese Änderung informieren offCanvas.pageNodetype Eigentum). Außerdem sollten wir, wenn möglich, vermeiden, eine Reihe von CSS-Eigenschaften für das Wrapper-Element zu deklarieren. Im Einzelnen empfiehlt das Plugin Folgendes:

"Diese DIV ist am besten ohne (Min- / Max-) Breite und Höhe, Polsterung, Rand und Rand."

Der Markup

Der nächste Schritt besteht darin, die Struktur des Menüs genauer zu betrachten. Der entsprechende HTML-Code sieht folgendermaßen aus:

Hier haben wir einfachen HTML-Code verwendet, um unser Menü zu erstellen. Ungeordnete Listen mit verschachtelten Listen und Links. Das Plugin erwartet kein bestimmtes Markup. Glücklicherweise können wir jedes gewünschte Markup verwenden. 

Wir weisen dem Menü eine eindeutige Kennung zu, die wir später verwenden werden, um das Plugin zu instanziieren. Dann verstecken wir es, bis alle Stile erfolgreich angewendet wurden. Dieser Schritt ist wichtig, da durch das Hinzufügen des folgenden CSS-Codes ein störendes FOUC verhindert wird:

nav Anzeige: keine; 

Nun, da wir unsere Seite vorbereitet haben, ist es Zeit, das Menü zu initialisieren!

Plugin abfeuern

Bevor wir zeigen, wie wir das Plugin auslösen können, wollen wir zunächst einige unserer Selektoren zwischenspeichern: 

var $ menu = $ ('# menu'); var $ btnMenu = $ ('. btn-menu'); var $ img = $ ('img');

Jetzt initialisieren wir es mit dem folgenden Code:

$ menu.mmenu (// Konfigurationseinstellungen hier);

Wir können das Standard-Erscheinungsbild und die Funktionalität unseres Menüs über CSS und die verfügbaren Konfigurationseinstellungen anpassen. Wir werden gleich einige Beispiele sehen.

Außerdem haben wir die Möglichkeit, das Menü entweder automatisch oder manuell zu öffnen und zu schließen. In unserem Fall zeigen wir das Menü an, wenn das Element mit der btn-Speisekarte Klasse wird angeklickt. Um diese Funktionalität zu erreichen, nutzen wir die verfügbare API. Hier ist der erforderliche Code:

var api = $ menu.data ("menü"); $ btnMenu.click (function () api.open (););

Im Gegensatz dazu werden wir das Menü ausblenden automatisch. Dies ist das Standardverhalten. Wird ausgelöst, wenn wir auf einen beliebigen Teil der Seite klicken, mit Ausnahme des Teils, der zum Menü gehört.

Bevor wir fortfahren, gibt es noch etwas, was ich erwähnen sollte. Wenn wir versuchen, ein Untermenü zu öffnen, klicken Sie auf den Zielmenüpunkt (ein Element) ist dieses Element nicht vollständig anklickbar. Insbesondere wird das Untermenü nur geöffnet, wenn wir auf den rechten Teil dieses Menüelements klicken (siehe Live-Beispiel, um dieses Verhalten zu verstehen). Um das zu machen ganz Menüpunkt anklickbar, müssen wir die folgende Codezeile hinzufügen:

$ menu.find (".mm-next") .addClass ("mm-fullsubopen");

Ändern des Off-Canvas-Bildes

In diesem Abschnitt besteht das Ziel darin, je nach Status unseres Menüs ein anderes Navigationssymbol anzuzeigen. Der Screenshot unten zeigt, was wir erreichen wollen: 

Die zwei Symbolzustände

Um dies zu erreichen, arbeiten wir mit der Öffnung und Schließen Veranstaltungen. Die Dokumentation dieser Ereignisse finden Sie auf der Seite, die sich auf das Add-On "offCanvas" bezieht. Hier ist der Ausschnitt, mit dem wir die Icons ändern:

api.bind ('opening', function () $ img.attr ('src', 'arrows_remove.svg');); api.bind ('close', function () $ img.attr ('src', 'arrows_hamburger.svg'););

Neben den oben genannten Ereignissen gibt es noch ein paar andere, mit denen Sie spielen können (z geöffnet und geschlossen Veranstaltungen), die für Ihre eigenen Projekte nützlich sein könnten.

Ändern der Standardbreite

Um die vordefinierte Breite des Menüs zu ändern, können Sie entweder CSS oder Sass verwenden (durch Ändern der Quelldateien). Standardmäßig ist es min-Breite und maximale Breite Eigenschaftswerte sind gleich 140px und 440px beziehungsweise. In unserer Demo wollen wir sehen, wie wir den Anfang ändern können maximale Breite Eigenschaftswert durch CSS. Nachfolgend sind die CSS-Regeln aufgeführt, die überschrieben werden müssen:

.mm-Menü max-Breite: 350px;  / ** * Weitere Herstellerpräfixe hinzufügen * abhängig von den Browsern, auf die Sie abzielen * / @media all und (min-width: 550px) html.mm-opening .mm-slideout transform: translate (350px, 0) ;  / ** * Diese Regel überschreiben *, falls Sie ein rechtes Menü erstellen * / @media all und (min. Breite: 550px) html.mm-right.mm-opening .mm-slideout transform: translate (-350px, 0); 

Zusätzliche CSS-Änderungen

An dieser Stelle passen wir das Erscheinungsbild des Menüs weiter an. Wir bearbeiten die Sass-Quelldatei erneut, um die Stile gemäß unseren Anforderungen zu ändern. Schauen Sie sich die Regeln an, die wir unten überschreiben (zur Vereinfachung habe ich die Werte der Sass-Variablen ausgelassen): 

.mm-Menü Hintergrund: dunkler ($ Hauptfarbe, 10%);  .mm-listview> li> a color: $ text-color; Polsterung: 20px;  .mm-listview> li> a: hover, .mm-listview .mm-next.mm-fullsubopen: hover + a color: $ highlight-color;  .mm-listview> li> a: hover span color: $ text-color;  .mm-menu .mm-listview> li.mm-selected> a: nicht (.mm-next) hintergrund: transparente url (arrows_check.svg) no-repeat center right 10px; Hintergrundgröße: 30px 30px; Textdekoration: durchgehend; 

Betrachten Sie nun die allerletzte Regel. Jedes Mal, wenn wir auf einen Menüpunkt klicken, erhält er die mm ausgewählt Klasse, so können wir diesen Selektor verwenden, um es zu gestalten. Wir möchten jedoch nur das letzte Element in einem Auswahlprozess formatieren, sodass wir auf diejenigen verweisen, für die es keine Klasse gibt mm-nächste. 

"Über" führt zum Untermenü rechts, aber wir haben nur den zuletzt angeklickten Link gestaltet

Erweiterungen und Add-Ons hinzufügen

In einem vorherigen Abschnitt haben wir gesehen, wie wir das Plugin initialisieren. Lassen Sie uns nun das Verhalten und die Funktionalität erweitern, indem Sie die Standardkonfigurationsoptionen überschreiben. 

Zuerst ändern wir den Titel, der über dem Hauptfenster angezeigt wird. 

Als nächstes schließen wir die Add-Ons "counter" und "off canvas" ein. Mit diesem letzten Add-On können wir die Position des Menüs relativ zur Seite ändern. 

Zum Schluss fügen wir drei Erweiterungen hinzu. Überprüfen Sie unten den endgültigen Initialisierungscode: 

$ menu.mmenu (counters: true, navbar: title: "Menu Content"], Erweiterungen: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"], offCanvas: position: "rechts", zposition: "zurück");

Fazit

In diesem Lernprogramm haben wir mit dem jQuery.mmenu-Plugin ein Off-Canvas-Menü erstellt. Als nächsten Schritt sollten Sie sich die vollständige Quelle für unsere Demo zu CodePen ansehen. Dann schlage ich vor, dass Sie auf die offizielle Seite von jQuery.mmenu springen und die verschiedenen interaktiven Beispiele betrachten, die verfügbar sind. Zeigen Sie uns Ihre Beispiele in den Kommentaren!

Wenn Sie nach einer schnellen Lösung suchen, vergessen Sie nicht, dass Envato Market eine Sammlung verschiedener CSS- oder JavaScript-Menüs und Navigations-Widgets enthält. Es ist ein guter Ausgangspunkt für Ideen und Beispiele.