117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
HTML
|
<style type="text/css">
|
||
|
|
.dropdown-menu {
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
.dropdown-menu.columns-2 {
|
||
|
|
min-width: 400px;
|
||
|
|
}
|
||
|
|
.dropdown-menu.columns-3 {
|
||
|
|
min-width: 1000px;
|
||
|
|
}
|
||
|
|
.dropdown-menu li a {
|
||
|
|
padding: 5px 15px;
|
||
|
|
font-weight: 300;
|
||
|
|
}
|
||
|
|
.multi-column-dropdown {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
.multi-column-dropdown li a {
|
||
|
|
display: block;
|
||
|
|
clear: both;
|
||
|
|
line-height: 1.428571429;
|
||
|
|
color: #333;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
.multi-column-dropdown li a:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #262626;
|
||
|
|
background-color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 767px) {
|
||
|
|
.dropdown-menu.multi-column {
|
||
|
|
min-width: 240px !important;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||
|
|
<div class="container">
|
||
|
|
<a class="navbar-brand" href="/">Leuchttürme Ostsee</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse" id="navbarColor02">
|
||
|
|
<ul class="navbar-nav me-auto">
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Leuchttürme</a>
|
||
|
|
<ul class="dropdown-menu multi-column columns-3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<ul class="multi-column-dropdown">
|
||
|
|
{{ $pages := where (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) ".Params.leuchtturm" "==" true }}
|
||
|
|
{{ range $i, $e := $pages }}
|
||
|
|
{{ $offset := mod $i 3 | add 1 }}
|
||
|
|
{{ if eq $offset 1 }}
|
||
|
|
<a class="dropdown-item" href="{{ $e.RelPermalink }}">{{ $e.Title }}</a>
|
||
|
|
{{ end }}
|
||
|
|
{{- end -}}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<ul class="multi-column-dropdown">
|
||
|
|
{{ $pages := where (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) ".Params.leuchtturm" "==" true }}
|
||
|
|
{{ range $i, $e := $pages }}
|
||
|
|
{{ $offset := mod $i 3 | add 1 }}
|
||
|
|
{{ if eq $offset 2 }}
|
||
|
|
<a class="dropdown-item" href="{{ $e.RelPermalink }}">{{ $e.Title }}</a>
|
||
|
|
{{ end }}
|
||
|
|
{{- end -}}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<ul class="multi-column-dropdown">
|
||
|
|
{{ $pages := where (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) ".Params.leuchtturm" "==" true }}
|
||
|
|
{{ range $i, $e := $pages }}
|
||
|
|
{{ $offset := mod $i 3 | add 1 }}
|
||
|
|
{{ if eq $offset 3 }}
|
||
|
|
<a class="dropdown-item" href="{{ $e.RelPermalink }}">{{ $e.Title }}</a>
|
||
|
|
{{ end }}
|
||
|
|
{{- end -}}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="/about">Über</a>
|
||
|
|
</li>
|
||
|
|
<!--<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">Features</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">Pricing</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">About</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a class="dropdown-item" href="#">Action</a>
|
||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
||
|
|
</div>
|
||
|
|
</li>!-->
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
|