Ein Menü ist im Grunde eine Navigationshilfe, die es Benutzern ermöglicht, Informationen auf Ihrer Website zu finden. Menüs haben sich im Laufe der Zeit weiterentwickelt und werden heute unter Berücksichtigung von Marketingelementen erstellt. In einigen Bereichen der Branche werden sie heute als „Besucherstrecke“ bezeichnet – sorgfältig gestaltet, um Benutzer auf einem bestimmten Weg durch eine Website zu einem Element zu führen. Aber unabhängig von ihrer Konstruktion und ihrem Zweck sind sie im Grunde alle gleich – eine Reihe leicht zugänglicher Links, die die Benutzer von einer Seite zur nächsten führen. Das Menüelement in Sitely sieht so aus.

Wenn es zum ersten Mal auf der Arbeitsfläche einer neuen, leeren Website hinzugefügt wird, sieht es standardmäßig so aus.

Es handelt sich um eine einzelne Schaltfläche mit dem Namen „Home“, die anzeigt, dass es sich um einen Link zur Startseite der Website handelt. Wenn der Website neue Seiten hinzugefügt werden, wächst das Menü und enthält die neuen Seiten, sobald sie hinzugefügt werden – dies ist das Standardverhalten des Menüelements. Es ist wichtig zu wissen, dass diese als „Top-Level“-Links bezeichnet werden und für jede Top-Level-Seite, die der Website hinzugefügt wird, ein Link erstellt wird. Wenn jedoch ein Abschnitt zur Website hinzugefügt wird, wird der Link zu einem Abschnitts-Link und die dem Abschnitt hinzugefügten Seiten werden zu Untermenüelementen des Abschnitts-Links. Hier ist ein Beispiel für ein Menü mit einer Startseite und einem Abschnitt mit zwei Seiten innerhalb des Abschnitts.

Wenn Sie Abschnitte zu einer Website hinzufügen, wird der Abschnitts-Link beim Anklicken nicht zu einer physischen Seite führen. Stattdessen wird das Dropdown-Menü geöffnet, um die Seiten in diesem Abschnitt anzuzeigen. Nehmen wir als praktisches Beispiel an, dass wir eine einfache Website erstellen möchten, die aus einer Startseite, einer Seite „Über uns“ und einem Abschnitt „Produkte“ mit zwei Seiten besteht – eine für Smartphones und eine für Tablet-Geräte. Wir möchten vielleicht auch eine Kontaktseite. Damit Sitely dieses Menü automatisch für uns erstellt, müssen wir nur die Seiten und Abschnitte im Seitenbereich links auf der Sitely-Benutzeroberfläche hinzufügen. Klicken Sie beim Hinzufügen von Seiten der obersten Ebene auf das „+“-Symbol am unteren Rand des Seitenbereichs und wählen Sie „Oberste Ebene“ aus dem Dropdown-Menü neben „Seite hinzufügen“ aus.

Sie können nun die beiden Produktseiten für Smartphones und Tablet-Geräte hinzufügen, indem Sie auf das „+“-Symbol unten im Seitenbereich klicken und in der Dropdown-Auswahl neben der Schaltfläche „Seite hinzufügen“ die Option „Produkte“ auswählen. Sie können die eigentlichen Seiten auf die gleiche Weise umbenennen, wie Sie den Abschnitt umbenannt haben. Klicken Sie einfach auf den Seitennamen und ändern Sie ihn in den gewünschten Namen. Alternativ können Sie die Seiten einzeln auswählen und den Seitennamen auf der Registerkarte „Seiten“ rechts auf dem Bildschirm festlegen.

Um eine neue Sektion hinzuzufügen, klicken Sie auf die Schaltfläche „Sektion hinzufügen“. Dadurch wird eine neue Sektion ohne Seiten erstellt. Sobald eine Sektion erstellt wurde, können Sie sie im Seitenbereich auf der linken Seite des Bildschirms umbenennen. Klicken Sie dazu einfach auf den Sektionsnamen und benennen Sie ihn um, in unserem Beispiel in „Produkte“.

