Menü in Lektor

Veröffentlicht am: 11. Februar 2020

Die Möglichkeit, ein "klassisches" hierarchisches Menü in https://www.getlektor.com/ anzulegen, ist zumindest nicht als einfache Funktion direkt enthalten.

Das Menü auf dieser Seite ist aus folgenden Teilen aufgebaut:

Im Template sind folgende Teile eingebunden:

{% from "macros/menu.html" import mainmenu %}

<link rel="stylesheet" href="{{ '/css/styles.css'|url }}">
<script src="{{ '/js/menuSlide.js'|url }}"></script>

<div class="menublock">
  {{ mainmenu() }}
</div>

Die erste Zeile importiert das untenstehende Makro, um die Menüfunktion aus dem Template heraus zu halten.
Anschließend werden (ganz normal) die CSS- und JavaScript-Dateien importiert.

Für "mein" Menü gibt es noch eine Eigenschaft in allen "Models", nämlich die Eigenschaft "Show in Menu".
Hiermit lassen sich Seiten vom Menü ausschließen.
Je nach Model habe ich den Wert per default auf true oder false gestellt. Blog-Einträge beispielsweise sind standardmäßig auf "false".

Hier der Abschnitt des Models:

[fields.show_in_menu]
label = Show in menu
checkbox_label = If true, page will be shown in the menu (default)
type = boolean
default = true

Das Menü-Makro, welches das Menü erstellt, ist folgendes:

{% macro mainmenu() %}
<nav id="menu-wrap">
    <div id="menu-trigger" onClick="menuSlide();">Men&uuml;
        <img id="logosmall" src="/img/logo-25.png" width="25" height="25">
    </div>
    <ul id="menu">
        <li><a href="{{ '/'|url }}">Startseite</a></li>
        {% set root = site.get('/') %}
        {% for child in root.children|sort(attribute='sort') recursive %}
            {% if child.show_in_menu %}
                <li><a href="{{ child|url }}" sort="{{ child.sort }}">{{ child.title }}</a>
                {% if child.children %}<ul>{{ loop(child.children) }}</ul>{% endif %}
                </li>
            {% endif %}
        {% endfor %}
    </ul>
</nav>
{% endmacro %}

Der "Menu-Trigger" ist nur für schmale Bildschirme (Mobilgeräte) sichtbar. Per Klick hierauf (gesteuert durch die JavaScript-Funktion) wird das Menü ein- und ausgeblendet.

Man erreicht mit dem obigen Jinja2-Code eine hierarchische Darstellung des Menüs, um hiermit dann ein hübsches Menü daraus zu generieren.
Es gibt ja verschiedene Beispiele für CSS-Code, daher gehe ich auf das CSS und die JavaScript-Funktion mal nicht näher ein, das hängt immer ganz vom gewünschten Design der Seite ab.
Je nach CSS und JavaScript sind auch anklickbare Untermenüs etc.pp. möglich, ich habe mein Menü hier recht schlicht gehalten, nachdem das Menü noch recht übersichtlich ist.

Im nächsten Artikel zeige ich, wie die Brotkrumen ("breadcrumbs") oben auf dieser Seite erstellt wurden.