assets/css/style.css

@@ -129,12 +129,12 @@ body {
     text-decoration: underline;
 }
 
-.primary_nav__sub_navlist {
+.primary_nav__sub_navlist.-closed {
     display: none;
     z-index: 20;
 }
 
-.primary_nav__navlist > li:hover > .primary_nav__sub_navlist {
+.primary_nav__sub_navlist.-open {
     display: block;
     margin: 2.6rem 0 0 -0.5rem;
     padding: 0;

assets/js/nav_toggle.js

@@ -6,3 +6,17 @@ document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('clic
 		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.firstElementChild;
+		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,6 +10,7 @@
   },
   "Was geht ab?": {
     "href": "/aktuelles",
+    "slug": "aktuelles",
     "visible": true,
     "list_childs": false,
     "items": {
@@ -18,8 +20,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">
+                    {{ title }}
                     {% if mapping.list_childs %}
-                        <ul class="primary_nav__sub_navlist">
+                        <ul class="primary_nav__sub_navlist -closed">
+                            <li>
+                                <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>
                             {% set sub_menu = mapping['items'].items() %}
                             {% for sub_title, href in sub_menu %}
                                 <li class="primary_nav__sub_navitem">