Ist der verfügbare Platz nicht ausreichend, um alle Einträge anzuzeigen, wird das Menü automatisch durch einen Hamburger-Button ersetzt. Das Gleiche gilt, wenn die Website responsiv gestaltet wird (in Auflösungen und responsives Design).
|
Wurde das Objekt Menü im Editor des Templates eingefügt, ist der verfügbare Platz von der Größe des Objekts abhängig. Wurde das Objekt Menü hingegen in eine Seite eingefügt, wird seine Größe von jener der Zelle des Layout-Schemas bestimmt, in die es eingefügt wurde. |
Für das Menü kann, unabhängig vom verfügbaren Platz, immer der Hamburger-Button verwendet werden. Aktivieren Sie hierzu im Bereich Haupteffekt die Option Anzeigen.
Der Hamburger-Button hat eine quadratische Form und seine Höhe sowie sein Stil können mit den Optionen im Bereich Haupteffekt festgelegt werden.
Beim Anklicken des Hamburger-Buttons wird das Hamburger-Menü eingeblendet, ein Drop-Down-Menü mit den Einträgen der ersten Ebene.
Um den Stil des Hamburger-Menüs zu definieren, können zunächst die Optionen des Bereichs Anzeige verwendet werden:
| ▪ | Öffnen: Legt fest, ob sich das Menü beim Anklicken desHamburger-Buttons nach rechts oder links öffnen soll. |
| ▪ | Effekt: Definiert den Effekt, mit dem das Hamburger-Menü angezeigt werden soll. |
| ▪ | Länge: Legt die Geschwindigkeit fest, mit der sich das Menü bei Klick auf den Hamburger-Button öffnet. |
Da das Hamburger-Menü die Seite überlagert, können einige Optionen für den Overlay-Stil der Inhalte gewählt werden:
| ▪ | Hintergrundfarbe: Hintergrundfarbe außerhalb des Hamburger-Menüs, also die halbtransparente Farbe (je nach Einstellung unter Deckkraft) zur Erstellung eines Filters, der den darunterliegenden Seitenbereich verdunkelt. |
| ▪ | Deckkraft: Deckungskraft der Hintergrundfarbe des Hamburger-Menüs. Je kleiner der eingestellte Wert ist, desto geringer wird die Deckkraft des Filters, das heißt, der Seitenhintergrund wird stärker durchscheinen. |
Optionen für den Button-Stil:
| ▪ | Breite: Legen Sie hier die Breite der Menü-Buttons in Pixeln fest. |
| ▪ | Rand: Definiert den horizontalen und vertikalen Rand in Pixeln, also den Freiraum zwischen dem Rahmen der Schaltfläche und deren Aufschrift. |
| ▪ | Abstand: Außenrand, also der Abstand zwischen den Buttons in Pixeln. |
|
Die Breite der Buttons muss auch unter Berücksichtigung des Platzes festgelegt werden, der für das Menü insgesamt verfügbar ist. Dieser Parameter kann frei geändert werden, sofern kein fertiges Template verwendet wird (siehe Struktur der Vorlage). |
Optionen im Bereich Button-Text:
| ▪ | Schriftart: Definiert die Schriftart, den Schriftschnitt und die Größe des Textes. |
| ▪ | Ausrichtung: Wählen Sie hier, ob die Button-Beschriftung Links, Zentriert oder Rechts ausgerichtet werden soll. |
Die einzelnen Elemente des Hamburger-Menüs können gestaltet werden. Markieren Sie zunächst das Menüelement, das Sie bearbeiten möchten: Hintergrund, Menüelement, Element bei Mauskontakt, Menütrennlinie und Trennlinie.
Je nach gewähltem Element stehen im Bereich Stil folgende Optionen zur Verfügung:
| ▪ | Hintergrundfarbe / Textfarbe: Farben des Hintergrunds, des Textes der Optionen je nach Status, die Menütrennlinie und das Elements Trennlinie. |
| ▪ | Rahmen: Definition, auch einzeln, der Farbe, der Breite und des Schattens für die Ränder des Hintergrunds. |
| ▪ | Button-Text: Wendet auf das Element bei Mauskontakt oder die Menütrennlinie den Textstil Normal, Fett, Kursiv oder Unterstrichen an. Dieser Stil wird den Einstellungen unter Button-Text hinzugefügt. |
| ▪ | Breite: nur verfügbar für das Element Trennlinie, definiert die Breite prozentual im Verhältnis zur Breite des Hamburger-Menüs. |
