Wie man ein Hamburger-Menü in Tilda einrichtet

Websites, die auf der Tilda-Plattform erstellt wurden, ermöglichen die Erstellung von schönen und funktionalen Schnittstellen. Oft können wir sehen, dass das Hauptmenü auf solchen Seiten wie ein Hamburger-Symbol aussieht - drei horizontale Streifen. Außerdem reagiert es auf einen Klick des Benutzers und wird als Dropdown-Liste geöffnet. Wenn Sie lernen möchten, wie Sie in Ihrem Projekt auf Tilda ein Hamburger-Menü hinzufügen und anpassen können, wird Ihnen dieser kleine Leitfaden helfen.

Öffnen Sie zunächst Ihr Projekt auf der Tilde und gehen Sie zu den Blockeinstellungen. Unser Ziel ist es, ein Hamburger-Menü zu erstellen, also wählen Sie den Textblock aus der Liste der bereitgestellten Optionen aus. Nehmen Sie dann die erforderlichen Änderungen im Texteditor vor.

Die eingegebene Bezeichnung "MENÜ" wird angezeigt, wenn die mobile Anzeige Ihrer Website aktiviert ist. Es wird das Hamburger-Symbol ersetzen und den Benutzer auf das Vorhandensein eines Untermenüs hinweisen. Verwenden Sie den HTML-Code, um diese Beschriftung hinzuzufügen:

Grundprinzipien der Bedienung des Menüs in Tilda

Das System zum Erstellen und Bearbeiten von Menüs in Tilde basiert auf einfachen und leicht verständlichen Prinzipien. Es ermöglicht Ihnen, Menüs mit vorgefertigten Elementen und anpassbaren Optionen zu erstellen und anzupassen.

und . Kennung
erstellt eine Liste und ein Tag definiert ein Listenelement.

Jedes Listenelement kann einen Link oder ein Untermenü enthalten. Verwenden Sie ein Tag, um einen Link zu erstellen, und verwenden Sie eine verschachtelte Liste, um ein Untermenü zu erstellen.

Die Menüelemente werden mit CSS formatiert. In der Tilde stehen verschiedene Einstellungen zur Verfügung, um das Erscheinungsbild des Menüs zu ändern, z. B. Farbe, Schriftart, Größe usw. Hierzu verwenden Sie das Einstellungsfenster, in dem Sie die gewünschten Optionen auswählen können.

Es ist wichtig zu beachten, dass beim Erstellen und Bearbeiten eines Menüs in einer Tilde die Reaktionsfähigkeit des Menüs berücksichtigt werden muss. Das bedeutet, dass das Menü auf verschiedenen Geräten - Computer, Tablets und Smartphones - korrekt angezeigt werden muss. Dazu ist es wichtig, ein responsives Design und Anzeigeeinstellungen für unterschiedliche Bildschirmauflösungen zu verwenden.

All diese Prinzipien ermöglichen es Ihnen, benutzerfreundliche und funktionelle Menüs auf der Website zu erstellen, die ordnungsgemäß funktionieren und auf allen Geräten angezeigt werden.



Installieren und Aktivieren des Hamburger-Menüs

Schritt 1: Geben Sie den Projekteditor auf der Tilde ein, in der Sie das Hamburger-Menü festlegen möchten.

Schritt 2: Öffnen Sie das Einstellungsfenster des Blocks, dem Sie das Hamburger-Menü hinzufügen möchten.

Schritt 3: Suchen Sie unter "Einstellungen" nach der Option "Menütyp".

Schritt 4: Wählen Sie die Option "Hamburger" aus der Dropdown-Liste aus.

Schritt 5: Passen Sie das Aussehen und die Anordnung des Hamburger Menüs nach Ihren Wünschen an, indem Sie die verfügbaren Optionen verwenden.

Schritt 6: Klicken Sie auf Anwenden oder Speichern, um die Einstellungen zu speichern.

Schritt 7: Stellen Sie sicher, dass das Hamburger-Menü korrekt auf Ihrer Website oder Seite angezeigt wird.

Jetzt ist Ihr Hamburger-Menü erfolgreich installiert und aktiviert und Sie können sein Aussehen und seine Funktionalität nach Belieben verbessern.

Anpassen des Aussehens des Hamburger Menüs

Sie können verschiedene Stile und HTML-Code verwenden, um das Aussehen des Hamburger Menüs in der Tilde anzupassen. Eine beliebte Methode ist die Verwendung einer Tabelle.

Im obigen Code wird eine Tabelle mit einer einzelnen Zelle erstellt, in der sich das Menü befindet. Jeder Menüpunkt befindet sich in einem separaten Absatz. Sie können CSS-Stile verwenden, um das Erscheinungsbild eines Menüs festzulegen, z. B.:

table td p

