fix: Menü in mobile und PC-Version gesplittet.
Etwas Overhead im Template, dafür weniger verschwurbelte Logik.
This commit is contained in:
parent
6307c4f728
commit
9e36de87a1
@ -82,6 +82,11 @@ body {
|
|||||||
color: var(--wtf-nearly-black);
|
color: var(--wtf-nearly-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
z-index: 16;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1222,6 +1227,10 @@ footer {
|
|||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.content__inner_box {
|
.content__inner_box {
|
||||||
margin: -0.5rem 1.5rem 0 1.5rem;
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
@ -1237,6 +1246,10 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
@ -1259,6 +1272,10 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
@ -1295,6 +1312,10 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
@ -1377,6 +1398,10 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
@ -1445,6 +1470,10 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
@ -1619,6 +1648,10 @@ footer {
|
|||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
@ -1920,9 +1953,13 @@ footer {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 2.25rem 0 0 0;
|
margin: 2.25rem 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary_nav__mobile_navlist {
|
||||||
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6.5rem;
|
top: 6.5rem;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){
|
document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){
|
||||||
let nav_list = document.getElementsByClassName('primary_nav__navlist')[0]
|
let mobile_nav_list = document.getElementsByClassName('primary_nav__mobile_navlist')[0]
|
||||||
if (nav_list.style.display === 'block') {
|
if (mobile_nav_list.style.display === 'block') {
|
||||||
nav_list.style.display = 'none';
|
mobile_nav_list.style.display = 'none';
|
||||||
} else {
|
} else {
|
||||||
nav_list.style.display = 'block';
|
mobile_nav_list.style.display = 'block';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
"href": "/aktuelles",
|
"href": "/aktuelles",
|
||||||
"slug": "aktuelles",
|
"slug": "aktuelles",
|
||||||
"visible": true,
|
"visible": true,
|
||||||
"list_childs": false,
|
"list_childs": true,
|
||||||
"items": {
|
"items": {
|
||||||
"Blog": "/blog",
|
"Blog": "/blog",
|
||||||
"Podcast": "/podcast"
|
"Podcast": "/podcast"
|
||||||
|
|||||||
@ -10,29 +10,70 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="primary_nav__navlist">
|
<ul class="primary_nav__navlist">
|
||||||
|
{% for title, mapping in bag("navigation").items() %}
|
||||||
|
{% if mapping.visible|default(true) %}
|
||||||
|
<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 this._path in mapping.href
|
||||||
|
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() %}
|
{% for title, mapping in bag("navigation").items() %}
|
||||||
{% if mapping.visible|default(true) %}
|
{% if mapping.visible|default(true) %}
|
||||||
<li id="{{ mapping.slug }}" class="primary_nav__navitem">
|
<li id="{{ mapping.slug }}" class="primary_nav__navitem">
|
||||||
{%if not mapping.list_childs %}
|
<a class="primary_nav__navlink {% if this._path == mapping.href -%}-active{% endif %}" href="{{ mapping.href|url }}">
|
||||||
<a class="primary_nav__navlink {% if this._path == mapping.href or
|
{{ title }}
|
||||||
this._path in mapping['items'].values() or
|
</a>
|
||||||
title == 'Aktuelles' and
|
{% if mapping.list_childs %}
|
||||||
('blog' in this._path or 'podcast' in this._path)
|
<ul class="primary_nav__sub_navlist">
|
||||||
%}-active{% endif %}" href="{{ mapping.href|url }}">
|
|
||||||
{{ title }}
|
|
||||||
</a>
|
|
||||||
{% elif mapping.list_childs %}
|
|
||||||
<span>{{ title }}</span>
|
|
||||||
<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() %}
|
{% set sub_menu = mapping['items'].items() %}
|
||||||
{% for sub_title, href in sub_menu %}
|
{% for sub_title, href in sub_menu %}
|
||||||
<li class="primary_nav__sub_navitem">
|
<li class="primary_nav__sub_navitem">
|
||||||
@ -40,29 +81,19 @@
|
|||||||
{{ sub_title }}
|
{{ sub_title }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% if sub_title == 'Blog' %}
|
{% if sub_title == 'Blog' or sub_title == 'Podcast' %}
|
||||||
{% set children = site.get(href).children %}
|
{% set children = site.get(href).children %}
|
||||||
{% for child in children %}
|
<ul>
|
||||||
{% if loop.index <= 3 %}
|
{% for child in children %}
|
||||||
<li class="primary_nav__sub_navitem">
|
{% if loop.index <= 3 %}
|
||||||
<a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
|
<li class="primary_nav__sub_navitem">
|
||||||
{{ child.title }}
|
<a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
|
||||||
</a>
|
{{ child.title }}
|
||||||
</li>
|
</a>
|
||||||
{% endif %}
|
</li>
|
||||||
{% endfor %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endfor %}
|
||||||
{% if sub_title == 'Podcast' %}
|
</ul>
|
||||||
{% 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 %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user