fix: Position des Submenüs gefixt.

Etwas Overhead im Template, dafür weniger verschwurbelte Logik.

assets/css/style.css

@@ -63,17 +63,10 @@ body {
 
 .primary_nav__toggle {
     display: none;
-    height: 3.375rem;
-    margin-left: 1rem;
 }
 
 .primary_nav__toggle svg {
-    margin: 0.25rem 0 0 0;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    position: relative;
-    left: 0;
+    padding-right: 0.25rem;
 }
 
 .primary_nav__toggle rect {
@@ -81,14 +74,19 @@ body {
 }
 
 .primary_nav__toggle p {
-    margin: 0;
-    padding: 0 0 0 0;
+    margin: 0.25rem 0 0 0;
+    padding: 0;
     position: relative;
-    right: 0.5rem;
+    left: -0.2rem;
     bottom: 0.65rem;
     color: var(--wtf-nearly-black);
 }
 
+.primary_nav__mobile_navlist {
+    display: none;
+    z-index: 16;
+}
+
 .primary_nav__navlist {
     margin: 0;
     display: flex;
@@ -105,20 +103,47 @@ body {
     font-size: 1.25rem;
 }
 
-.primary_nav__navlink.-active  {
+.primary_nav__navlink.-active,
+.primary_nav__sub_navlink.-active {
     color: var(--wtf-orange);
     text-decoration: underline;
 }
 
+.primary_nav__navitem.-last, .primary_nav__navitem.-last a {
+    margin-right: 0;
+    padding-right: 0;
+}
+
 .primary_nav__navlink {
     color: var(--wtf-nearly-black);
 }
 
-.primary_nav__navlink:hover {
-    color: var(--wtf-mid-grey);
+.primary_nav__sub_navlink {
+    color: var(--wtf-nearly-white);
     text-decoration: underline;
 }
 
+.primary_nav__sub_navlink:hover {
+    text-decoration: none;
+}
+
+.primary_nav__sub_navlist.-closed {
+    display: none;
+    z-index: 20;
+}
+
+.primary_nav__sub_navlist.-open {
+    display: block;
+    margin: 2.6rem 0 0 -0.5rem;
+    padding: 0;
+    position: absolute;
+    background-color: var(--wtf-dark-blue);
+    border-left: 2px solid var(--wtf-mid-grey);
+    border-right: 2px solid var(--wtf-mid-grey);
+    border-bottom: 2px solid var(--wtf-mid-grey);
+    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.35);
+}
+
 /*
  * Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch
  * Submenümarker aus.
@@ -135,7 +160,7 @@ body {
 }
 
 /* Malt bei vorhandenem Submenü den Pfeil */
-.primary_nav__navlist li a:first-child:nth-last-child(2):after {
+.primary_nav__navlist li span:first-child:nth-last-child(2):after {
     content: "";
     position: relative;
     top: -0.125rem;
@@ -148,6 +173,13 @@ body {
     border-right: 3px solid var(--wtf-nearly-black);
 }
 
+.primary_nav__sub_navitem {
+    margin: 0;
+    padding: 0.5rem 0.5rem;
+    list-style: none;
+    text-align: left;
+}
+
 .header__secondary_nav {
     margin: 4.5rem 0.5rem 0 0;
 }
@@ -1195,6 +1227,10 @@ footer {
         display: flex !important;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .content__inner_box {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
@@ -1210,6 +1246,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none !important;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1232,6 +1272,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none !important;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1268,6 +1312,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none !important;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1350,6 +1398,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none !important;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1418,6 +1470,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none !important;
+    }
+
     .primary_nav__navlist {
         width: 100%;
         justify-content: space-evenly;
@@ -1439,6 +1495,10 @@ footer {
         margin-right: 0.5rem;
     }
 
+    .primary_nav__sub_navlist.-open {
+        margin-top: 0.7rem;
+    }
+
     .header__claim {
         margin-top: 0.5rem;
     }
@@ -1592,6 +1652,10 @@ footer {
         margin-right: 1rem;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none !important;
+    }
+
     .primary_nav__navlist  {
         display: flex !important;
         margin-right: 1.5rem;
@@ -1601,6 +1665,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__sub_navlist.-open {
+        margin-top: 2.3rem;
+    }
+
     .content__inner_box.-logo_header {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
@@ -1782,7 +1850,7 @@ footer {
 
     .header__claim ul {
         display: flex;
-        justify-content: space-between;
+        justify-content: space-around;
         margin: 1rem;
     }
 
@@ -1804,11 +1872,20 @@ footer {
         margin: 0 0.5rem 0.5rem 0.5rem;
     }
     
-    .header__claim p, .header__sub_claim p {
+    .header__claim p {
+        font-size: 1.1rem;
+        padding-bottom: 0rem;
+    }
+    
+    .header__claim h2 {
+        font-size: 1.2rem;
+    }
+
+    .header__sub_claim p {
         font-size: 1rem;
     }
 
-    .header__claim h2, .header__sub_claim h2 {
+    .header__sub_claim h2 {
         font-size: 1.25rem;
     }
 
@@ -1876,34 +1953,59 @@ footer {
     }
 
     .primary_nav__toggle {
-        display: block;
-        margin: 2.25rem 1rem 0 0;
+        height: 4.5rem;
+        width: 5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        margin: 2.25rem 0 0 0;
     }
     
     .primary_nav__navlist {
         display: none;
+    }
+
+    .primary_nav__mobile_navlist {
+        display: none;
         position: absolute;
         top: 6.5rem;
         right: 0;
-        border-top: 2px solid var(--wtf-nearly-black);
-        border-left: 2px solid var(--wtf-nearly-black);
-        border-bottom: 2px solid var(--wtf-nearly-black);
+        border-top: 1px solid var(--wtf-grey);
+        border-left: 1px solid var(--wtf-grey);
+        border-bottom: 1px solid var(--wtf-grey);
         background-color: var(--wtf-light-grey);
+        opacity: 97%;
         box-shadow: 5px 0px 15px 5px rgba(0, 0, 0, 0.25);
     }
 
     .primary_nav__navitem {
         margin: 0;
-        padding: 1rem 1rem 1rem 1.5rem;
+        padding: 1rem 1rem 0.5rem 1.5rem;
         display: block;
     }
 
-    .primary_nav__navlink {
-        color: var(--wtf-nearly-black)
+    .primary_nav__navlink,
+    .primary_nav__sub_navlink {
+        color: var(--wtf-nearly-black);
+        text-decoration: underline;
     }
 
-    .primary_nav__navlink:hover {
+    .primary_nav__navlink:hover,
+    .primary_nav__sub_navlink:hover {
         color: var(--wtf-mid-grey);
+        text-decoration: none;
+    }
+    
+    .primary_nav__sub_navlist,
+    .primary_nav__sub_navlist.-open,
+    .primary_nav__sub_navlist.-closed {
+        display: block;
+        margin: 0.25rem 0 0.75rem 0.75rem;
+    }
+    
+    .primary_nav__sub_navitem {
+        padding: 0.25rem 0.5rem;
     }
     /* mobile nav - Ende */
 

assets/js/nav_toggle.js

@@ -1,8 +1,22 @@
 document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){
-	var nav_list = document.getElementsByClassName('primary_nav__navlist')[0]
-	if (nav_list.style.display === 'block') {
-		nav_list.style.display = 'none';
+	let mobile_nav_list = document.getElementsByClassName('primary_nav__mobile_navlist')[0]
+	if (mobile_nav_list.style.display === 'block') {
+		mobile_nav_list.style.display = 'none';
 	} else {
-		nav_list.style.display = 'block';
+		mobile_nav_list.style.display = 'block';
 	}
 });
+
+let primary_menu_items = document.getElementsByClassName('primary_nav__navitem');
+for (let i = 0; i < primary_menu_items.length; i++) {
+	primary_menu_items[i].addEventListener('click', function(event) {
+		let dropdown = event.currentTarget.children[1];
+		if (dropdown.classList.contains('-closed')) {
+			dropdown.classList.remove('-closed');
+			dropdown.classList.add('-open');
+		} else {
+			dropdown.classList.remove('-open');
+			dropdown.classList.add('-closed');
+		}
+	});
+}

databags/navigation.json

@@ -1,6 +1,7 @@
 {
   "Was wir tun": {
     "href": "/about",
+    "slug": "about",
     "visible": true,
     "list_childs": false,
     "items": {
@@ -9,8 +10,9 @@
   },
   "Was geht ab?": {
     "href": "/aktuelles",
+    "slug": "aktuelles",
     "visible": true,
-    "list_childs": false,
+    "list_childs": true,
     "items": {
       "Blog": "/blog",
       "Podcast": "/podcast"
@@ -18,11 +20,11 @@
   },
   "Mitglied werden": {
     "href": "/mitglieder",
+    "slug": "mitglieder",
     "visible": true,
-    "list_childs": false,
+    "list_childs": true,
     "items": {
-      "Satzung": "/mitglieder/satzung",
-      "Mitglied werden": "/mitglieder/beitreten"
+      "Satzung": "/mitglieder/satzung"
     }
   }
 }

templates/blocks/navigation.html

@@ -12,12 +12,63 @@
         <ul class="primary_nav__navlist">
                 {% for title, mapping in bag("navigation").items() %}
                   {% if mapping.visible|default(true) %}
-                <li class="primary_nav__navitem">
-                    <a class="primary_nav__navlink {% if this._path == mapping.href or
-                                                        this._path in mapping['items'].values() or
-                                                        title == 'Aktuelles' and
-                                                        ('blog' in this._path or 'podcast' in this._path)
-                    %}-active{% endif %}" href="{{ mapping.href|url }}">
+                    <li id="{{ mapping.slug }}" class="primary_nav__navitem">
+                        {%if not mapping.list_childs %}
+                            <a class="primary_nav__navlink 
+                                {% if this._path == mapping.href
+                                    or this._path in mapping['items'].values()
+                                -%}-active{% endif %}" href="{{ mapping.href|url }}">
+                                {{ title }}
+                            </a>
+                        {% elif mapping.list_childs %}
+                            <span class="primary_nav__navlink 
+                                {% if this._path == mapping.href
+                                    or this._path in mapping['items'].values()
+                                    or mapping.href == '/aktuelles' and ('blog' in this._path or 'podcast' in this._path)
+                                -%}-active{% endif %}">
+                                {{ title }}
+                            </span>
+                            <ul class="primary_nav__sub_navlist -closed">
+                                <li class="primary_nav__sub_navitem">
+                                    <a class="primary_nav__sub_navlink " href="{{ mapping.href|url }}">
+                                        {{ title }}
+                                    </a>
+                                </li>
+                                {% set sub_menu = mapping['items'].items() %}
+                                {% for sub_title, href in sub_menu %}
+                                    <li class="primary_nav__sub_navitem">
+                                        <a class="primary_nav__sub_navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
+                                            {{ sub_title }}
+                                        </a>
+                                    </li>
+                                    {% if sub_title == 'Blog' or sub_title == 'Podcast' %}
+                                        {% set children = site.get(href).children %}
+                                        <ul>
+                                            {% for child in children %}
+                                                {% if loop.index <= 3 %}
+                                                    <li class="primary_nav__sub_navitem">
+                                                        <a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
+                                                            {{ child.title }}
+                                                        </a>
+                                                    </li>
+                                                {% endif %}
+                                            {% endfor %}
+                                        </ul>
+                                    {% endif %}
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+            </ul>
+        </nav>
+
+        <ul class="primary_nav__mobile_navlist">
+            {% for title, mapping in bag("navigation").items() %}
+              {% if mapping.visible|default(true) %}
+                <li id="{{ mapping.slug }}" class="primary_nav__navitem">
+                    <a class="primary_nav__navlink {% if this._path == mapping.href -%}-active{% endif %}" href="{{ mapping.href|url }}">
                         {{ title }}
                     </a>
                     {% if mapping.list_childs %}
@@ -29,20 +80,9 @@
                                         {{ sub_title }}
                                     </a>
                                 </li>
-                                {% if sub_title == 'Blog' %}
-                                    {% set children = site.get(href).children %}
-                                    {% for child in children %}
-                                        {% if loop.index <= 3 %}
-                                            <li class="primary_nav__sub_navitem">
-                                                <a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
-                                                    {{ child.title }}
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                    {% endfor %}
-                                {% endif %}
-                                {% if sub_title == 'Podcast' %}
+                                {% if sub_title == 'Blog' or sub_title == 'Podcast' %}
                                     {% set children = site.get(href).children %}
+                                    <ul>
                                         {% for child in children %}
                                             {% if loop.index <= 3 %}
                                                 <li class="primary_nav__sub_navitem">
@@ -52,6 +92,7 @@
                                                 </li>
                                             {% endif %}
                                         {% endfor %}
+                                    </ul>
                                 {% endif %}
                             {% endfor %}
                         </ul>