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.

7 Tipps, um Sie in den Schriftsteller zu verwandeln, den jeder lesen möchte

Haben Sie sich jemals gefragt, was genau ein großer Schriftsteller von einem durchschnittlichen Schriftsteller unterscheidet ? Die offensichtliche Antwort wäre Talent. Fragen Sie jedoch einen großen Schriftsteller und sie würden den Punkt argumentieren. Es gibt eine Tonne durchschnittlicher Autoren da draußen mit so viel Talent wie jeder andere . Es

(Tech- und Design-Tipps)

Wie 10 globale Startups Weltprobleme lösen

Wir sind es gewohnt, neue Start-ups zu sehen, die unser Leben einfacher machen, indem wir unsere Einkäufe erledigen oder perfekte Kleidung für uns finden. Aber was ist mit Startups, die versuchen, größere, drängendere Offline-Probleme zu lösen: Entwaldung, Mangel an grünen Stromquellen oder sogar schlechte Qualität von Straßenoberflächen?Ich habe

(Tech- und Design-Tipps)