Doku Designer Top Navigation

Top-Navigation

Diese Dokumentation beschreibt die Integrierung eines responsiven Topmenüs in das eigene Layout auf Basis von Ilch v.2.2 und Bootstrap 5.3 oder neuer.

Inhaltsverzeichnis

Top-Navigation

Top Navigation mit Dropdown

Hier ein Beispiel für ein Top-Menü auf Grundlagen von Bootstraps "navbar" als responsive Navigation. Die Parameter des Menüs wurden in der Doku Designer Dynamische Menüs behandelt.

Zuerst zum Vergleich die Menüeinstellung im Backend / Adminbereich topnav_dropdown_backend

<!-- top navigation -->
<nav id="navigation" class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="<?=$this->getUrl() ?>">Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav ms-auto">
                <?=$this->getMenu(
                    1, 
                    '<li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="%s">%s</a>%c
                    </li>', [
                        'menus' => [
                            'ul-class-root'  => 'dropdown-menu dropdown-menu-dark',
                            'a-class'        => 'dropdown-item',
                            'allow-nesting' => false
                        ],
                        'boxes' => [
                            'render' => false
                        ],
                    ]
                ); ?>
            </ul>
        </div>
    </div>
</nav><!-- /top navigation -->

Normale Ansicht
topnav_dropdown

Mobile Ansicht
topnav_dropdown_mobile

Bootstraps "navbar" erwartet einen aktiven Klick auf den Menüpunkt um ihn zu öffnen, wenn jedoch auf der nicht mobilen Ansicht ein Öffnen per hover gewünscht ist, kann folgendes Javascript helfen:

document.addEventListener("DOMContentLoaded", function() {
    // make it as accordion for smaller screens
    if (window.innerWidth > 992) {
        document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem) {
            everyitem.addEventListener('mouseover', function(e) {
                let el_link = this.querySelector('a[data-bs-toggle]');
                if (el_link != null) {
                    let nextEl = el_link.nextElementSibling;
                    el_link.classList.add('show');
                    nextEl.classList.add('show');
                }
            });
            everyitem.addEventListener('mouseleave', function(e) {
                let el_link = this.querySelector('a[data-bs-toggle]');
                if (el_link != null) {
                    let nextEl = el_link.nextElementSibling;
                    el_link.classList.remove('show');
                    nextEl.classList.remove('show');
                }
            });
        });
    }
});

Insgesamt würde dann der Code des Layouts mit einem responsiven Dropdown-Topmenü wie folgt aussehen:

<?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>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // make it as accordion for smaller screens
            if (window.innerWidth > 992) {
                document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem) {
                    everyitem.addEventListener('mouseover', function(e) {
                        let el_link = this.querySelector('a[data-bs-toggle]');
                        if (el_link != null) {
                            let nextEl = el_link.nextElementSibling;
                            el_link.classList.add('show');
                            nextEl.classList.add('show');
                        }
                    });
                    everyitem.addEventListener('mouseleave', function(e) {
                        let el_link = this.querySelector('a[data-bs-toggle]');
                        if (el_link != null) {
                            let nextEl = el_link.nextElementSibling;
                            el_link.classList.remove('show');
                            nextEl.classList.remove('show');
                        }
                    });
                });
            }
        });
    </script>
</head>

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

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

        <!-- top navigation -->
        <nav id="navigation" class="navbar navbar-expand-lg bg-dark navbar-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="<?=$this->getUrl() ?>">Logo</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ms-auto">
                        <?=$this->getMenu(
                            1, 
                            '<li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="%s">%s</a>%c
                            </li>', [
                                'menus' => [
                                    'ul-class-root'  => 'dropdown-menu dropdown-menu-dark',
                                    'a-class'        => 'dropdown-item',
                                    'allow-nesting' => false
                                ],
                                'boxes' => [
                                    'render' => false
                                ],
                            ]
                        ); ?>
                    </ul>
                </div>
            </div>
        </nav><!-- /top navigation -->

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

        <!-- main -->
        <div id="main" class="container pt-3">
            <div class="row">
                <div class="col-12">

                    <!-- content -->
                    <div class="card">
                        <div class="card-body">
                            <!-- breadcrumb -->
                            <?=$this->getHmenu() ?>
                            <?=$this->getContent() ?>
                        </div>
                    </div><!-- /content -->

                </div>
            </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>

Top Navigation mit Menülinks

Zuerst zum Vergleich die Menüeinstellung im Backend / Adminbereich topnav_link_backend

<!-- top navigation -->
<nav id="navigation" class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="<?=$this->getUrl() ?>">Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <?=$this->getMenu(
                1, 
                '%s %c', [
                    'menus' => [
                        'ul-class-root'  => 'navbar-nav ms-auto',
                        'li-class-root'  => 'nav-item',
                        'a-class'        => 'nav-link',
                        'allow-nesting' => false
                    ],
                    'boxes' => [
                        'render' => false
                    ],
                ]
            ); ?>
        </div>
    </div>
</nav><!-- /top navigation -->

Normale Ansicht
topnav2_link

Mobile Ansicht
topnav2_link_mobile

Top Navigation mit Menülinks eigener Style

Nun ein Beispiel eines Topmenüs mit Links mit einer individuellen CSS Umsetzung:

