So entwerfen Sie ein Website-Menü

Dieses Handbuch konzentriert sich auf das Menüdesign – wie das Menü aussieht und wie es funktioniert. Wenn Sie erfahren möchten, wie Sie ein Website-Menü entwerfen, es auf jeder Seite Ihrer Website anzeigen oder ein Navigationsmenü für eine bestimmte Webseite erstellen, empfehlen wir Ihnen, eine andere Anleitung zu lesen:

So sieht es aus:
Ein solches Menü ist oben auf der Seite angeheftet, um die Website-Besucher nicht vom Inhalt abzulenken, und sie können es bei Bedarf leicht finden, da es an einer bestimmten Stelle auf der Seite angebracht ist.

So richten Sie es ein:

Fügen Sie der Seite einen ME301-Block hinzu, und wenden Sie die folgenden Einstellungen an:

Haupteinstellungen → Menüpositionsverhalten: Absolut.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.

So sieht es aus:
Ein solches Menü ist immer auf der Seite sichtbar und kann von jeder Stelle auf der Seite aus leicht aufgerufen werden. Es hat normalerweise einen transparenten Hintergrund oben auf der Seite (auf dem Cover), der beim Scrollen undurchsichtig wird.

So richten Sie es ein:

Fügen Sie der Seite einen ME301-Block hinzu, und wenden Sie die folgenden Einstellungen an:

Haupteinstellungen → Menüpositionsverhalten: Beim Scrollen behoben.
Menühintergrund → Menühintergrundfarbe. Pick eine Farbe.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Menühintergrund → Deckkraft des Menühintergrunds beim Scrollen: 80%.

Wie es aussieht:
Dieses Menü ähnelt dem oben beschriebenen. Was es anders macht, ist ein weiteres Menü, das beim Scrollen erscheint und noch mehr Elemente enthält. Das obere Navigationsmenü enthält beispielsweise ein Logo, einige Menüpunkte, die zu verschiedenen Seiten der Website führen, und einige Links zu sozialen Medien. Wenn der Benutzer durch die Seite scrollt, erscheint eine weitere Menüleiste mit einem Logo, einem Call-to-Action und einer Rückrufschaltfläche.

So richten Sie es ein:
Fügen Sie der Seite einen ME301-Block hinzu, und wenden Sie die folgenden Einstellungen an:

Menü Eins (oben auf der Seite)
Haupteinstellungen → Menüpositionsverhalten: Absolut.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.

Menü Zwei (erscheint auf der Bildrolle)
Haupteinstellungen → Verhalten der Menüposition: Beim Scrollen behoben.
Haupteinstellungen → Menü Anzeigen, wenn die Seite in Pixel nach unten gescrollt wird: 600px.
Menühintergrund → Menühintergrundfarbe. Wählen Sie eine Farbe aus.
Menühintergrund → Deckkraft des Menühintergrunds: 70%.

Wie es aussieht:
Das Hamburger-Menü besteht aus den drei horizontalen Linien am oberen Bildschirmrand. Wenn der Benutzer darauf klickt, wird ein Navigationsmenü angezeigt.

Wofür Sie es verwenden können:
Ein solches Menü eignet sich perfekt für Ihre Website, wenn Sie möchten, dass sich die Besucher auf den Inhalt konzentrieren, ohne von anderen Designelementen abgelenkt zu werden. Das Hamburger-Menü wird normalerweise in einer mobilen Version der Website verwendet. Sie können festlegen, wie das Menü auf verschiedenen Geräten angezeigt wird.

Sie können sich beispielsweise dafür entscheiden, dass ein normales Menü nur auf der Desktop-Version Ihrer Website angezeigt wird und das Hamburger-Menü nur auf Mobilgeräten sichtbar ist.

So richten Sie es ein:
Fügen Sie der Seite einen ME401/402/403/404/405-Block hinzu, legen Sie das Verhalten der Menüposition, die Farbe des Menüsymbols und die Textfarbe des Menüelements fest.

Sie können beispielsweise die folgenden Einstellungen anwenden:
Haupteinstellungen → Menüpositionsverhalten: Beim Scrollen behoben.
Menüpunkt → Farbe. Wählen Sie Schwarz.
Menühintergrund → Reduzierte Menühintergrundfarbe. Machen Sie es transparent.
Menühintergrund → Erweiterte Menühintergrundfarbe. Wählen Sie Weiß.

Wie es aussieht:
Wenn Sie auf ein Menüelement klicken, wird ein Dropdown-Menü angezeigt.

Wofür Sie es verwenden können:
Große Websites mit einer fortgeschrittenen Struktur.

