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 und Bootstrap 5.3 oder neuer.

---

Inhaltsverzeichnis

• Dynamische Menüs
  • Menü Parameter / Aufbau im Quellcode
  • vertikales Menü
  • responsives vertikales 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.

Responsives vertikales Menü

Damit auch auf mobilen Endgeräten das Menü geeignet dargestellt wird, ohne den Content bzw. den Inhalt der Webseite nachteilig zu beeinflussen, wird hier eine Möglichkeit aufgezeigt, die das vertikale Seitenmenü je nach Darstellungsgröße in eine versteckte Navigations-Seitenleiste verschiebt.

<?php /** @var $this \Ilch\Layout\Frontend */ ?><!doctype html>
<html lang="de">

<head>
    <!-- required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- required ilch header -->
    <?=$this->getHeader() ?>
    <!-- bootstrap css -->
    <link href="<?=$this->getVendorUrl('twbs/bootstrap/dist/css/bootstrap.min.css') ?>" rel="stylesheet">
    <!-- layout css -->
    <link href="<?=$this->getLayoutUrl('style.css') ?>" rel="stylesheet">
    <?=$this->getCustomCSS() ?>
    <!-- bootstrap javascript -->
    <script src="<?=$this->getVendorUrl('twbs/bootstrap/dist/js/bootstrap.bundle.min.js') ?>"></script>
</head>

<body class="d-flex flex-column min-vh-100">

    <!-- site -->
    <div id="site" class="wrapper flex-grow-1">

        <!-- mobile navigation -->
        <nav id="navigation" class="navbar d-block d-lg-none navbar-expand-lg bg-dark navbar-dark">
            <div class="container">
                <a class="navbar-brand" href="<?=$this->getUrl() ?>">Titel der Seite</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Navigation</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <ul class="navbar-nav justify-content-end flex-grow-1">
                            <?=$this->getMenu(
                                1,
                                '<div class="card mb-3" data-bs-theme="dark">
                                    <div class="card-header">%s</div>
                                    <div class="card-body">%c</div>
                                </div>'
                            ) ?>
                        </ul>
                    </div>
                </div>
            </div>
        </nav><!-- /mobile navigation -->

        <!-- header -->
        <div id="header" class="py-5 text-center">
            <h2>HEADER</h2>
        </div>

        <!-- main -->
        <div id="main" class="container pt-3">
            <div class="row">
            
                <!-- left sidebar -->
                <div class="d-none d-lg-block col-lg-3">
                    <?=$this->getMenu(
                        1,
                        '<div class="card mb-3">
                            <div class="card-header">%s</div>
                            <div class="card-body">%c</div>
                        </div>'
                    ) ?>
                </div><!-- /sidebar -->
                
                <!-- content -->
                <div class="col-12 col-lg-9">
                    <div class="card">
                        <div class="card-body">
                            <!-- breadcrumb -->
                            <?=$this->getHmenu() ?>
                            <?=$this->getContent() ?>
                        </div>
                    </div>
                </div><!-- /content -->
                
            </div>
        </div><!-- /main -->

    </div><!-- /site -->

    <!-- footer -->
    <div id="footer" class="py-5 text-center">
        <h2>FOOTER</h2>
    </div><!-- /footer -->
    
    <!-- required ilch footer -->
    <?=$this->getFooter() ?>
</body>

</html>

Normale Ansicht

Mobile Ansicht / Menü geschlossen

Mobile Ansicht / Menü aktiviert

Note

Die Darstellung der Webseite (Menübar, Content und responsives Menü) erfolgen auf dem Grid System und Display Property von Bootstrap 5.0. Beispiele von Layouts in Bezug auf Aufbau und mit verschiedenen Menüs findet ihr hier: Basic Layouts für ilchCore 2.2 und Bootstrap 5.3