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.

So richten Sie es ein:
Fügen Sie der Seite zwei ME301-Blöcke 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.
Main settings → Reveal menu after scrolling N pixels
Reveal menu when the page is scrolled down in pixels: 600px.
Menühintergrund → Menühintergrundfarbe. Wählen Sie eine Farbe.
Menühintergrund → Deckkraft des Menühintergrunds: 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.

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, die Hintergrundfarbe des Menüs und die Hintergrundfarbe der Menüelemente fest.

Sie können zum Beispiel die folgenden Einstellungen vornehmen:
Haupteinstellungen → Verhalten der Menüposition: Beim Blättern fixiert.
Menüsymbol → Farbe. Wählen Sie Schwarz.
Menühintergrund → Hintergrundfarbe des eingeklappten Menüs. Machen Sie es transparent.
Menühintergrund → Hintergrundfarbe des ausgeklappten Menüs . Wählen Sie weiß.

Wie man es einrichtet:

Fügen Sie Untermenüpunkte für den Hauptblock hinzu oder verwenden Sie eine Kombination aus ME301-Menü (oder einem anderen Block mit Menüpunkten) und ME601.

Untermenüpunkte des Hauptblocks

Fügen Sie der Seite einen beliebigen Menüblock hinzu, der Menüpunkte enthält.

Gehen Sie zur Registerkarte Inhalt des Blocks → Liste der Menüpunkte → Unterpunkte hinzufügen, und Sie sehen die Plus-Symbole, die neben den Menüpunkten erscheinen.

Klicken Sie auf das Plus-Symbol neben einem Punkt, für den Sie einen Unterpunkt hinzufügen möchten, geben Sie einen Titel für den Unterpunkt ein und weisen Sie einen Link zu.

Klicken Sie erneut auf das Plus-Symbol, um einen neuen Unterpunkt hinzuzufügen.

Die Unterpunkte des Menüs werden beim Hovern als Dropdown-Menü angezeigt. In mobilen Versionen können Sie das Menü mit einem Fingertipp öffnen.

Wichtig: Der Hauptmenüpunkt selbst ist nicht anklickbar. Wenn Sie ihn anklickbar machen möchten, erstellen Sie einen doppelten Unterpunkt im Dropdown-Menü.

ME 601-Block

Fügen Sie den ME301-Block zur Seite hinzu, konfigurieren Sie das Menü wie oben beschrieben und fügen Sie den ME601-Block (Menü: zweite Ebene) hinzu.

Der ME601-Block ermöglicht es Ihnen, Unterpunkte zu den Hauptmenüpunkten hinzuzufügen. Diese werden beim Hovern als Dropdown-Menü angezeigt. In mobilen Versionen können Sie das Menü mit einem Fingertipp öffnen.

So funktioniert es:
1) Schreiben Sie im ME601-Block einen Link, der wie #submenu:more aussieht
2) Im Hauptmenü: Schreiben Sie in das Link-Feld in der Nähe des Eintrags, für den Sie Untereinträge erstellen möchten, #submenu:more.

Wichtig: Der Hauptmenüeintrag selbst ist nicht anklickbar. Wenn Sie ihn anklickbar machen wollen, erstellen Sie einen doppelten Unterpunkt im Dropdown-Menü.

Bitte beachten Sie: Sie können ein beliebiges Wort für "#submenu:more" verwenden, z.B.: #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.

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 nach unten, um sie zu finden.

Wie es aussieht:
Wenn Sie auf den Punkt im Menü klicken, springen Sie zu einem bestimmten Block auf der Seite

Wofür Sie es verwenden können:
Um die Benutzer zu einem bestimmten Abschnitt auf der Seite mit einer großen Menge an Inhalt umzuleiten

Wie es aussieht:
Dropdown-Seitenleistenmenü, das Abschnitte und Unterabschnitte enthält. Das Menü hat eine feste Position, die es Ihnen ermöglicht, es von jeder Stelle der Seite aus anzusprechen.

Wofür Sie es verwenden können:
Es ermöglicht Ihnen, eine detaillierte Navigation für interne Abschnitte und Unterabschnitte der Website zu erstellen sowie eine Suche für Seiten hinzuzufügen.

Wie man es einrichtet:

Fügen Sie den ME901-Block zur Seite hinzu und konfigurieren Sie die Stile, wie das Menü angezeigt werden soll, mithilfe der Blockeinstellungen.

Der ME901-Block ermöglicht es Ihnen, Unterabschnitte zu den Hauptmenüpunkten hinzuzufügen. Sie müssen die Links zu den Unterabschnitten auf der Registerkarte Inhalt des Blocks > Liste der Menüpunkte angeben.

Als Link müssen Sie entweder die vollständige Adresse der Seite einschließlich http:// oder eine relative Adresse - nur den Namen der Seite (wie /page7890.html или /about) angeben.

Um die Navigation innerhalb der Seite zu erstellen, können Sie Ankerlinks verwenden (z. B. #contacts). Um der Seite einen Anker hinzuzufügen, verwenden Sie den Ankerlink-Block aus der Kategorie Sonstiges.

Das Menü bleibt geöffnet, wenn die Bildschirmbreite mehr als 1500 px beträgt.

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.

Sie können Ihr eigenes Menü in Zero Block erstellen, indem Sie die Elemente nach Ihren Wünschen konfigurieren und dann den Block fixieren.

Um ihn zu fixieren, gehen Sie zur Bearbeitung der Zero Block → Position und Überlauf→ wählen Sie den Wert Fixiert, um den Block zu fixieren.

Sie können den Block am oberen oder unteren Rand der Seite fixieren und ihn so konfigurieren, dass er in X px erscheint (Appear Offset). In diesem Fall können Sie eine Option für das Aussehen der Animation wählen - Einblenden. Dies kann zum Beispiel nützlich sein, wenn Sie möchten, dass die Kopfzeile der Website nicht auf einmal, sondern in mehreren Bildläufen erscheint.

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!