So richten Sie es ein:
Fügen Sie der Seite den ME301-Block hinzu, richten Sie ein Menü ähnlich dem oben beschriebenen ein und fügen Sie dann Unterelemente im Inhaltsbedienfeld des Blocks hinzu.

1. Öffnen Sie den Bereich Inhalt des Blocks → Menüpunkte → Unterelemente hinzufügen.
2. Klicken Sie auf das Plus-Symbol neben einem Element, geben Sie einen Unterartikeltitel ein und weisen Sie einen Link zu. Wiederholen Sie diesen Vorgang, bis alle erforderlichen Unterelemente hinzugefügt wurden.
3. Öffnen Sie den Bereich Einstellungen des Blocks → Untermenüeinstellungen. Aktivieren Sie das Kontrollkästchen "Menüsymbol der zweiten Ebene anzeigen".

Bitte beachten Sie, dass der Hauptmenüpunkt selbst nicht anklickbar ist. Wenn Sie es anklickbar machen möchten, erstellen Sie ein doppeltes Unterelement im Dropdown-Menü.

Wie es aussieht:
Eine aktive Registerkarte ermöglicht es Benutzern, damit verknüpfte Inhalte zu durchsuchen, ohne die Webseite zu verlassen.

Wofür Sie es verwenden können:
Mithilfe von Registerkarten können Sie mehrere Kategorien desselben Inhaltstyps anzeigen, beispielsweise verschiedene Kategorien von Werken innerhalb eines Portfolios.

So richten Sie es ein:
Fügen Sie der Seite einen ME602- oder ME603-Block hinzu. Mit diesen Blöcken können Sie Registerkarten erstellen und Inhalte anzeigen, wenn der Benutzer auf eine Registerkarte auf derselben Seite klickt. Nachfolgend müssen Sie Blöcke in einer Reihenfolge hinzufügen, die sich ändert, wenn der Benutzer auf eine bestimmte Registerkarte klickt.

Wie es funktioniert:
1. Fügen Sie Registerkartentitel im Inhaltsbereich des ME602- oder ME603-Blocks hinzu.
2. Fügen Sie die IDs der Blöcke hinzu, die sichtbar sein sollen, wenn Sie auf die Registerkarte klicken (trennen Sie sie durch ein Komma, ohne Leerzeichen).

Hinweis: Sie können die ID des Blocks im Bereich „Einstellungen“ des Blocks kopieren – scrollen Sie nach unten zum unteren Rand des Bereichs, um sie zu finden.

Wie es aussieht:
Es zeigt Artikel im Warenkorb, Artikel, die zu Favoriten hinzugefügt wurden, und ein Such-Widget im Menü neben dem Navigationsbereich an.

Wofür Sie es verwenden können:
Das Menü ist hilfreich für dieProduktkatalogBenutzer, um den Warenkorb, das Website-Such-Widget und die Favoriten kurz anzuzeigen.

So richten Sie es ein:
Fügen Sie den ME401-Block der Seite → Registerkarte Inhalt → Warenkorb, Suche und Favoriten hinzu → aktivieren Sie die Kontrollkästchen, um die gewünschten Symbole im Menü anzuzeigen.

Aktivieren Sie das Kontrollkästchen "Native Widget-Schaltflächen nicht anzeigen", um die Symbole nur im Menü anzuzeigen.

Fügen Sie dann den Einkaufswagen-Block ST100, den Such-Widget-Block T985 und den Favoriten-Block ST110 hinzu und veröffentlichen Sie die Seite.

Erledigt.

Diese Funktion funktioniert für alle Menüblöcke mit der Nummer ME4XX.

Anzeigeoptionen:
Wenn Sie sowohl Symbole als auch die Schaltfläche Favoriten-Widget im Menü anzeigen möchten, deaktivieren Sie die Option "Native Widget-Schaltflächen nicht anzeigen" auf der Registerkarte Inhalt des ME401-Blocks.

Sie können das Widget-Symbol für die Blöcke ST100 Warenkorb und T985 Suche ausblenden – aktivieren Sie auf der Registerkarte "Weitere Einstellungen" im Block Einstellungen das Kontrollkästchen "Schaltfläche Widget nicht anzeigen". Veröffentlichen Sie die Seite.

Erledigt! Im Menü werden drei Symbole angezeigt und es gibt ein separates Widget für Favoriten. Sie können die Sichtbarkeit für den Einkaufswagen oder das Such-Widget auf ähnliche Weise konfigurieren.

Hier sind einige wichtige Optionen für die Menügestaltung. Wenn Sie neue Ideen haben und diese teilen möchten, senden Sie bitte den Link zu Ihrer Website per E-Mail an team@tilda.cc mit dem Betreff „Menüdesign“. Danke schön!

Viel Glück bei Ihren Designexperimenten!