In diesem Beispiel wird ein Tabellenstil festgelegt (border-collapse: collapse;), der die Einrückung zwischen den Tabellenzellen entfernt. Für alle Absätze innerhalb einer Tabellenzelle wird ein Einzug von oben und unten auf 10 Pixel festgelegt.

Hinzufügen von Menüpunkten

Um dem Tilda-Burger neue Menüpunkte hinzuzufügen, müssen Sie die folgenden Schritte ausführen:

1. Öffnen Sie den Site-Editor in Tilde und wählen Sie die Seite aus, zu der Sie Menüpunkte hinzufügen möchten.
2. Gehen Sie zum Menü und suchen Sie nach einem Burgerblock.
3. Klicken Sie auf die Schaltfläche "Block bearbeiten", um das Menü Einstellungen zu öffnen.
4. Suchen Sie in den Menüeinstellungen nach dem Abschnitt "Menüelemente" oder einem ähnlichen Abschnitt, der von Ihrem Thema bereitgestellt wird.
5. Klicken Sie auf die Schaltfläche "Element hinzufügen", um einen neuen Menüpunkt zu erstellen.
6. Füllen Sie die Felder für den neuen Menüeintrag aus, einschließlich Titel und Link.
7. Wiederholen Sie die Schritte 5 bis 6 für jeden neuen Menüpunkt, den Sie hinzufügen möchten.
8. Speichern Sie die Änderungen und veröffentlichen Sie Ihre Website, um die neuen Menüpunkte im Burger zu sehen.

Nachdem Sie neue Menüpunkte hinzugefügt haben, sollten sie in einem Burger auf Ihrer Website erscheinen. Sie können die Reihenfolge der Menüpunkte ändern oder die Elemente bei Bedarf löschen. Denken Sie daran, dass die Art und Weise, wie Sie Menüpunkte hinzufügen und anpassen, je nach dem von Ihnen gewählten Thema in der Tilde leicht abweichen kann.

Bearbeiten von Menüpunkten

Befolgen Sie einige einfache Schritte, um die Menüpunkte in der Tilde zu bearbeiten:


1. Wechseln Sie im Administrationsbereich Ihrer Website zum Abschnitt "Menü".
2. Wählen Sie das gewünschte Menü aus der Liste aus, wenn Sie mehrere haben.
3. Klicken Sie neben dem ausgewählten Menü auf die Schaltfläche "Bearbeiten".
4. In dem sich öffnenden Fenster können Sie alle bereits hinzugefügten Menüpunkte sehen.
5. Um einen vorhandenen Menüpunkt zu ändern, bewegen Sie den Mauszeiger darüber und klicken Sie auf die Schaltfläche "Bearbeiten".
6. Im angezeigten Fenster können Sie den Text, den Link und andere Optionen des Menüpunkts ändern.
7. Wenn Sie einen neuen Menüpunkt hinzufügen möchten, klicken Sie auf die Schaltfläche "Element hinzufügen".
8. Füllen Sie die erforderlichen Felder wie Text, Link und andere Parameter aus.
9. Nachdem Sie die Bearbeitung abgeschlossen und die Änderungen gespeichert haben, vergessen Sie nicht, das Menü auf Ihrer Website zu veröffentlichen.

Auf diese Weise können Sie die Menüpunkte auf Ihrer Website auf der Tilde leicht bearbeiten und ändern, um sie an Ihre Bedürfnisse anzupassen.

Anpassungsfähigkeit des Hamburger Menüs

Sie können jedoch CSS-Stile anwenden, um Menüs anpassungsfähig zu machen, sodass das Menü vertikal auf schmalen Bildschirmen und horizontal auf breiteren Bildschirmen angezeigt wird.

Hauptsaechliche

Über uns

Dienstleistungen

Kontakte

Im obigen Beispiel befindet sich jedes Menüelement in einer separaten Tabellenzelle. Sie können bei Bedarf zusätzliche Zellen oder Zeilen hinzufügen, um zusätzliche Elemente oder Untermenüs zu erstellen.

Sie können CSS-Medienabfragen verwenden und je nach Bildschirmbreite unterschiedliche Stile für Menüs festlegen, um die Anpassungsfähigkeit der Menüs zu erreichen. Zum Beispiel:

@media (max-width: 768px)

In diesem Beispiel wird das Menü bei einer Bildschirmbreite von bis zu 768 Pixeln vertikal angezeigt, da die Tabelle ihren Anzeigetyp in block ändert und td-Zellen ebenfalls vertikal angezeigt werden.

Auf diese Weise wird die Anpassungsfähigkeit des Hamburger Menüs in Tilde durch die Verwendung einer Tabelle und die Anwendung von CSS-Stilen für unterschiedliche Bildschirmauflösungen erreicht. Auf diese Weise können Sie die Menüs auf verschiedenen Geräten effektiv darstellen und die Benutzerfreundlichkeit der Website gewährleisten.