From b3efa99e3706fdf2a0054d90a922608214c5312c Mon Sep 17 00:00:00 2001 From: Michael Boelen Date: Fri, 12 May 2023 13:57:01 +0200 Subject: [PATCH] Eerste versie van navigatiemenu met subitems en hamburger voor mobiele apparaten --- config.toml | 6 + themes/nluug/assets/scss/styles.scss | 183 +++++++++++++++++++--- themes/nluug/layouts/_default/baseof.html | 1 + themes/nluug/layouts/partials/header.html | 29 ++++ 4 files changed, 200 insertions(+), 19 deletions(-) diff --git a/config.toml b/config.toml index 60f2136..71926a0 100644 --- a/config.toml +++ b/config.toml @@ -30,6 +30,12 @@ defaultcontentlanguage = "nl" name = "Evenementen" url = "/evenementen/" weight = 20 + [[menu.main]] + identifier = "evenementen-kalender" + name = "Kalender" + url = "/evenementen/kalender/" + parent = "evenementen" + weight = 21 [[menu.main]] identifier = "lidmaatschap" name = "Lidmaatschap" diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss index c6b3a66..97f88ae 100644 --- a/themes/nluug/assets/scss/styles.scss +++ b/themes/nluug/assets/scss/styles.scss @@ -60,24 +60,169 @@ h1, h2, h3, h4, h5, strong, b { //text-transform: uppercase; } -header { - //display: flex; - //justify-content: space-between; - //padding-bottom: 0.5rem; +//header { +// //display: flex; +// //justify-content: space-between; +// //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; - 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 { - padding:0; - margin:0; - background-color: $color-header; +/* Menu Icon */ +.hamb{ + cursor: pointer; + 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; - text-align:right; +} +.subnav:hover .subnav-content { + display: block; } -.header ul li:last-child { - padding-right: 10px; +/* Responsiveness */ +@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 @@ -131,7 +276,7 @@ a:visited { a:hover, a.heading-link { - text-decoration: none + text-decoration: underline; } pre { @@ -216,12 +361,12 @@ header ul a:first-child { padding-left: 1rem; } -.nav { - height: 1px; - background: #000; - content: ''; - max-width: 10%; -} +//.nav { +// height: 1px; +// background: #000; +// content: ''; +// max-width: 10%; +//} .list li { display: flex; diff --git a/themes/nluug/layouts/_default/baseof.html b/themes/nluug/layouts/_default/baseof.html index de1596e..532109c 100644 --- a/themes/nluug/layouts/_default/baseof.html +++ b/themes/nluug/layouts/_default/baseof.html @@ -6,6 +6,7 @@
+ NLUUG-logo {{ partialCached "header.html" . }}
diff --git a/themes/nluug/layouts/partials/header.html b/themes/nluug/layouts/partials/header.html index d5679f1..53b6d46 100644 --- a/themes/nluug/layouts/partials/header.html +++ b/themes/nluug/layouts/partials/header.html @@ -1,3 +1,31 @@ + + +
+ + + + +
+