Menüs und Navigation

Fast alle Websites verfügen über eine Art Navigationsmenü, damit die Benutzer schnell und einfach Informationen finden. Navigationsmenüs befinden sich häufig in den Headern, Seitenleisten und Footern einer Website. Da sie so weit verbreitet sind, verfügt HubSpot über einige integrierte Tools, die die Erstellung und Verwaltung dieser Menüs vereinfachen. Für die Programmierarbeit bietet HubSpot mehrere Lösungen für die Anzeige von Menüs, sodass Sie die Lösung wählen können, die für Ihre Website am sinnvollsten ist.

Für Menüs, die global auf einer Website verwendet werden, z. B. das Header- oder Footer-Menü einer Website, gibt es eine Seite mit Navigationseinstellungen. In diesem Bildschirm können Sie Menüs erstellen, aktualisieren und löschen, die von allen Vorlagen oder Modulen in Ihrem Account verwendet werden können. HubSpot stellt ein Menümodul und ein Tag zur Verfügung, um die Anzeige des Menüs auf Ihrer Website zu vereinfachen.

Für Menüs, die nur für eine einzige Seite sinnvoll sind, z. B. das Inhaltsverzeichnis einer Pillar-Seite, gibt es einfache Menüs. Einfache Menüs sind nicht global, sondern spezifisch für die Seite, auf der sie angezeigt werden (es sei denn, sie sind Teil des globalen Inhalts). Einfache Menüs können auf Seitenebene von Content Editoren bearbeitet werden und bieten eine ähnliche Benutzeroberfläche für ihre Erstellung/Verwaltung. HubSpot bietet ein einfaches Menümodul und ein Tag, mit denen Sie ein einfaches Menü auf Ihrer Website anzeigen können.

Benutzerdefinierte Module können sowohl einfache Menüs als auch Menüfelder enthalten.  Da die Entwickler mehr Kontrolle über den Ausgabecode haben, werden benutzerdefinierte Module im Allgemeinen von den meisten Entwicklern bevorzugt. So können Sie Module für Seitenleisten, Footer, Header usw. erstellen, die Ihrem Arbeitsablauf und Ihren Geschäfts- oder Designanforderungen entsprechen. Menüfelder ermöglichen es dem Content-Editor, ein Menü aus den globalen Account-Navigationsmenüs auszuwählen. Das einfache Menüfeld ermöglicht es ihnen, Menüs zu erstellen, die an anderer Stelle nicht wiederverwendet werden können.

Bei wirklich komplizierten Menüs kann es sinnvoll sein, ein Modul mit Repeater-Gruppen oder eine HubDB zu verwenden, um die Struktur und die Form des Menüs zu verwalten. Allerdings geht diese Methode auf Kosten einer einfachen Benutzeroberfläche für Inhaltsredakteure. In solchen Situationen kann es sinnvoll sein, Menüs oder einfache Menüfelder in Verbindung mit der Menüfunktion zu verwenden, um eine erweiterte Struktur, Funktionalität UND ein gutes Menüerlebnis zu bieten.

Die meisten Website-Menüs folgen einem ähnlichen Format, und CMS Hub bietet eine nützliche Editor-Benutzeroberfläche, um die Erstellung von Menüs in diesem Hierarchieformat zu erleichtern. Diese Benutzeroberfläche (UI) ermöglicht es Ihnen, Links zu Seiten untereinander zu verschachteln, um mehrstufige Menüs zu erstellen. Die hier erstellten Menüs können in jedem Typ von Vorlage oder Modul angezeigt werden. Um das account-übergreifende Menü zu konfigurieren, gehen Sie zu „Einstellungen“ > „Seiten“ > „Navigation“.

Ein HubSpot-Account kann mehrere Menüs haben, die Sie für Ihre Hauptnavigation, Seitenleisten, Mega-Menüs, Footer usw. verwenden können. Die in den Navigationseinstellungen definierten Menüs sind auf der gesamten Website wiederverwendbar.

Es gibt mehrere Möglichkeiten zur Anzeige von Menüs. Sie sollten entscheiden, welche der folgenden Möglichkeiten für Ihren Anwendungsfall am sinnvollsten ist.

• Ein benutzerdefiniertes Menü mit der menu()-Funktion
• Das HubL-menu-Tag
• Das HubL-simple-menu-Tag
• Das Standard-Menümodul

Jede hat ihre Vor- und Nachteile. Vergewissern Sie sich, dass Sie sie verstanden haben, bevor Sie sich entscheiden.

