Wie kombiniert man Landingpage mit Menü?

In manchen Fällen möchtest du ein Menü erstellen, das die Funktionalität einer Landingpage (eine Einzelseite) mit zusätzlichen Reitern kombiniert. Im Folgenden findest du eine Schritt-für-Schritt-Anleitung, wie du das im System CONREGO umsetzen kannst.

1. Reiter zum Menü hinzufügen

Zuerst musst du alle Seiten/Reiter erstellen, die du im Menü anzeigen möchtest. Gehe dazu auf Website > Liste der Seiten.

Für jeden Abschnitt vergibst du eine eindeutige ID, indem du im Feld URL-Adresse ein # vor den Namen setzt. Dadurch erhält jeder Abschnitt eine eigene ID, die es dir ermöglicht, aus dem Menü direkt dorthin zu verlinken.

2. Landingpage konfigurieren

In der Hauptseite, die deine Landingpage darstellt, fügst du die entsprechenden Abschnitte ein und verlinkst im Menü auf diese mithilfe ihrer IDs.

3. Weitere Reiter hinzufügen

Wenn du möchtest, dass dein Menü auch zusätzliche Seiten außerhalb der Landingpage enthält, erstelle diese erneut unter Website > Liste der Seiten. In diesem Fall brauchst du im Feld URL-Adresse keine IDs mit # zu verwenden.

4. Menü für mobile Geräte konfigurieren

Damit dein Menü auch auf mobilen Geräten funktioniert und sich beim Klicken automatisch schließt, füge den folgenden JavaScript-Code in die Datei custom.js ein. Gehe dazu auf Einstellungen > Für Entwickler.

$(document).ready(function() {
    // Klick-Listener für Elemente mit den Klassen navbar-collapse, navbar-nav und nav-item
    $('.navbar-collapse .navbar-nav .nav-item').on('click', function() {
        // Entfernt die Klasse 'show' vom Element mit der ID 'navbarNav'
        $('#navbarNav').removeClass('show');
    });
});

Mit diesen Schritten erstellst du ein funktionales und ansprechendes Menü, das sowohl auf Desktops als auch auf mobilen Geräten gut funktioniert.