Compare commits
4 Commits
db367e8c34
...
f990e99909
Author | SHA1 | Date | |
---|---|---|---|
f990e99909 | |||
b19740d7e4 | |||
15568aeb5d | |||
a24ef62c30 |
@ -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;
|
||||
}
|
||||
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -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"
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user