ag_kommunikation/webseite
6
4
Fork 5
Code Issues 19 Pull Requests 2 Projects Releases Activity

feat: WIP: DropDown via JS implementiert.

Browse Source 
Sieht noch scheiße aus, soll zum Test, ob das grundsätzlich geht aber reichen.
This commit is contained in:
muli 2024-01-21 21:42:06 +01:00
parent 15568aeb5d
commit b19740d7e4
4 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/style.css
View File

@ -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;

14
assets/js/nav_toggle.js
View File

@ -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');
}
});
}

5
databags/navigation.json
View File

@ -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"

21
templates/blocks/navigation.html
View File

@ -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">