Doku Designer Dynamische Menüs

Dynamische Menüs

Diese Dokumentation beschreibt die Integrierung eines dynamischen Menüs in das eigene Layout auf Basis von Ilch v.2.2.0 und Bootstrap 5.3 oder neuer.

---

Inhaltsverzeichnis

• Dynamische Menüs
  • Menü Parameter / Aufbau im Quellcode
  • vertikales Menü
  • horizontales Menü

---

Menü Parameter

• Menü-Nummer

Mit dem ersten Parameter, hier die "1", wird festgelegt, um welches Menü es sich in Bezug auf die Einrichtung im Backend / Adminbereich handelt.

• Titel

Der Aufbau erfolgt in diesem Beispiel auf Bootstrap "card" als flexibler Container. In der Kopfzeile mit der Klasse "card-header" wird der Titel des Menüs oder der jeweiligen eingebundenen Boxen dynamisch mit der Variable "%s" eingesetzt.

• Inhalt

Der zweite Parameter "%c", welcher mit der Klasse "card-body" eingefügt ist, enthält das HTML-Gerüst für die Ausgabe der einzelnen Menüpunkte oder eines Boxeninhaltes.

• Menü-Parameter

Die Beschreibung der einzelnen Parameter wurde dem nun folgenden Quellcode hinzugefügt.

<?=$this->getMenu
(
    1,
    '<div class="card mb-3">
        <div class="card-header">%s</div>
        <div class="card-body">%c</div>
    </div>', [
        'menus' => [
            // Integriert eine Klasse in alle <ul>'s in Ebene 1
            'ul-class-root' => '',

            // Integriert eine Klasse in alle <ul>'s ab Ebene 2
            'ul-class-child' => '',

            // Integriert eine Klasse in alle <li>'s in Ebene 1
            'li-class-root' => '',

            // Integriert eine Klasse in alle <li>'s ab Ebene 2
            'li-class-child' => '',

            // Integriert eine Klasse in dem aktiven Menüpunkt
            'li-class-active' => '',

            // Integriert eine Klasse in alle <a>'s ab Ebene 1
            'a-class' => '',

            // Integriert eine Klasse in alle <span>'s ab Ebene 1
            'span-class' => '',

            // Erlaubt "true" oder verbietet "false" eine Menüverschachtelung / Untermenüpunkt
            'allow-nesting' => true,
        ],
        'boxes' => [
            // Erlaubt "true" oder verbietet "false" das Anzeigen von Boxen in diesem Menü
            'render' => true,
        ],
    ]
); ?>

Vertikales Menü

Zuerst zum Vergleich die Menüeinstellung im Backend / Adminbereich

1. Hier nun ein Beispiel eines vertikalen Menü´s mit erlaubten Boxen und verbotenen Untermenüpunkten, sowie auf Basis von Bootstraps "list-group" als flexible Anzeige einer Reihe von Inhalten:

<?=$this->getMenu
(
    1,
    '<div class="card mb-3">
        <div class="card-header">%s</div>
        <div class="card-body">%c</div>
    </div>', [
        'menus' => [
            'ul-class-root' => 'list-group list-group-flush',
            'ul-class-child' => 'list-group list-group-flush my-2',
            'li-class-root' => 'list-group-item list-group-item-action pe-0',
            'li-class-child' => 'list-group-item list-group-item-action',
            'li-class-active' => 'active',
            'a-class' => 'nav-link',
            'allow-nesting' => false,
        ],
        'boxes' => [
            'render' => true,
        ],
    ]
); ?>

2. Nun das Gleiche, nur wenn man die Boxen verbietet und die Untermenüpunkte erlaubt:

<?=$this->getMenu
(
    1,
    '<div class="card mb-3">
        <div class="card-header">%s</div>
        <div class="card-body">%c</div>
    </div>', [
        'menus' => [
            'ul-class-root' => 'list-group list-group-flush',
            'ul-class-child' => 'list-group list-group-flush my-2',
            'li-class-root' => 'list-group-item list-group-item-action pe-0',
            'li-class-child' => 'list-group-item list-group-item-action',
            'li-class-active' => 'active',
            'a-class' => 'nav-link',
            'allow-nesting' => true,
        ],
        'boxes' => [
            'render' => false,
        ],
    ]
); ?>

3. Nun mal ein Beispiel auf Bootstraps Navigationskomponente "nav" mit erlaubten Boxen und Untermenüpunkten:

<?=$this->getMenu
(
    1,
    '<div class="card mb-3">
        <div class="card-header">%s</div>
        <div class="card-body">%c</div>
    </div>', [
        'menus' => [
            'ul-class-root' => 'nav nav-pills flex-column',
            'li-class-root' => 'nav-item',
            'li-class-child' => 'nav-item',
            'a-class' => 'nav-link',
            'allow-nesting' => true,
        ],
        'boxes' => [
            'render' => true,
        ],
    ]
); ?>

4. Jetzt ein Beispiel mit einer individuellen CSS Umsetzung:

ul.mynavi * {
    list-style: none;
    text-decoration: none;
}
ul.mynavi {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
ul.mynavi li a {
    display: block;
    padding: 10px 5px;
    border-bottom: 1px dotted #aaa;
    color: #666;
    position: relative;
}
ul.mynavi li a::before {
    content: "\2606";
    display: block;
    float: left;
    margin-right: 5px;
}
ul.mynavi li a:hover,
ul.mynavi li.active a {
    color: #000;
    background: #eee;
    border-right: 2px solid #000;
}
ul.mynavi li a:hover::before,
ul.mynavi li.active a::before {
    content: "\2605";
}

<?=$this->getMenu
(
    1,
    '<div class="card mb-3">
        <div class="card-header">%s</div>
        <div class="card-body">%c</div>
    </div>', [
        'menus' => [
            'ul-class-root' => 'mynavi',
            'li-class-active' => 'active',
            'allow-nesting' => true,
        ],
        'boxes' => [
            'render' => true,
        ],
    ]
); ?>

Man sieht somit, dass es viele verschiedene Möglichkeiten gibt. Es müssen auch keine Bootstrap Klassen sein, es können eigene CSS Klassen definiert und ins Menü eingebunden werden. Insbesondere stellt das Nesting (Erlauben von Untermenüpunkten) und eine optisch schöne Einbindung in das Layout eine kleine Herausforderung dar.

Horizontales Menü