Wie man ein Website-Menü gestaltet
Optionen für die Menügestaltung, Anpassungen, Tipps und Beispiele
Lernen Sie 7 Website-Menü-Designs kennen, erfahren Sie, wie Sie sie anpassen können, und finden Sie heraus, wie Sie sie verwenden können.
Dieser Leitfaden konzentriert sich auf die Gestaltung des Menüs - 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:
Das Navigationsmenü ist eine Liste von Links, die zu verschiedenen Seiten Ihrer Website oder bestimmten Abschnitten innerhalb einer bestimmten Webseite führen. Es hilft den Website-Besuchern, zwischen den Seiten der Website oder verschiedenen Abschnitten einer bestimmten Seite zu navigieren.
Allgemeine Tipps
>
Das Menü sollte den Besuchern der Website helfen, Informationen schnell und einfach zu finden
>
Das Menü sollte übersichtlich sein
>
Beschränken Sie die Anzahl der Menüpunkte auf ein Minimum
>
Fügen Sie nicht mehr als fünf Menüpunkte zu einer Navigationsleiste hinzu
>
Menüpunkte sollten nicht länger als ein Wort sein
>
Am besten ist es, wenn dieses Wort kurz ist
>
Gestalten Sie die Menü-Navigationsleiste nicht übermäßig, da sie den Benutzer nicht vom Inhalt Ihrer Website ablenken sollte.
Beispiele für gute Menüdesigns
OPTIONEN FÜR DIE MENÜGESTALTUNG
Transparentes statisches Menü über der Abdeckung
So sieht es aus:
Ein solches Menü ist am oberen Rand der Seite angeheftet, um die Besucher der Website nicht vom Inhalt abzulenken, und sie können es bei Bedarf leicht finden, da es an einer bestimmten Stelle auf der Seite angebracht ist.
Ein solches Menü ist am oberen Rand der Seite angeheftet, um die Besucher der Website 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 → Verhalten der Menüposition: Absolut.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Fügen Sie der Seite einen ME301-Block hinzu und wenden Sie die folgenden Einstellungen an:
Haupteinstellungen → Verhalten der Menüposition: Absolut.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Klicken Sie hier, um ein Beispiel für ein transparentes statisches Menü auf der Website zu sehen
OPTIONEN FÜR DIE MENÜGESTALTUNG
Festes Menü
Wie es aussieht:
Ein solches Menü ist immer auf der Seite sichtbar und kann leicht von jeder Stelle der Seite aus aufgerufen werden. Es hat in der Regel einen transparenten Hintergrund am oberen Rand der Seite (auf der Titelseite), der beim Blättern undurchsichtig wird.
Ein solches Menü ist immer auf der Seite sichtbar und kann leicht von jeder Stelle der Seite aus aufgerufen werden. Es hat in der Regel einen transparenten Hintergrund am oberen Rand der Seite (auf der Titelseite), der beim Blättern undurchsichtig wird.
So richten Sie es ein:
Fügen Sie der Seite einen ME301-Block hinzu und wenden Sie die folgenden Einstellungen an:
Haupteinstellungen → Verhalten der Menüposition: Beim Scrollen fixiert.
Menühintergrund → Farbe des Menühintergrunds. Wählen Sieeine Farbe.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Menühintergrund → Deckkraft des Menühintergrunds beim Scrollen: 80%.
Fügen Sie der Seite einen ME301-Block hinzu und wenden Sie die folgenden Einstellungen an:
Haupteinstellungen → Verhalten der Menüposition: Beim Scrollen fixiert.
Menühintergrund → Farbe des Menühintergrunds. Wählen Sieeine Farbe.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Menühintergrund → Deckkraft des Menühintergrunds beim Scrollen: 80%.
Klicken Sie hier, um ein Beispiel für ein festes Menü auf der Website zu sehen
OPTIONEN FÜR DIE MENÜGESTALTUNG
Menü oben auf der Seite fixiert,
Menü, das beim Scrollen erscheint
Menü, das beim Scrollen erscheint
Wie es aussieht:
Dieses Menü ist ähnlich wie das oben beschriebene. Der Unterschied ist ein weiteres Menü, das beim Scrollen erscheint und noch mehr Elemente enthält. Das obere Navigationsmenü enthält zum Beispiel ein Logo, einige Menüpunkte, die zu verschiedenen Seiten der Website führen, und einige Links zu sozialen Medien. Wenn der Benutzer die Seite scrollt, erscheint eine weitere Menüleiste mit einem Logo, einem Aufruf zum Handeln und einer Rückrufschaltfläche.
Dieses Menü ist ähnlich wie das oben beschriebene. Der Unterschied ist ein weiteres Menü, das beim Scrollen erscheint und noch mehr Elemente enthält. Das obere Navigationsmenü enthält zum Beispiel ein Logo, einige Menüpunkte, die zu verschiedenen Seiten der Website führen, und einige Links zu sozialen Medien. Wenn der Benutzer die Seite scrollt, erscheint eine weitere Menüleiste mit einem Logo, einem Aufruf zum Handeln und einer Rückrufschaltfläche.
Wie man es einrichtet:
Fügen Sie der Seite einen ME301-Block hinzu und wenden Sie die folgenden Einstellungen an:
Menü Eins (erscheint oben auf der Seite)
Haupteinstellungen → Verhalten der Menüposition: Absolut.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Menü Zwei (erscheint beim Scrollen)
Haupteinstellungen → Verhalten der Menüposition: Fixiert beim Scrollen.
Haupteinstellungen → Menü einblenden, wenn die Seite nach unten gescrollt wird in Pixel: 600px.
Menühintergrund → Hintergrundfarbe des Menüs. Wählen Sie eine Farbe.
Menühintergrund → Deckkraft des Menühintergrunds: 70%.
Fügen Sie der Seite einen ME301-Block hinzu und wenden Sie die folgenden Einstellungen an:
Menü Eins (erscheint oben auf der Seite)
Haupteinstellungen → Verhalten der Menüposition: Absolut.
Menühintergrund → Deckkraft des Menühintergrunds: 0%.
Menü Zwei (erscheint beim Scrollen)
Haupteinstellungen → Verhalten der Menüposition: Fixiert beim Scrollen.
Haupteinstellungen → Menü einblenden, wenn die Seite nach unten gescrollt wird in Pixel: 600px.
Menühintergrund → Hintergrundfarbe des Menüs. Wählen Sie eine Farbe.
Menühintergrund → Deckkraft des Menühintergrunds: 70%.
Klicken Sie hier, um die Beispiele für diese Menüs auf einer Website zu sehen
OPTIONEN FÜR DIE MENÜGESTALTUNG
Hamburger Menü
So sieht es aus:
Das Hamburger-Menü besteht aus drei horizontalen Linien am oberen Rand des Bildschirms. Wenn der Nutzer darauf klickt, öffnet sich ein Navigationsmenü.
Wofür Sie es verwenden können:
Ein solches Menü ist perfekt für Ihre Website, wenn Sie möchten, dass sich die Besucher auf den Inhalt konzentrieren, ohne durch andere Designelemente abgelenkt zu werden. Das Hamburger-Menü wird normalerweise in einer mobilen Version der Website verwendet. Sie können einstellen, wie das Menü auf verschiedenen Geräten angezeigt wird.
Sie können zum Beispiel ein normales Menü wählen, das nur auf der Desktop-Version Ihrer Website angezeigt wird, und das Hamburger-Menü nur auf mobilen Geräten sichtbar machen.
Das Hamburger-Menü besteht aus drei horizontalen Linien am oberen Rand des Bildschirms. Wenn der Nutzer darauf klickt, öffnet sich ein Navigationsmenü.
Wofür Sie es verwenden können:
Ein solches Menü ist perfekt für Ihre Website, wenn Sie möchten, dass sich die Besucher auf den Inhalt konzentrieren, ohne durch andere Designelemente abgelenkt zu werden. Das Hamburger-Menü wird normalerweise in einer mobilen Version der Website verwendet. Sie können einstellen, wie das Menü auf verschiedenen Geräten angezeigt wird.
Sie können zum Beispiel ein normales Menü wählen, das nur auf der Desktop-Version Ihrer Website angezeigt wird, und das Hamburger-Menü nur auf mobilen Geräten sichtbar machen.
Wie man es einrichtet:
Fügen Sie der Seite einen ME401/402/403/404/405-Block hinzu und legen Sie das Verhalten der Menüposition, die Farbe des Menüsymbols und die Textfarbe des Menüeintrags fest.
Sie können zum Beispiel die folgenden Einstellungen vornehmen:
Haupteinstellungen → Verhalten der Menüposition: Beim Blättern fixiert.
Menüpunkt → Farbe. Wählen Sie Schwarz.
Menühintergrund → Hintergrundfarbe des eingeklappten Menüs. Machen Sie es transparent.
Menühintergrund → Hintergrundfarbe des erweiterten Menüs . Wählen Sie weiß.
Fügen Sie der Seite einen ME401/402/403/404/405-Block hinzu und legen Sie das Verhalten der Menüposition, die Farbe des Menüsymbols und die Textfarbe des Menüeintrags fest.
Sie können zum Beispiel die folgenden Einstellungen vornehmen:
Haupteinstellungen → Verhalten der Menüposition: Beim Blättern fixiert.
Menüpunkt → Farbe. Wählen Sie Schwarz.
Menühintergrund → Hintergrundfarbe des eingeklappten Menüs. Machen Sie es transparent.
Menühintergrund → Hintergrundfarbe des erweiterten Menüs . Wählen Sie weiß.
Klicken Sie hier, um ein Beispiel für ein Hamburger-Menü auf der Website zu sehen
OPTIONEN FÜR DIE MENÜGESTALTUNG
Mehrstufiges Menü
Wie es aussieht:
Ein Dropdown-Menü erscheint, wenn Sie auf einen Menüpunkt klicken.
Wofür Sie es verwenden können:
Große Websites mit einer fortgeschrittenen Struktur.
Ein Dropdown-Menü erscheint, wenn Sie auf einen Menüpunkt klicken.
Wofür Sie es verwenden können:
Große Websites mit einer fortgeschrittenen Struktur.
Wie man es einrichtet:
Fügen Sie den Block ME301 zur Seite hinzu, richten Sie ein Menü ähnlich dem oben beschriebenen ein und fügen Sie dann Unterpunkte im Inhaltsbereich des Blocks hinzu.
1.Öffnen Sie das Inhaltsbedienfeld des Blocks → Menüelemente → Unterelemente hinzufügen.
2. Klicken Sie auf das Plus-Symbol neben einem Element, geben Sie einen Titel für den Unterpunkt ein, und weisen Sie einen Link zu. Wiederholen Sie den Vorgang, bis alle erforderlichen Unterpunkte hinzugefügt sind.
3. Öffnen Sie das Bedienfeld 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 ihn anklickbar machen möchten, erstellen Sie einen doppelten Unterpunkt im Dropdown-Menü.
Fügen Sie den Block ME301 zur Seite hinzu, richten Sie ein Menü ähnlich dem oben beschriebenen ein und fügen Sie dann Unterpunkte im Inhaltsbereich des Blocks hinzu.
1.Öffnen Sie das Inhaltsbedienfeld des Blocks → Menüelemente → Unterelemente hinzufügen.
2. Klicken Sie auf das Plus-Symbol neben einem Element, geben Sie einen Titel für den Unterpunkt ein, und weisen Sie einen Link zu. Wiederholen Sie den Vorgang, bis alle erforderlichen Unterpunkte hinzugefügt sind.
3. Öffnen Sie das Bedienfeld 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 ihn anklickbar machen möchten, erstellen Sie einen doppelten Unterpunkt im Dropdown-Menü.
Klicken Sie hier, um ein Beispiel für ein mehrstufiges Menü auf der Website zu sehen
OPTIONEN FÜR DIE MENÜGESTALTUNG
Registerkarten
Wie sie aussieht:
Eine aktive Registerkarte ermöglicht es den Nutzern, den mit ihr verknüpften Inhalt zu durchsuchen, ohne die Webseite zu verlassen.
Wofür Sie sie verwenden können:
Mit Registerkarten können Sie mehrere Kategorien derselben Art von Inhalt anzeigen, z. B. verschiedene Kategorien von Werken innerhalb eines Portfolios.
Eine aktive Registerkarte ermöglicht es den Nutzern, den mit ihr verknüpften Inhalt zu durchsuchen, ohne die Webseite zu verlassen.
Wofür Sie sie verwenden können:
Mit Registerkarten können Sie mehrere Kategorien derselben Art von Inhalt anzeigen, z. B. verschiedene Kategorien von Werken innerhalb eines Portfolios.
Wie man es einrichtet:
Fügen Sie einen ME602- oder ME603-Block zu der Seite hinzu. Sie können diese Blöcke verwenden, um Registerkarten zu erstellen und Inhalte anzuzeigen, wenn der Benutzer auf eine Registerkarte innerhalb derselben Seite klickt. Im Folgenden müssen Sie Blöcke in einer Reihenfolge hinzufügen, die sich ändert, wenn der Benutzer auf eine bestimmte Registerkarte klickt.
So funktioniert es:
1. Fügen Sie Registerkarten-Titel in das Inhalts-Panel des ME602- oder ME603-Blocks ein.
2. Fügen Sie die IDs der Blöcke hinzu, die sichtbar sein sollen, wenn Sie auf die Registerkarte klicken (trennen Sie sie mit einem Komma, ohne Leerzeichen).
Hinweis: Sie können die ID des Blocks in das Einstellungs-Panel des Blocks kopieren - scrollen Sie zum unteren Ende des Panels, um sie zu finden.
Fügen Sie einen ME602- oder ME603-Block zu der Seite hinzu. Sie können diese Blöcke verwenden, um Registerkarten zu erstellen und Inhalte anzuzeigen, wenn der Benutzer auf eine Registerkarte innerhalb derselben Seite klickt. Im Folgenden müssen Sie Blöcke in einer Reihenfolge hinzufügen, die sich ändert, wenn der Benutzer auf eine bestimmte Registerkarte klickt.
So funktioniert es:
1. Fügen Sie Registerkarten-Titel in das Inhalts-Panel des ME602- oder ME603-Blocks ein.
2. Fügen Sie die IDs der Blöcke hinzu, die sichtbar sein sollen, wenn Sie auf die Registerkarte klicken (trennen Sie sie mit einem Komma, ohne Leerzeichen).
Hinweis: Sie können die ID des Blocks in das Einstellungs-Panel des Blocks kopieren - scrollen Sie zum unteren Ende des Panels, um sie zu finden.
Klicken Sie hier, um ein Beispiel für dieses Menü auf der Website zu sehen
OPTIONEN FÜR DIE MENÜGESTALTUNG
Menü mit Warenkorb, Suche und Favoriten
Wie es aussieht:
Es zeigt Artikel im Einkaufswagen, zu den Favoriten hinzugefügte Artikel und ein Such-Widget im Menü neben dem Navigationsbereich an.
Wofür Sie es verwenden können:
Das Menü ist hilfreich für den Produktkatalog Benutzer, um den Warenkorb, das Such-Widget und die Favoriten übersichtlich darzustellen.
Es zeigt Artikel im Einkaufswagen, zu den Favoriten hinzugefügte Artikel und ein Such-Widget im Menü neben dem Navigationsbereich an.
Wofür Sie es verwenden können:
Das Menü ist hilfreich für den Produktkatalog Benutzer, um den Warenkorb, das Such-Widget und die Favoriten übersichtlich darzustellen.
So richten Sie es ein:
Fügen Sie den ME401-Block zur Seite hinzu → Registerkarte "Inhalt" → Warenkorb, Suche und Favoriten → aktivieren Sie die Kontrollkästchen, um die benötigten Symbole im Menü anzuzeigen.
Aktivieren Sie das Kontrollkästchen "Keine nativen Widget-Schaltflächen anzeigen", um die Symbole nur im Menü anzuzeigen.
Fügen Sie den ME401-Block zur Seite hinzu → Registerkarte "Inhalt" → Warenkorb, Suche und Favoriten → aktivieren Sie die Kontrollkästchen, um die benötigten Symbole im Menü anzuzeigen.
Aktivieren Sie das Kontrollkästchen "Keine nativen Widget-Schaltflächen 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.
Fertig.
Diese Funktion funktioniert für alle Menüblöcke mit der Nummer ME4XX.
Diese Funktion funktioniert für alle Menüblöcke mit der Nummer ME4XX.
Klicken Sie hier, um ein Beispiel für dieses Menü auf der Website zu sehen
Anzeigeoptionen:
Wenn Sie sowohl Symbole als auch die Favoriten-Widget-Schaltfläche im Menü anzeigen möchten, deaktivieren Sie die Option "Keine nativen Widget-Schaltflächen anzeigen" auf der Registerkarte "Inhalt" des ME401-Blocks.
Wenn Sie sowohl Symbole als auch die Favoriten-Widget-Schaltfläche im Menü anzeigen möchten, deaktivieren Sie die Option "Keine nativen Widget-Schaltflächen anzeigen" auf der Registerkarte "Inhalt" des ME401-Blocks.
Sie können das Widget-Symbol für die Blöcke ST100 Einkaufswagen und T985 Suche ausblenden. Aktivieren Sie auf der Registerkarte "Weitere Einstellungen" in den Blockeinstellungen das Kontrollkästchen "Widget-Schaltfläche nicht anzeigen". Veröffentlichen Sie die Seite.
Erledigt! Drei Symbole werden im Menü angezeigt und es gibt ein separates Widget für Favoriten. Sie können die Sichtbarkeit für den Warenkorb oder das Such-Widget auf ähnliche Weise konfigurieren.
Klicken Sie hier, um ein Beispiel für dieses Menü auf der Website zu sehen
Hier sind einige wichtige Optionen für die Menügestaltung. Wenn Sie neue Ideen haben und diese mit uns teilen möchten, senden Sie bitte den Link zu Ihrer Website an team@tilda.cc mit dem Betreff "Menügestaltung". Vielen Dank!
Wir wünschen Ihnen viel Erfolg bei Ihren Gestaltungsversuchen!
Wir wünschen Ihnen viel Erfolg bei Ihren Gestaltungsversuchen!
Die Website, von der Sie schon immer geträumt haben, beginnt genau hier
