Eerste versie van navigatiemenu met subitems en hamburger voor mobiele apparaten

This commit is contained in:
Michael Boelen 2023-05-12 13:57:01 +02:00
parent fdfc70c829
commit b3efa99e37
4 changed files with 200 additions and 19 deletions

View file

@ -30,6 +30,12 @@ defaultcontentlanguage = "nl"
name = "Evenementen" name = "Evenementen"
url = "/evenementen/" url = "/evenementen/"
weight = 20 weight = 20
[[menu.main]]
identifier = "evenementen-kalender"
name = "Kalender"
url = "/evenementen/kalender/"
parent = "evenementen"
weight = 21
[[menu.main]] [[menu.main]]
identifier = "lidmaatschap" identifier = "lidmaatschap"
name = "Lidmaatschap" name = "Lidmaatschap"

View file

@ -60,24 +60,169 @@ h1, h2, h3, h4, h5, strong, b {
//text-transform: uppercase; //text-transform: uppercase;
} }
header { //header {
//display: flex; // //display: flex;
//justify-content: space-between; // //justify-content: space-between;
//padding-bottom: 0.5rem; // //padding-bottom: 0.5rem;
// line-height: 2;
// padding-bottom: 1.5rem;
//}
//.header {
// padding:0;
// margin:0;
// background-color: $color-header;
// color: $color-text-inverse;
// text-align:right;
//}
//
//.header ul li:last-child {
// padding-right: 10px;
//}
.header{
background-color: $color-header;
box-shadow: 1px 1px 5px 0px grey;
position: sticky;
//top: 100px;
width: 100%;
line-height: 2; line-height: 2;
padding-bottom: 1.5rem; }
/* Nav menu */
.nav{
width: 100%;
height: 100%;
position: fixed;
background-color: $color-header;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-out;
}
.menu a {
display: block;
padding: 10px;
color: $color-text-inverse;
}
.menu a:visited {
color: $color-text-inverse;
}
.menu a:hover{
background-color: $color-header;
color: gray;
text-decoration: none;
} }
.header { /* Menu Icon */
padding:0; .hamb{
margin:0; cursor: pointer;
background-color: $color-header; float: right;
padding: 40px 20px;
}
.hamb-line {
background: white;
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hamb-line::before,
.hamb-line::after{
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
/* Sub nav */
.subnav-content {
background-color: $color-header;
color: black;
width: 100%;
z-index: 1;
padding: 10px 0 ;
display: none;
}
.subnav-content a {
color: $color-text-inverse;
text-decoration: none;
padding: 0;
margin: 10px 0;
text-align: center;
}
.subnav-content a:visited {
color: $color-text-inverse; color: $color-text-inverse;
text-align:right; }
.subnav:hover .subnav-content {
display: block;
} }
.header ul li:last-child { /* Responsiveness */
padding-right: 10px; @media (min-width: 768px) {
/* Sub nav */
.subnav-content {
padding: 8px 0;
display: none;
background-color: $color-header;
color: $color-text-inverse;
}
.header {
text-alignt: right;
}
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
width: fit-content;
background-color: transparent;
}
.menu li{
float: left;
}
.menu a,a:link,a:visited {
color: $color-text-inverse;
}
.menu a:hover {
background-color: transparent;
color: gray;
}
.hamb{
display: none;
}
} }
// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien // Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
@ -131,7 +276,7 @@ a:visited {
a:hover, a:hover,
a.heading-link { a.heading-link {
text-decoration: none text-decoration: underline;
} }
pre { pre {
@ -216,12 +361,12 @@ header ul a:first-child {
padding-left: 1rem; padding-left: 1rem;
} }
.nav { //.nav {
height: 1px; // height: 1px;
background: #000; // background: #000;
content: ''; // content: '';
max-width: 10%; // max-width: 10%;
} //}
.list li { .list li {
display: flex; display: flex;

View file

@ -6,6 +6,7 @@
<a class="skip-link" href="#main">Ga naar hoofd</a> <a class="skip-link" href="#main">Ga naar hoofd</a>
<main id="main"> <main id="main">
<div class="content"> <div class="content">
<a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
{{ partialCached "header.html" . }} {{ partialCached "header.html" . }}
<section> <section>
<!-- <h2 class="post">{{ .Title }}</h2> --> <!-- <h2 class="post">{{ .Title }}</h2> -->

View file

@ -1,3 +1,31 @@
<header class="header">
<input class="side-menu" type="checkbox" id="side-menu">
<label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
<nav class="nav">
<ul class="menu">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ if .Children }}
<li class="subnav">
<a href="{{ .URL }}">{{ .Name }}</a>
<ul class="subnav-content">
{{ range .Children }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</li>
{{ else }}
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }}
</ul>
</nav>
</header>
<!--
<header> <header>
<nav style="padding:0;width:100%;"> <nav style="padding:0;width:100%;">
<a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a> <a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
@ -13,4 +41,5 @@
</div> </div>
</nav> </nav>
</header> </header>
-->
<hr class="hr-list" style="padding: 0;margin: 0;"> <hr class="hr-list" style="padding: 0;margin: 0;">