• Startseite
• Inhalt
• Index
• Quellen

Navigations-Menü

Navigations-Menü gibt Ihnen die Möglichkeit, ein Dropdown-Menü mit Links auf Ihrer Website zu erstellen. Es sieht wie folgt aus:

Ein Menü erstellen

Über den Eintrag 'Navigationsmenü' des Toolset oder den Menübefehl 'Einfügen -> Navigationsmenü' können Sie das Menü auf der Website platzieren. Sobald Sie Ihr Menü platziert haben, können Sie auf den Text 'Text hier bearbeiten' klicken und neue Menüeinträge direkt im Editor eingeben. Es ist möglich, für jeden Menüeintrag eine eigene Schriftart, Farbe und Schriftgröße zu wählen. Wenn Sie die Schriftart für mehrere Menüeinträge auf einmal ändern möchten, markieren Sie einfach einen Menüeintrag, halten Sie die Umschalttaste auf Ihrer Tastatur gedrückt und klicken Sie auf andere Menüeinträge, um diese ebenfalls auszuwählen. Anschließend können Sie wie gewohnt eine neue Schriftart wählen.

Besondere Einträge

Das Menü unterstützt horizontale Linien als Menüeinträge. Setzen Sie einfach den Text eines Untermenüs auf "-" (=ein Minuszeichen), und wenn Sie auf "Vorschau" klicken, um Ihre Website im Browser zu betrachten, wird dieser Menüeintrag als horizontale Linie angezeigt.

Eigenschaften

Diese Komponente unterstützt mehrere Hintergrundmodi (Farbe, Bild, Farbverlauf), die durch Auswahl der Eigenschaft 'BackgroundMode' geändert werden können. Sie unterstützt auch verschiedene Randmodi. Der Hintergrund wird nur sichtbar, wenn die Bilddateien nicht geladen werden können oder das aktuell angezeigte Bild transparent ist. Wenn Sie noch andere Hintergründe wünschen, setzen Sie einfach den Hintergrund und den Rahmen auf trnasparent und unsichtbar und platzieren Sie ein beliebiges anderes Element hinter der Menüleiste.

Andere unterstützte Eigenschaften sind:

Auffüllen: Abstand in Pixeln zwischen den Menüeinträgen

UnterMenüAbstand: Vertikaler Abstand in Pixeln zwischen den Untermenüeinträgen

Pane Background color: Farbe für den Hintergrund des Dropdown-Menüfensters.

Pane Border color: Farbe für den Rand des Dropdown-Menüfensters.

CSS-Schatten verwenden: Zeichnet einen Schatten um das Dropdown-Menüfeld. Dies sieht sehr schön aus, ist aber nur in neueren Browsern sichtbar, die diese Funktion unterstützen.

Hover-Stile verwenden: Wenn dieses Kontrollkästchen aktiviert ist, zeigen die Hauptmenüeinträge in der horizontalen Leiste Hover-Farben an, wenn die Maus über sie bewegt wird.

Hover-Hintergrundfarbe: Hintergrundfarbe eines Hauptmenüeintrags, wenn sich die Maus über ihm befindet.

Hover-Textfarbe: Textfarbe eines Hauptmenüeintrags, wenn sich die Maus über ihm befindet.

Hover Pane Background Color: Hintergrundfarbe eines Untermenüeintrags, wenn sich der Mauszeiger über ihm befindet.

Hover Pane Text Color: Textfarbe eines Untermenüeintrags, wenn sich die Maus über ihm befindet.

Mobiles Menü: Siehe den folgenden Abschnitt

Mobiles Menü

Zu jedem Navigationsmenü gehört ein zweites Menü, das auf kleineren Bildschirmen angezeigt wird, wenn die Eigenschaft "MobileMenu" auf 'Automatisch generiert' oder 'Manuell ausgefüllt' eingestellt ist. Sie können dieses mobile Menü in Rocketcake sehen, wenn Sie den Ansichtsschieber am unteren Rand der Seite auf einen kleinen Bereich ziehen oder wenn Sie ein mobiles Gerät in der unteren Combobox auswählen, wie zum Beispiel "iPhone 7". Standardmäßig wird dieses Menü aus Ihrem "Desktop"-Menü generiert, aber wenn Sie den Modus "Manuell ausgefüllt" wählen, können Sie dieses mobile Menü genauso bearbeiten wie das normale Menü.

Der Vorteil dieses zweiten Menüs ist, dass Sie die Menüpunkte in diesem Menü kompakter anordnen können, so dass auch auf mobilen Geräten alles auf den Bildschirm passt.

Schatten für das Menü

Sie können das Dropdown-Menü mit einem Schatten versehen. Öffnen Sie dazu einfach das Menü, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Box Shadow". Dort können Sie den Schatten für das Dropdown-Menü aktivieren und bearbeiten.

Runde Ränder für Navigationsfelder

Es ist möglich, runde Navigationsmenüfelder zu erstellen. Setzen Sie dazu einfach die "Kanten" Ihres Navigationsmenüs auf "rund", und aktivieren Sie die Option "RoundEdgesAlsoForPanes". Dann sind Ihre Navigationsmenüs ebenfalls rund.

Wenn Sie nicht möchten, dass die obere Menüleiste ebenfalls runde Kanten hat, machen Sie einfach ihren Hintergrund transparent und platzieren Sie sie in einem Container, auf den Sie dann den gewünschten Hintergrund für Ihr oberes Menü anwenden.

Zentrierung des Menüs

Das Menü selbst ist immer rechtsbündig. Aber in manchen Fällen möchten Sie es vielleicht zentriert haben.

Dazu können Sie es einfach in einen Container setzen und dort zentrieren:

Verkleinern Sie es dann etwas und machen Sie den Hintergrund und den Rahmen unsichtbar:

Zum Schluss verkleinern Sie einfach den umgebenden Container (stellen Sie auch sicher, dass das Padding auf (0,0,0,0) gesetzt ist) und setzen Sie den Hintergrund auf den gewünschten Stil.

Erledigt: Sie haben jetzt ein zentriertes Menü.