YAMM3 - Erstellen Megamenu für Bootstrap 3

Es gibt viele Usability-Vorteile bei der Verwendung von Megamenu auf einer Webseite. Mit Megamenu haben Sie die volle Kontrolle über Ihr Menü . Fast alle Webelemente können dort zugeordnet werden. Einige großartige Unternehmen haben sogar Megamenu auf ihre Website angewendet. Amazon und Mashable zum Beispiel. Amazon hat einen Bildhintergrund in ihrem Menü und Mashable verwendet Bildminiaturen für ein attraktiveres Menü.

Wenn Sie mit Bootstrap gearbeitet haben, können Sie jetzt mit dieser brandneuen Bibliothek namens Yamm von Geedmo ein Megamenu im Handumdrehen erstellen.

Yamm3 ( Yet Another Megamenu ) ist eine CSS-Bibliothek, die Ihnen beim einfachen Erstellen eines Megamenus in Bootstrap 3 hilft . Das Megamenu funktioniert sowohl für responsive als auch für feste Layouts . Es deckt fast alle Bootstrap-Elemente ab, die in der Navbar enthalten sein sollen, wie Bild, Akkordeon, Liste, Gitter, Tabelle, Form und so weiter.

Grundlegende Anleitung

Yamm3 verwendet leichtes und reines CSS. Um mit Yamm3 zu beginnen, müssen Sie nur die Yamm3-Klasse, die Sie benötigen, in Ihr standardmäßiges Navbar-HTML-Markup einfügen.

Bevor Sie mit Yamm3 arbeiten, müssen Sie zunächst die Stylesheet- Bibliothek Yamm3 und Bootstrap in den Kopfbereich einfügen :

 ...  ... 

Und vergiss nicht, auch die jQuery- und Bootstrap-Bibliothek in dein Projekt aufzunehmen, entweder in den Kopf oder in den Hauptteil, so:

 ... ... 

Bitte beachten Sie, dass wir hier Bootstrap 3 verwenden und die mindestens erforderliche jQuery-Version Version 1.9.0+ ist . Wenn Sie immer noch mit der vorherigen Bootstrap-Version arbeiten, empfehlen wir, die Anleitung der vorherigen Yamm-Version zu befolgen.

HTML-Markup

Um Yamm3 zu verwenden, fügen Sie zuerst die .yamm Klasse am oberen Rand des Navbar-Markups hinzu. Dann können Sie Ihr Menü-Markup in die .dropdown-menu Klasse .dropdown-menu . Das folgende ist ein grundlegendes Beispiel.

Wie Sie dort sehen können, können Sie auch .yamm-content als Option verwenden, um Inhalt mit .yamm-content zu umhüllen.

Versuchen wir zum Beispiel, ein Akkordeonmenü in unserer Markup-Navigationsleiste hinzuzufügen. Ersetzen Sie den Kommentar " Ihr Menü geht hier" durch den folgenden Code.

Akkordeon Gruppe Artikel # 1 
 Dies ist zusammenklappbares Menü. 
Akkordeon Gruppe Artikel # 2 
 Dies ist zusammenklappbares Menü. 

Durch Aufrufen der accordion ID und Verwenden einer panel-group Klasse zum Gruppieren können Sie ein Akkordeon innerhalb der Navbar erstellen. Und so wird unser Menü wie im Screenshot aussehen:

Es gibt viele andere Komponenten, die Sie der Navigationsleiste hinzufügen können. Die Selbsterforschung anderer Komponenten, die Sie implementieren können, kann durchgeführt werden, wenn Sie das vollständige Yamm3-Archiv herunterladen und die Datei index.html mit Ihrem bevorzugten Code-Editor öffnen.

Javascript

Es gibt einen zusätzlichen JavaScript-Code, der zur Verhinderung eines unerwarteten geschlossenen Menüs in einigen Komponenten wie Akkordeon, Formularen usw. verwendet wird. Fügen Sie einfach den folgenden Code in Ihren Kopf- oder Körperteil ein:

Fazit

Yamm3 ist ein weiteres großartiges Produkt von Drittanbietern, das die Entwicklung von Twitter Bootstrap beim Aufbau einer attraktiven Navbar unterstützt. Sie benötigen nur ein wenig Aufwand, um alle Implementierungskomponenten zu untersuchen, da die Dokumentationsunterstützung für das Erstellen verschiedener Komponenten fehlt .

Teilen Sie uns Ihre Meinung in den Kommentaren unten.

Wie werde ich ein Gmail Power User? [Infografik]

Das Internet hat versucht, E-Mail für immer zu töten und bis jetzt macht es keinen guten Job. Warum sonst gibt es so viele Anleitungen und Artikel, die Ihnen beibringen, wie Sie Zero Inbox erreichen oder wie man ein Gmail Power User wird ?Diese Infografik fügt dem Stapel zahlreiche hilfreiche Tipps hinzu, mit denen Sie schneller arbeiten (Tastaturkurzbefehle verwenden), produktiver arbeiten (vordefinierte Antworten, automatische Archive) und besser organisiert (Filter, Ordner und Labels verwenden) in Google Mail verwenden können.Mei

(Tech- und Design-Tipps)

Gruppieren und überwachen Sie alle Ihre Analysen an einem Ort mit Cyfe

Sie können viele Social-Media-Seiten pflegen, zusätzlich zu einem WordPress-Blog, ein Google Mail-Konto, das Sie behalten müssen, und wer weiß was noch. Wenn Sie jemals gehofft haben, dass Sie die meisten oder alle diese Konten zusammenbringen und sie alle an einem Ort verfolgen können, können Sie jetzt: Hallo zu Cyfe sagen.Cyfe

(Tech- und Design-Tipps)