Wenn Ihre Seiten und Abschnitte richtig benannt sind, können Sie nun das Menüelement zu Ihrer Startseite hinzufügen. Es wird in etwa so aussehen.

Sitely hat Ihre Seiten- und Abschnittsnamen gesammelt und das Menü für Sie erstellt. Wenn Sie später weitere Seiten und/oder Abschnitte erstellen, können diese automatisch zum Menü hinzugefügt werden, während Sie Ihre Website erstellen. Achten Sie nur darauf, dass das Kontrollkästchen „Seiten automatisch hinzufügen“ im Stil-Panel aktiviert ist. Die Option wird im Stil-Panel sichtbar, wenn Sie das Menü auf der Leinwand auswählen.

Das Stil-Panel bietet Ihnen auch einige zusätzliche Optionen. Sie können das Menü beispielsweise neu anordnen, indem Sie einfach Elemente in der Liste nach oben oder unten ziehen. Um beispielsweise den Abschnitt „Produkte“ VOR der Seite „Kontakt“ zu platzieren, ziehen Sie einfach das Produktetikett in der Liste nach oben. Wenn Sie auf den kleinen Pfeil neben dem Produktelement klicken, werden die beiden Produktseiten in der Liste angezeigt. Sie können Ihr Menü auch von einem horizontalen Menü in ein vertikales Menü ändern, indem Sie einfach auf die entsprechende Schaltfläche klicken. Außerdem können Sie ein kompaktes Menü oder ein Hamburger-Menü verwenden (insbesondere für Ihre mobilen Seiten). Klicken Sie einfach auf das Hamburger-Symbol, um das Menü zu ändern.

This is the vertical menu

when collapsed

This is the vertical menu

when expanded

This is the compact menu option. The items are revealed when the icon is clicked

Menü-Sichtbarkeit

Nachdem Sie ein Menü erstellt haben, können Sie mit Sitely entscheiden, wo und auf welchen Geräten es angezeigt werden soll. Dies geschieht alles im Bereich „Anordnen“. Wenn das Menü auf der Leinwand ausgewählt ist, wechseln Sie zur Registerkarte „Anordnen“, um alle verfügbaren Optionen anzuzeigen.

Im Abschnitt „Sichtbarkeit“ können Sie auswählen, auf welchen Seiten das Menü angezeigt werden soll. Sie können wählen, ob das Menü nur auf der aktuellen Seite, auf allen Seiten innerhalb des aktuellen Abschnitts oder auf allen Seiten der Website angezeigt werden soll. Sie haben auch die Möglichkeit, das Menü am unteren Rand der Seite zu verschieben. Diese Option ist ideal, wenn Sie ein Menü mit Links im Fußzeilenbereich Ihrer Webseiten haben und es am unteren Rand der Seiten fixiert bleiben soll.

Im Abschnitt „Platzierung“ können Sie auswählen, ob das Menü auf dem Gerät angezeigt werden soll, auf dem Sie gerade arbeiten. Wenn Sie diese Option deaktivieren, wird das Menü nur auf dem aktuellen Gerät ausgeblendet, auf anderen Geräten bleibt es jedoch sichtbar.

Für die meisten Hauptnavigationsseiten sollten Sie Ihr Menü auf jeder Seite verfügbar machen, damit Benutzer es von jeder Stelle Ihrer Website aus aufrufen können. Es kann jedoch Situationen geben, in denen Sie unterschiedliche Menüs auf unterschiedlichen Seiten verfügbar machen möchten. Mit dieser Option haben Sie die vollständige Kontrolle über diesen Aspekt Ihrer Website.

Optionen pro Gerät

Bestimmte Menüeinstellungen haben „Pro Gerät“-Einstellungen, wie z. B. den Stil des Menüs. Sie können Ihr Desktop-Menü horizontal einstellen, während es auf Ihrem Smartphone oder Tablet-Gerät als kompaktes oder Hamburger-Menü eingestellt werden kann. In manchen Fällen möchten Sie vielleicht ein kompaktes Menü auf allen Ihren Gerätevarianten platzieren. Dies ist eine recht beliebte Option, da Desktop- und Laptop-Betriebssysteme immer mehr wie ihre Tablet-/Smartphone-Gegenstücke aussehen und sich auch so anfühlen. Es liegt ganz bei Ihnen, wie Sie Ihre Menüs präsentieren, aber egal, wie Sie sich entscheiden, Sitely hat die passende Lösung für Sie.

