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',
'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>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">
<?=$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
Mobile Ansicht
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
Mobile Ansicht
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