Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite

Lernmaterial Design Lite: Das Menü

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Cards
Learning Material Design Lite: Customizing

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

In diesem Teil unserer MDL-Reihe (Learning Material Design Lite) werden wir uns mit der Menükomponente befassen. Dies ist eine Komponente, die Sie gelegentlich benötigen, um ein Kontextmenü mit verfügbaren Aktionen bereitzustellen.

In Facebook wird beispielsweise in der Seitenleiste ein Kontextmenü angezeigt, in dem eine Liste der Online- und Offline-Freunde angezeigt wird. Das Menü befindet sich unten in Übereinstimmung mit dem Suchformular, das mit einem Zahnradsymbol dargestellt ist.

Kontextmenü der Facebook-Seitenleiste.

In Google Mail gibt es ein weiteres gutes Beispiel. Sie finden dieses Kontextmenü inline auf der Registerkarte Posteingang unter der Schaltfläche Verfassen. Es bietet Aktionen zum Sortieren eingehender Nachrichten in Ihrem Posteingang für eine bessere E-Mail-Verwaltung.

In diesem Tutorial erfahren Sie, wie Sie ein Kontextmenü mithilfe der MDL-Menükomponente implementieren. Bevor Sie jedoch beginnen, fügen Sie die MDL-Bibliotheken - die Stylesheets und das JavaScript - zum head Ihres Dokuments hinzu.

Sobald wir fertig sind, lass uns gehen!

Gehen!

Nehmen wir an, wir haben eine Website für unser Unternehmen und das Unternehmen hat jetzt mehrere Niederlassungen in verschiedenen Ländern. Jetzt muss die Website in mehreren Sprachen präsentiert werden. Dies ist ein gutes Szenario, in dem wir möglicherweise die Menükomponente auf unserer Website verwenden: das Wechseln der Sprache.

Um dieses Sprachumschaltmenü zu erstellen, erstellen wir zunächst ein Symbolschaltflächenelement mit einer id, damit wir es mit dem Menü verbinden können. Wir verwenden das Symbol für die Material Design-Sprache.

Sie können sich auch für einen flachen Schaltfläche entscheiden, wenn Sie ihn für das Gesamtdesign Ihrer Website besser geeignet finden, zum Beispiel:

Die Liste

Als Nächstes fügen wir die Liste der Sprachen hinzu. Bevor wir dies tun, müssen wir entscheiden, wo das Menü in Bezug auf die Tastenposition angezeigt werden soll. Abhängig vom Layout der Website wird der Sprachumschalter möglicherweise in der Navigation angezeigt. Wir können es auch irgendwo unten in der Fußzeile hinzufügen.

Wenn wir feststellen, dass sich die Position in der unteren rechten Ecke der Site befindet, fügen wir das Menü mithilfe der Modifier-Klasse hinzu: mdl-menu--top-right. Das Menü wird, wie der Klassenname andeutet, oben links auf der Schaltfläche angezeigt. Ersetzen Sie die Klasse durch eine der folgenden Klassen, um das Menü anders zu positionieren:

  • mdl-menu--bottom-right
  • mdl-menu--bottom-left: Dies ist die Standardeinstellung, wenn dem Menü keine andere Klasse zugeordnet ist. Das Menü wird unten linksbündig angezeigt.
  • mdl-menu--top-left

Wir könnten das Menü überall hinzufügen. Es ist jedoch besser, es in der Nähe des gleichen Behälters wie die Schaltfläche zu halten.

for

Beachten Sie beim Menü-Markup das Attribut for. Wie Sie oben sehen können, muss der for-Attributwert mit der id der Schaltfläche übereinstimmen.

Wenn sich die Schaltfläche oben auf der Website befindet, sollte das Menü unten angezeigt werden, indem Sie das mdl-menu--bottom-right Klasse.

Mehr Beispiele

Eine weitere mögliche Anwendung der Menükomponente ist die Verbesserung unserer Blogpostkarte aus dem vorherigen Tutorial. Dort haben wir den Beitrag mit einem Share-Button; Wir könnten die Menükomponente verwenden, um Optionen für die Auswahl sozialer Netzwerke bereitzustellen:

Einpacken

Die MDL-Menükomponente ist einfach zu implementieren. Wie wir hier erfahren haben, ist ein ungeordnetes Listenelement mit einigen Klassen erforderlich, und dann haben wir das Menü bereit - so einfach ist das.

Im nächsten Tutorial erfahren Sie, wie Sie alle bisher verwendeten Komponenten anpassen können. Wir sehen uns dort!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.