Als freundliche Erinnerung: Eine bewährte Methode für Header von Websites, die oft die umfangreiche Hauptnavigation enthalten, ist die Bereitstellung eines Skip-to-Content-Links. Dies hilft Benutzern, die mit der Tastatur navigieren, langwierige Menüs zu überspringen.

Wenn Sie mit Menüs in HubL arbeiten, müssen Sie die ID des Menüs verwenden, um es zu referenzieren. Dies gilt nicht für einfache Menüs

Wenn Sie ein benutzerdefiniertes Modul erstellen, ist der beste Weg, um die Menü-ID zu erhalten, tatsächlich ein Menüfeld zu erstellen. Das Menüfeld in einem Modul gibt die ID des Menüs zurück, sodass der Content-Editor die Möglichkeit hat, das Menü auszuwählen. Wenn Sie aus irgendeinem Grund die Menü-ID fest programmieren möchten oder müssen, können Sie die Menü-ID von der URL abrufen, wenn Sie die Seite mit den Navigationseinstellungen anzeigen.

https://app.hubspot.com/menus/<portal id>/edit/<menu id>

Das Standardmenü zeigt die ID nicht immer direkt an. Ändern Sie die Menüs und wechseln Sie dann zum Standardmenü, damit die ID in der URL angezeigt wird.

Die menu()-Funktion ermöglicht es Ihnen, vollständig angepasste Menüstrukturen zu erstellen. Sie gibt ein Objekt zurück, das Sie durchlaufen können, um ein Menü zu erstellen. Es gibt viele bereitgestellte Eigenschaften für die Menüpunkte. Beachten Sie, dass Sie bei der Verwendung der Menüfunktion die volle Verantwortung für die Barrierefreiheit Ihres Menüs, die Struktur und das Styling tragen.

Die HubSpot CMS Theme Boilerplate enthält ein Beispiel für ein Menümodul, das mit der menu()-Funktion erstellt wurde. Sie können dies Ihren Bedürfnissen entsprechend ändern, um komplizierte Menüs wie Mega-Menüs zu erstellen.

Das HubL-menu-Tag generiert Standard-HTML für Menüs mit Klassennamen, die bereits für die tiefen Ebenen, den aktiven Status und für das Vorhandensein von untergeordneten Elementen vorgesehen sind. Das Menü-Tag kann innerhalb von benutzerdefinierten Modulen verwendet werden, sodass es eine einfache Möglichkeit zur Erstellung von Navigationsmenüs für die Hauptnavigation und die Seitenleistennavigation darstellt. Für dieses Tag müssen Sie die Menü-ID angeben. Da es sich um ein HubL-Tag und nicht um ein Modul handelt, kann es in benutzerdefinierten Modulen verwendet werden.

Das simple_menu-Tag funktioniert ähnlich wie das HubL-menu-Tag und generiert Standard-Menü-HTML mit Klassennamen für tiefe Ebenen, aktive Zustände und ob das Element Unterelemente hat. Der Unterschied besteht darin, dass dieses Tag ein Dict der Menüstruktur anstelle einer Menü-ID erwartet. Dies ist sinnvoll, wenn die Felder eines Moduls die Struktur eines Menüs bestimmen sollen, anstatt die Navigationseinstellungen zu verwenden. Das einfache Menüfeld ermöglicht es dem Content-Autor, das Menü zu erstellen, und Sie können die Variable aus diesem Feld in dieses Tag eingeben. Ein Szenario, in dem Sie dies wünschen, ist ein Inhaltsverzeichnis für eine lange Seite. Dieses Menü würde sich auf anderen Seiten nicht wiederholen, daher ist es in Ordnung, dass es nicht in den Navigationseinstellungen enthalten ist. Da es sich um ein HubL-Tag und nicht um ein Modul handelt, kann es in benutzerdefinierten Modulen verwendet werden.

Wir bieten Standardmodule, die sowohl in HTML+HubL- als auch in Drag-&-Drop-Vorlagen verwendet werden können. Das Standard-Menümodul unter der Haube verwendet das HubL-menu-Tag. Das standardmäßige einfache Menümodul unter der Haube verwendet das HubL-simple_menu-Tag. Da sie die HubL-menu-Tags verwenden, wird Standard-HTML für Menüs erzeugt. Da es sich um echte Module handelt, können Sie sie in dnd_area-Tags, flexiblen Spalten und Drag-&-Drop-Vorlagen verwenden. Da Module nicht verschachtelt werden können, können Sie diese Module nicht innerhalb anderer Module platzieren. Stattdessen sollten Sie das menu-Tag oder das simple-menu-Tag verwenden.