feat: DropDown jetzt mit mehr hübsch.

Sieht noch scheiße aus, soll zum Test, ob das grundsätzlich geht aber reichen.

assets/css/style.css

@@ -81,10 +81,10 @@ body {
 }
 
 .primary_nav__toggle p {
-    margin: 0;
-    padding: 0 0 0 0;
+    margin: 0.5rem 0 0 0;
+    padding: 0;
     position: relative;
-    right: 0.5rem;
+    left: -0.2rem;
     bottom: 0.65rem;
     color: var(--wtf-nearly-black);
 }
@@ -105,20 +105,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 +162,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 +175,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;
 }

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]
+	let nav_list = document.getElementsByClassName('primary_nav__navlist')[0]
 	if (nav_list.style.display === 'block') {
 		nav_list.style.display = 'none';
 	} else {
 		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,12 +1,14 @@
 {
   "Was wir tun": {
     "href": "/about",
+    "slug": "about",
     "visible": true,
     "list_childs": false,
     "items": {}
   },
   "Was geht ab?": {
     "href": "/aktuelles",
+    "slug": "aktuelles",
     "visible": true,
     "list_childs": false,
     "items": {
@@ -16,8 +18,9 @@
   },
   "Mitglied werden": {
     "href": "/mitglieder",
+    "slug": "mitglieder",
     "visible": true,
-    "list_childs": false,
+    "list_childs": true,
     "items": {
       "Satzung": "/mitglieder/satzung",
       "Mitglied werden": "/mitglieder/beitreten"

templates/blocks/navigation.html

@@ -12,16 +12,19 @@
         <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 }}">
-                        {{ title }}
-                    </a>
+                <li id="{{ mapping.slug }}" class="primary_nav__navitem">
+                    <span>{{ title }}</span>
                     {% if mapping.list_childs %}
-                        <ul class="primary_nav__sub_navlist">
+                        <ul class="primary_nav__sub_navlist -closed">
+                            <li class="primary_nav__sub_navitem">
+                                <a class="primary_nav__sub_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 }}">
+                                    {{ title }}
+                                </a>
+                            </li>
                             {% set sub_menu = mapping['items'].items() %}
                             {% for sub_title, href in sub_menu %}
                                 <li class="primary_nav__sub_navitem">