Manuelles Erstellen Ihres Menüs

Wenn Sie Ihre Seiten und Abschnitte nicht von Anfang an erstellen möchten, können Sie Ihr Menü manuell erstellen, um mehr Kontrolle über Ihre Navigationsstruktur zu erhalten. Fügen Sie dazu das Menüelement zur Arbeitsfläche hinzu und deaktivieren Sie das Kontrollkästchen „Seiten automatisch hinzufügen“ im Stil-Panel. Sie können dann Seiten und Abschnitte manuell hinzufügen.

Der Link „Home“ wird automatisch für Sie erstellt und verweist auf die Startseite oder die Seite „index.html“ Ihrer Website. Um einen neuen Seitenlink hinzuzufügen, klicken Sie auf das „+“-Symbol unten im Menüfenster. Dadurch wird ein neuer Link mit dem Namen „Item“ erstellt. Sie können die Bezeichnung des Elements im Feld „Item Label“ ändern. Auf die gleiche Weise können Sie weitere neue TOP LEVEL-Elemente hinzufügen.

Um einen Abschnitt zu erstellen, fügen Sie zunächst ein neues Element der obersten Ebene zum Menü hinzu, das als Abschnittsverknüpfung dient. Klicken Sie bei ausgewähltem Element auf das Ordnersymbol. Dadurch wird eine Seite unter der Abschnittsverknüpfung erstellt und ein kleiner Pfeil neben dem Namen der Abschnittsverknüpfung angezeigt . Ihre Abschnittsverknüpfung wird nun zu einem Link, über den ein Dropdown-Menü mit Seitenverknüpfungen geöffnet werden kann. Um dem Abschnitt weitere Seiten hinzuzufügen, klicken Sie auf eine der Abschnittsseiten und dann auf das Symbol „+“. Fügen Sie so viele Seiten hinzu, wie Sie benötigen.

Um wieder Elemente der obersten Ebene hinzuzufügen, wählen Sie einen der vorhandenen Links der obersten Ebene aus, bevor Sie auf das Symbol „+“ klicken. Wenn alle Ihre Links vorhanden sind, können Sie damit beginnen, Ihre Menüelemente in die Reihenfolge zu bringen, in der sie in Ihrem endgültigen Menü erscheinen sollen. Klicken Sie einfach auf die Elemente und ziehen Sie sie in der Liste nach oben oder unten.

Wenn Sie ein Menü manuell erstellen, müssen Sie für jedes Menüelement die Aktion „Bei Klick“ festlegen. Bei den meisten Website-Menüs ist diese Aktion normalerweise „Gehe zu Seite in dieser Website“. Sie können jedoch aus JEDER der von Sitely angebotenen Aktionen bei Klick auswählen. Wenn Sie die Option „Gehe zu Seite in dieser Website“ verwenden, können Sie die Seite aus einer Dropdown-Liste aller verfügbaren Seiten auswählen. Dies setzt voraus, dass die Seiten bereits erstellt wurden. Sie sollten das Hinzufügen von Seitenlinks daher erst vornehmen, nachdem Sie Ihre Website fertiggestellt haben. Optional können Sie eine Bildlaufposition innerhalb der verlinkten Seite angeben. In den meisten Fällen verweist der Link einfach auf den Seitenanfang, wie hier dargestellt. In einigen Fällen möchten Sie die verlinkte Seite möglicherweise in einem neuen Tab öffnen. Diese Funktion wird in der Regel verwendet, wenn der Link so eingerichtet wurde, dass er einen externen Link öffnet, anstatt eine Seite innerhalb Ihrer Website.

