Menü Burger ist zu einer der beliebtesten und bequemsten Möglichkeiten geworden, ein Navigationsmenü auf Websites darzustellen. Das Tilda-Programm, eine Plattform zum Erstellen von Websites ohne Programmierung, bietet auch die Möglichkeit, das Hamburger-Menü anzupassen. In diesem Artikel werden wir Ihnen sagen, wie Sie ein Hamburger-Menü in Tilda einrichten, damit Ihre Website stilvoll und modern aussieht.
Zuallererst müssen Sie den Designbereich Ihrer Website in Tilda besuchen. Melden Sie sich dazu auf der Tilda-Plattform in Ihrem Konto an und wählen Sie die Website aus, die Sie anpassen möchten. Öffnen Sie danach den Abschnitt "Design" und suchen Sie nach den Einstellungen für das Menü.
Wenn Sie sich im Designbereich befinden, können Sie die verschiedenen Einstellungen für Ihre Website sehen. Um das Hamburger-Menü anzupassen, suchen Sie nach dem entsprechenden Abschnitt oder Element, das sich auf die Navigation oder das Menü bezieht. Es wird normalerweise als "Menü" oder "Navigation" bezeichnet.
Innerhalb dieses Abschnitts können Sie verschiedene Einstellungen für das Hamburger-Menü wie Farbe, Schriftart, Größe und Layout ändern. Wählen Sie die Einstellungen aus, die Ihrer Website entsprechen, und speichern Sie die Änderungen. Als Ergebnis wird Ihr Hamburger-Menü so aussehen, wie Sie es sich vorgestellt haben.
Verbinden Sie das Hamburger Menü in Tilda
In Tilda wird das Hamburger-Menü mit CSS-Klassen und JavaScript eingerichtet. Zunächst müssen Sie einen Block für das zukünftige Menü erstellen und ihm eine eindeutige ID zuweisen.
Um beispielsweise ein Menü mit der ID "Hamburger-Menü" zu erstellen, fügen Sie den folgenden Code an der gewünschten Stelle Ihrer Website im Tilde-Editor hinzu:
Als nächstes müssen Sie CSS-Klassen hinzufügen, um das Menü zu stylen. Verwenden Sie den folgenden Code:
.hamburger-menu .hamburger-menu::before,.hamburger-menu::after .hamburger-menu::before .hamburger-menu::after
Die Menüstile in diesem Beispiel umfassen Breite, Höhe, Hintergrundfarbe und Position der Elemente. Sie können diese Werte ändern, um das Menü so aussehen zu lassen, wie Sie es benötigen.
Nachdem Sie CSS-Klassen hinzugefügt haben, müssen Sie JavaScript für die Funktionalität des Hamburger-Menüs einbinden. Verwenden Sie den folgenden Code:
let menu = document.querySelector('.hamburger-menu');menu.addEventListener('click', function() );Der JavaScript-Code bindet das Klickereignis an das Hamburger-Menü und fügt bei jedem Klick die Klasse 'active' hinzu/entfernt sie. Die 'active'-Klasse kann verwendet werden, um eine Liste von Menüpunkten zu erweitern und zu minimieren.
Auf diese Weise haben Sie das Hamburger-Menü auf Ihrer Website in Tilda erfolgreich eingerichtet. Denken Sie daran, die Änderungen zu speichern und die Website zu veröffentlichen, um die Ergebnisse zu sehen.
Hinzufügen von Klassen und IDs zu Menüs
Um ein Hamburger-Menü in einer Tilde anzupassen, können Sie Klassen und IDs verwenden, um Stile hinzuzufügen oder das Verhalten des Menüs zu ändern.
Um einem Menü eine Klasse oder eine ID hinzuzufügen, müssen Sie den Tilde-Editor öffnen und den entsprechenden Codeblock finden, der für das Menü verantwortlich ist. Dies ist normalerweise ein Block mit Tags
- und
- enthält Links zu Abschnitten Ihrer Website. Um eine Klasse hinzuzufügen, benötigen Sie einen Abschnitt im HTML-Code
In diesem Beispiel haben wir dem Menü die Klasse "main-menu" hinzugefügt. Diese Klasse kann verwendet werden, um Menüs mit CSS zu stylen. Um eine ID hinzuzufügen, benötigen Sie einen Abschnitt im HTML-Code
weisen Sie ein ID-Attribut zu und geben Sie einen ID-Namen an. Zum Beispiel:In diesem Beispiel haben wir dem Menü die ID "main-menu" hinzugefügt. Diese ID kann beim Erstellen von JavaScript-Skripten verwendet werden, um dem Menü zusätzliches Verhalten hinzuzufügen. Durch das Hinzufügen von Klassen und IDs zu einem Hamburger-Menü in Tilda können Sie das Aussehen und die Funktionalität des Menüs an Ihre Bedürfnisse anpassen.
Erstellen von Stilen für ein Hamburger-Menü
Um die Stile für das Hamburger-Menü in Tilda anzupassen, müssen Sie CSS verwenden. Um zu beginnen, fügen Sie einen Selektor zu Ihrem Hamburger-Menü hinzu. Zum Beispiel können Sie die Klasse "Hamburger-Menü" verwenden. Legen Sie dann die gewünschten Stile für das Menü fest. Sie können die Hintergrundfarbe, Schriftart, Einzug und andere Eigenschaften festlegen, damit das Menü Ihrem Design entspricht. Einer der wichtigsten Teile der Stile für das Hamburger-Menü besteht darin, eine Animation für die Schaltfläche zu erstellen. Sie können die Pseudoklasse :hover und :active verwenden, um einen Klick-Effekt auf eine Schaltfläche hinzuzufügen. Sie können beispielsweise die Hintergrundfarbe beim Schweben ändern oder die Form der Schaltfläche beim Klicken ändern. Vergessen Sie nicht, Stile hinzuzufügen, um das Menü anzuzeigen, wenn Sie die Hamburger-Taste drücken. Sie können die Pseudoklasse :checked und das Attribut:checked verwenden, um Menüs ein- oder auszublenden. Zum Beispiel können Sie die Eigenschaft display: block oder display: none verwenden, um das Menü abhängig vom Status der Hamburger-Schaltfläche ein- oder auszublenden. Abgesehen davon können Sie auch die Stile für die Hamburger Menüpunkte anpassen. Sie können deren Größe, Farbe, Einzug und andere Eigenschaften festlegen, um einen einheitlichen Stil für das gesamte Menü zu erstellen. Nachdem Sie alle Stile für das Hamburger-Menü angepasst haben, vergessen Sie nicht, sie auf Ihrer Website hinzuzufügen. Sie können dies mit einem Tag tun
