Doku Designer Top Navigation
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.
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
<!-- 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
Mobile Ansicht
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',
'ul-class-child' => '',
'li-class-root' => '',
'li-class-child' => '',
'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>