Sie würden auch manuell ein Menü erstellen, wenn es sich um ein Zusatzmenü und nicht um ein Hauptnavigationsmenü der Website handeln soll. Beispielsweise können Sie ein Hauptmenü der Website haben, das Links zu den Hauptstartseiten Ihrer Website enthält. Ein typisches Beispiel kann eine Produktstartseite sein, auf der die neuesten Produkte aus einer breiten Palette von Produktgruppen hervorgehoben werden. Sie können dieser Startseite jedoch ein Zusatzmenü hinzufügen, in dem Benutzer bestimmte Produktgruppen auswählen können. Auf einer Modeseite kann ein solches Menü Links zu Herrenmode, Damenmode und Kindermode enthalten. Jeder dieser Links führt die Benutzer zur entsprechenden Seite mit der Auswahl an Modeartikeln.

Wenn ein zusätzliches Menü zum ersten Mal zu einer Seite hinzugefügt wird, enthält es standardmäßig einen Link zur Startseite. Dies ist natürlich nicht notwendig, da Sie bereits einen solchen Link in Ihrer Hauptnavigation haben. Daher würden Sie den Link „Home“ im Menübereich des Stil-Panels markieren und auf das Symbol „-“ klicken, um diesen Link aus dem Zusatzmenü zu entfernen. Sie können dies auch in Ihrer Haupt-Website-Navigation tun, wenn Sie beispielsweise ein Logo in Ihrer Navigationsleiste haben, das als Link zur Startseite verwendet wird. Um diese Links zu entfernen, müssen Sie das Kontrollkästchen „Seiten automatisch hinzufügen“ deaktivieren, bevor Sie sie löschen können.

Gestaltung Ihres Menüs

Wie bei allen anderen Elementen in Sitely können Sie auch für Ihre Menüs eine ganze Reihe von Gestaltungsoptionen anwenden. Alle Gestaltungsoptionen finden Sie im vertrauten Stil-Panel von Sitely. Sie können Hintergrundfarben anwenden, Schriftarten und -größen anpassen, Rahmen und abgerundete Ecken hinzufügen und die Textausrichtung festlegen. Durch die Anwendung verschiedener Gestaltungsoptionen können Sie ein reines Textmenü erstellen, das wie eine Reihe von Schaltflächen oder Registerkarten aussieht, und Maus-Hover-Effekte anwenden. Hier sind einige Beispiele.

Klartext mit

Unterstreichung des unteren Randes bei Mauskontakt

Pillenform mit Farbfüllung

bei Mauskontakt

Tabulatorstil mit Farbänderung

bei Mauskontakt

Schaltflächenstil mit Farbänderung

bei Mauskontakt

Zusätzlich zu den normalen Gestaltungsoptionen gibt es einige zusätzliche Optionen, die speziell für Menüs gelten. Sehen wir uns diese nun an.

Die erste Option ist die Option „Gleiche Größe“. Wenn Sie dieses Kontrollkästchen aktivieren, erhalten alle Menüverknüpfungen die gleiche Größe. Wenn diese Option deaktiviert ist, werden die Verknüpfungen individuell entsprechend ihrem Textinhalt dimensioniert. Hier sind die Unterschiede.

Es gibt auch eine Option für den Abstand zwischen den Elementen, mit der der Abstand zwischen den Elementen im Menü festgelegt wird.

Als Nächstes kommen die Untermenüoptionen. Diese können für verschiedene Geräte unterschiedlich eingestellt werden. Die erste Option legt die Platzierung der Untermenüelemente in Bezug auf die Links der obersten Ebene fest. Diese Auswahlmöglichkeiten variieren je nach Art des Menüs, mit dem Sie arbeiten. Hier sehen wir die Optionen für ein horizontales Menü. Die Untermenü-Links können über, unter, links oder rechts vom Element der obersten Ebene platziert werden. Die kleinen Symbole zeigen Ihnen eine grafische Darstellung jeder verfügbaren Option. In diesem Abschnitt können Sie auch den Abstand zwischen den Elementen sowie die Breite und Höhe der Untermenüelemente festlegen.

Die vertikalen Menüoptionen sind ähnlich, aber mit unterschiedlichen Optionen für die Platzierung der Untermenüs. Auch hier geben die kleinen Symbole eine grafische Darstellung der Platzierung im Verhältnis zu den Elementen der obersten Ebene.