<!-- top navigation -->
<nav id="navigation">
    <input type="checkbox" id="check">
    <label for="check" class="check-btn">
        <i class="fa-solid fa-bars"></i>
    </label>
    <label class="logo">Logo</label>
        <?=$this->getMenu(
            1, 
            '%c', [
                'menus' => [
                    'li-class-active' => 'active',
                    'allow-nesting' => false
                ],
                'boxes' => [
                    'render' => false
                ],
            ]
        ); ?>
</nav><!-- /top navigation -->

nav#navigation {
    background: #0082e6;
    height: 80px;
    width: 100%;
}
nav#navigation label.logo {
    color: #fff;
    font-size: 35px;
    line-height: 80px;
    font-weight: 600;
    cursor: pointer;
    float: left;
    width: 200px;
    padding: 0 30px;
    margin-right: 10px;
}
nav#navigation ul {
    margin-left: 210px;
    margin-right: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
}
nav#navigation ul li {
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav#navigation ul li a {
    color: #fff;
    padding: 10px;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
}
nav#navigation li.active a,
nav#navigation a:hover {
    background: #1b9bff;
    transition: .5s;
}
nav#navigation .check-btn {
    color: #fff;
    font-size: 30px;
    float: right;
    line-height: 80px;
    margin-right: 30px;
    cursor: pointer;
    display: none;
}
nav#navigation #check {
    display: none;
}
@media (max-width: 992px) {
    nav#navigation .check-btn {
        display: block;
    }
    nav#navigation ul {
        position: fixed;
        height: 100vh;
        width: 100%;
        background: #2c3e50;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;
        z-index: 1000;
        margin: 0;
    }
    nav#navigation ul li {
        display: block;
        margin: 30px 0;
        line-height: 30px;
    }
    nav#navigation ul li a {
        font-size: 20px;
    }
    nav#navigation #check:checked ~ ul {
        left: 0;
    }
}

Das Ergebnis sieht dann so aus:

Normale Ansicht
topnav2_link

Mobile Ansicht
topnav2_link_mobile

Insgesamt würde dann der Code dieses individuellen Topmenüs mit Links wie folgt aussehen:

<?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">
    <style>
        nav#navigation {
            background: #0082e6;
            height: 80px;
            width: 100%;
        }
        nav#navigation label.logo {
            color: #fff;
            font-size: 35px;
            line-height: 80px;
            font-weight: 600;
            cursor: pointer;
            float: left;
            width: 200px;
            padding: 0 30px;
            margin-right: 10px;
        }
        nav#navigation ul {
            margin-left: 210px;
            margin-right: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #fff;
        }
        nav#navigation ul li {
            display: inline-block;
            line-height: 80px;
            margin: 0 5px;
        }
        nav#navigation ul li a {
            color: #fff;
            padding: 10px;
            border-radius: 3px;
            text-transform: uppercase;
            text-decoration: none;
        }
        nav#navigation li.active a,
        nav#navigation a:hover {
            background: #1b9bff;
            transition: .5s;
        }
        nav#navigation .check-btn {
            color: #fff;
            font-size: 30px;
            float: right;
            line-height: 80px;
            margin-right: 30px;
            cursor: pointer;
            display: none;
        }
        nav#navigation #check {
            display: none;
        }
        @media (max-width: 992px) {
            nav#navigation .check-btn {
                display: block;
            }
            nav#navigation ul {
                position: fixed;
                height: 100vh;
                width: 100%;
                background: #2c3e50;
                top: 80px;
                left: -100%;
                text-align: center;
                transition: all .5s;
                z-index: 1000;
                margin: 0;
            }
            nav#navigation ul li {
                display: block;
                margin: 30px 0;
                line-height: 30px;
            }
            nav#navigation ul li a {
                font-size: 20px;
            }
            nav#navigation #check:checked ~ ul {
                left: 0;
            }
        }
    </style>
    <?=$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">

        <!-- top navigation -->
        <nav id="navigation">
            <input type="checkbox" id="check">
            <label for="check" class="check-btn">
                <i class="fa-solid fa-bars"></i>
            </label>
            <label class="logo">Logo</label>
                <?=$this->getMenu(
                    1, 
                    '%c', [
                        'menus' => [
                            'li-class-active' => 'active',
                            'allow-nesting' => false
                        ],
                        'boxes' => [
                            'render' => false
                        ],
                    ]
                ); ?>
        </nav><!-- /top navigation -->

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

        <!-- main -->
        <div id="main" class="container pt-3">
            <div class="row">
                <div class="col-12">

                    <!-- content -->
                    <div class="card">
                        <div class="card-body">
                            <!-- breadcrumb -->
                            <?=$this->getHmenu() ?>
                            <?=$this->getContent() ?>
                        </div>
                    </div><!-- /content -->

                </div>
            </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>

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

Wiki für ilch-2

Herzlich Willkommen

Benutzer

Inhaltsverzeichnis
Hier findet man u.a. die Installationsanleitung, sowie Fehler- und Problem-behebungen

Entwickler

Inhaltsverzeichnis
Hier findet man Informationen zum Script, Konzept und dem Programmierstil

Designer

Inhaltsverzeichnis
Hier findet man Informationen über den Aufbau und Anpassung von Layouts und Modulen

Video-Tutorials

Inhaltsverzeichnis
Hier findet man einige Video-Tutorials um und mit unserem CMS

Provide feedback

Saved searches

Use saved searches to filter your results more quickly