Wie man ein Website-Menü gestaltet

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:

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%.

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%.

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%.

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.

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

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.

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

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.

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.

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.

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!