Eerste versie van navigatiemenu met subitems en hamburger voor mobiele apparaten

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"

themes/nluug/assets/scss/styles.scss

@@ -60,24 +60,169 @@ h1, h2, h3, h4, h5, strong, b {
     //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;
-    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;
+    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;
+}
+.subnav:hover .subnav-content {
+    display: block;
+}
+
+/* Responsiveness */
+@media (min-width: 768px) {
+    /* Sub nav */
+    .subnav-content {
+        padding: 8px 0;
+        display: none;
         background-color: $color-header;
         color: $color-text-inverse;
-  text-align:right;
+    }
-}
+    .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;
+    }
 
-.header ul li:last-child {
+    .hamb{
-  padding-right: 10px;
+        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 {
+//.nav {
-    height: 1px;
+//    height: 1px;
-    background: #000;
+//    background: #000;
-    content: '';
+//    content: '';
-    max-width: 10%;
+//    max-width: 10%;
-}
+//}
 
 .list li {
     display: flex;

themes/nluug/layouts/_default/baseof.html

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

themes/nluug/layouts/partials/header.html

@@ -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>
   <nav style="padding:0;width:100%;">
     <a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
@@ -13,4 +41,5 @@
     </div>
   </nav>
 </header>
+-->
 <hr class="hr-list" style="padding: 0;margin: 0;">