Wie man ein Website-Menü gestaltet

Optionen für die Menügestaltung, Anpassungen, Tipps und Beispiele
Explore 10 website menu designs, learn how to customize them, and find out how you can use them.
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:
The navigation menu is a list of links that lead to various pages of your website or specific sections within a particular web page. Each link is a menu item. The menu is used for helping website visitors to navigate between the website pages or different sections of a specific page.
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.
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%.
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.
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%.
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
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.
How to set it up:
Add two ME301 blocks to the page and apply the following settings:

Menu One (located on top of the page)
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.

Menu Two (appearing on scroll)
Main settings → Menu position behavior: Fixed on scroll.
Main settings → Reveal menu after scrolling N pixels
Reveal menu when the page is scrolled down in pixels: 600px.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 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.
How to set it up:
Add a ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, the menu background color, and the menu items background color.

For example, you may apply the following settings:
Main settings → Menu position behavior: Fixed on scroll.
Menu icon → Color. Pick black.
Menu background → Collapsed menu background color. Make it transparent.
Menu background → Expanded menu background color. Pick white.
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.
How to set it up:

Add submenu items for the main block or use a combination of ME301 menu (or any other block with menu items) and ME601.

Main block submenu items

Add any menu block that contains menu items to the page.

Go to the Content tab of the block → List of menu items → Add subitems, and you will see the plus icons that will appear near the menu items.

Click the plus icon near an item that you need to add a subitem for, enter a subitem title, and assign a link.

Click the plus icon again to add a new subitem.

Menu subitems will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

Important: the main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

ME 601 block

Add the ME301 block to the page, configure the menu as described above, and add the ME601 block (Menu: second level).

The ME601 block allows you to add subitems to the main menu items. They will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

How it works:
1) In the ME601 block, write a link that looks like #submenu:more
2) In the main menu: In the Link field, near the item you want to create subitems for, write #submenu:more.

Important: main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

Please note: you can use any word for "#submenu:more", such as: #submenu:portfolio или #submenu:aboutus
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.
How to set it up:
Add a ME602 or ME603 block to the page. You can use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, you need to add blocks in a sequence that will change when the user clicks a particular tab.

How it works:
1. Add tab titles in the Content panel of the ME602 or ME603 block.
2. Add the blocks' IDs that should be visible when you click the tab (separate them with a comma, no space).

Note: You can copy the block's ID in the Settings panel of the block — scroll down to the bottom of the panel to find it.
Klicken Sie hier, um ein Beispiel für dieses Menü auf der Website zu sehen
Optionen für die Menügestaltung
Menu with dot navigation
What it looks like:
By clicking the dot in the menu, you jump to a specific block on the page

What you can use it for:
For redirecting users to a specific section on the page with large amount of content
How to set it up:

Add the ME604 block from the Menu category to the page. By using this block, you can create the opportunity for navigating vertically between sections within the page.

Please note: this block is intended just for large screens (from 960 px).

How it works:

1) Add a block with an anchor link (in the Other category) in front of each section. It is convenient to name them according to what they include, for example: about, team, gallery
2) In the list of menu items, enter names and anchor links with the # symbol for each of the sections. Example of an anchor link: #about
Click here to view an example of this menu on the website
menu design options
Breadcrumbs
What it looks like:

By clicking on a menu item, you are redirected to a specific section or an internal page.

What you can use it for:

By using the breadcrumbs menu, you can show the path from the home page to the one you are viewing.
How to set it up:

Add the ME605 block from the Menu category to the page. In the Content tab of the block, in the fields Text 1, Text 2, Text 3, specify the navigation path for website pages, starting from the home page and following to the page that the user is viewing. Below, in the Link 1, Link 2, Link 3 fields, specify the link to the page for the menu item.

How it works:
1) Specify the page address in the Page Settings > General
2) Specify the link to a separate page for the menu item in the Link field
menu design options
Fixed sidebar menu with subsections
What it looks like:
Dropdown sidebar menu that contains sections and subsections. The menu has a fixed position that allows you to address it from any place on the page.

What you can use it for:
It allows you to create detailed navigation for website internal sections and subsections, as well as add search for pages.
How to set it up:

Add the ME901 block to the page, configure the styles of how the menu should be displayed by using the block settings.

The ME901 block allows you to add subsections to the main menu items. You need to specify the links to subsections in the Content tab of block > List of menu items.

As a link, you need to specify either the full address of the page including http:// or relative address — just the name of the page (such as /page7890.html или /about).


To create the navigation within the page, you can use anchor links (such as #contacts). To add an anchor to the page, use the Anchor link block from the Other category.

The menu stays open if the screen width is more than 1500 px.
Click here to view an example of this menu on the website
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.
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 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.
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.
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
menu design options
Create your own menu in Zero Block
You can create your own menu in Zero Block by configuring the elements as you like it and and then fixing the block.

To fix it, go to editing the Zero Block Settings → Position and Overflow→ select the Fixed value to fix the block.
You can fix the block at the top or at the bottom of the page, as well as configure it so that it appears in X px (Appear Offset). In this case, you can select an option for animation appearance — Fade in. This can be useful, for example, if you want that the website header appears in a few scrolls and not at once.
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!
Die Website, von der Sie schon immer geträumt haben, beginnt genau hier
Hergestellt am
Tilda