Wenn Sie mit einem kompakten Menü arbeiten, sehen Sie ähnliche Optionen mit der Wahl zwischen horizontaler oder vertikaler Platzierung der Untermenüelemente. Bei einem kompakten Menü ist das Element der obersten Ebene das Symbol, das das Menü auslöst, wenn es angeklickt wird.

Das Symbol selbst kann geändert werden, indem Sie den Menüpunkt in der Menüliste im Stil-Panel auswählen. Wenn Sie kein Symbol verwenden möchten, können Sie einfach einen Textlink verwenden. Geben Sie dem Menüpunkt einfach eine Beschriftung und entfernen Sie das Symbol. Ihr Kompaktmenü wird dann zu einem einfachen Textlink wie diesem. Wenn dieser Link angeklickt wird, werden die Untermenüpunkte angezeigt.

Hinweis: Wenn Sie ein Symbol verwenden möchten, müssen Sie die Menübezeichnung im Stil-Panel löschen, um zu verhindern, dass sie unter oder über Ihrem Symbol angezeigt wird.

Tipps für die Erstellung einer effektiven Navigation

Bei der Erstellung einer Navigationsstruktur für Ihre Websites sollten Sie einige Dinge beachten, insbesondere wenn Sie die Seitennavigation für Ihre Benutzer angenehm gestalten möchten. Zunächst sollten Sie überlegen, wie Ihr Menü den Benutzern präsentiert wird. Versuchen Sie, Ihr Menü nach Möglichkeit in einen Navigationsblock einzubetten, der ein Logo, einen Hintergrund und alle anderen allgemeinen Informationen enthält, die Sie den Benutzern präsentieren möchten. Im folgenden Beispiel ist das Menü nur ein Element innerhalb eines Navigationsblocks.

Es besteht aus einem Logo, das bei Anklicken zur Startseite führt, einer Telefonnummer, die bei Anklicken angerufen wird, einem einfarbigen Hintergrundfeld und dem Menüelement selbst mit all seinen Seitenlinks. Diese Elemente wurden zu einem einzigen Element gruppiert, das auf der Seite positioniert werden kann. Darüber hinaus kann ein gruppiertes Element so eingestellt werden, dass es am oberen Seitenrand bleibt und für Benutzer beim Scrollen der Seite sichtbar bleibt. Dies wird eingerichtet, indem Sie die Gruppe auf der Leinwand auswählen und dann die Option „Benutzerdefiniertes Scrollen“ im Stil-Panel aktivieren. Dadurch wird die Option „Am oberen Seitenrand bleiben“ angezeigt.

Versuchen Sie, die Abschnittsverknüpfungen auf ein Minimum zu beschränken. Wenn Sie zu viele Auswahlmöglichkeiten als Dropdown-Optionen anbieten, kann dies Benutzer davon abhalten, weiter auf Ihrer Website zu navigieren. Versuchen Sie, die Anzahl der Links auf der obersten Ebene auf etwa fünf oder sechs Optionen zu beschränken. Wenn Sie Dropdown-Optionen verwenden, versuchen Sie, die Anzahl der Optionen auf maximal vier oder fünf zu beschränken. Wenn Sie den Benutzern unbedingt eine große Anzahl von Optionen präsentieren müssen, z. B. auf einer E-Commerce-Website mit vielen Produktkategorien, sollten Sie stattdessen ein Mega-Menü erstellen. Dieses kann in einem Sitely-Layoutblock oder Pop-up erstellt werden, das sichtbar wird, wenn auf einen Link im Hauptmenü geklickt wird. Sie finden solche Menüs auf vielen Websites mit mehreren Produktgruppen, wie z. B. auf der unten abgebildeten.

Wenn Sie Abschnittsverknüpfungen mit einer großen Anzahl von Dropdown-Menüs erstellen, sollten Sie daran denken, dass Sie den Dropdown-Verlinkungen wahrscheinlich einen Hintergrund zuweisen müssen. Wenn Sie sie transparent lassen, können sie für Benutzer schwer lesbar sein, da das Dropdown-Menü bei Aktivierung höchstwahrscheinlich andere Seitenelemente verdeckt.