forked from ag_kommunikation/webseite
Moved navigation to separate block and fixed highlighting of active page.
Highlighting is done via color (orange) and typography (underline) on purpose to make it recognizable even if one can't see colors properly.
This commit is contained in:
Stephan
parent
58df4b29b6
commit
d940444fdc
@ -102,8 +102,10 @@ body {
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary_nav__navitem.-active .primary_nav__navlink {
|
.primary_nav__navlink.-active,
|
||||||
|
.primary_nav__sub_navlink.-active {
|
||||||
color: var(--wtf-orange);
|
color: var(--wtf-orange);
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary_nav__navitem.-last, .primary_nav__navitem.-last a {
|
.primary_nav__navitem.-last, .primary_nav__navitem.-last a {
|
||||||
@ -115,7 +117,7 @@ body {
|
|||||||
color: var(--wtf-nearly-black);
|
color: var(--wtf-nearly-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary_nav__sub_navitem .primary_nav__navlink {
|
.primary_nav__sub_navlink {
|
||||||
color: var(--wtf-nearly-white);
|
color: var(--wtf-nearly-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1559,7 +1561,8 @@ footer {
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary_nav__sub_navitem .primary_nav__navlink {
|
.primary_nav__navlink,
|
||||||
|
.primary_nav__sub_navlink {
|
||||||
color: var(--wtf-nearly-black)
|
color: var(--wtf-nearly-black)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
64
templates/blocks/navigation.html
Normal file
64
templates/blocks/navigation.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
{% block navigation %}
|
||||||
|
<nav class="header__primary_nav -logo_header">
|
||||||
|
<div class="primary_nav__toggle">
|
||||||
|
<svg viewBox="0 0 100 80" width="32" height="32">
|
||||||
|
<rect width="100" height="15"></rect>
|
||||||
|
<rect y="30" width="100" height="15"></rect>
|
||||||
|
<rect y="60" width="100" height="15"></rect>
|
||||||
|
</svg>
|
||||||
|
<p>menu</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
{% if mapping.list_childs %}
|
||||||
|
<ul class="primary_nav__sub_navlist">
|
||||||
|
{% 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' %}
|
||||||
|
{% 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 %}
|
||||||
|
{% if sub_title == 'Podcast' %}
|
||||||
|
{% 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 %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endblock %}
|
||||||
@ -24,71 +24,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="header__slim_box">
|
<div class="header__slim_box">
|
||||||
<nav class="header__primary_nav">
|
{% include "blocks/navigation.html" %}
|
||||||
<div class="primary_nav__toggle">
|
|
||||||
<svg viewBox="0 0 100 80" width="32" height="32">
|
|
||||||
<rect width="100" height="15"></rect>
|
|
||||||
<rect y="30" width="100" height="15"></rect>
|
|
||||||
<rect y="60" width="100" height="15"></rect>
|
|
||||||
</svg>
|
|
||||||
<p>menu</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="primary_nav__navlist">
|
|
||||||
{% for title, mapping in bag("navigation").items() %}
|
|
||||||
{% if mapping.visible|default(true) %}
|
|
||||||
<li class="primary_nav__navitem
|
|
||||||
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
|
|
||||||
-active
|
|
||||||
{%- endif -%}
|
|
||||||
{%- if loop.index == 1 %}
|
|
||||||
-first
|
|
||||||
{%- endif -%}
|
|
||||||
">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
|
|
||||||
{{ title }}
|
|
||||||
</a>
|
|
||||||
{% if mapping.list_childs %}
|
|
||||||
<ul class="primary_nav__sub_navlist">
|
|
||||||
{% set sub_menu = mapping['items'].items() %}
|
|
||||||
{% for sub_title, href in sub_menu %}
|
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
|
|
||||||
{{ sub_title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% if sub_title == 'Blog' %}
|
|
||||||
{% set children = site.get(href).children %}
|
|
||||||
{% for child in children %}
|
|
||||||
{% if loop.index <= 3 %}
|
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
|
|
||||||
{{ child.title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% if sub_title == 'Podcast' %}
|
|
||||||
{% set children = site.get(href).children %}
|
|
||||||
{% for child in children %}
|
|
||||||
{% if loop.index <= 3 %}
|
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
|
|
||||||
{{ child.title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<div class="slim_box__top_bar_left"></div>
|
<div class="slim_box__top_bar_left"></div>
|
||||||
<div class="slim_box__top_bar_middle"></div>
|
<div class="slim_box__top_bar_middle"></div>
|
||||||
<div class="slim_box__top_bar_right"></div>
|
<div class="slim_box__top_bar_right"></div>
|
||||||
|
|||||||
@ -24,71 +24,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="header__bg_box">
|
<div class="header__bg_box">
|
||||||
<nav class="header__primary_nav -logo_header">
|
{% include "blocks/navigation.html" %}
|
||||||
<div class="primary_nav__toggle">
|
|
||||||
<svg viewBox="0 0 100 80" width="32" height="32">
|
|
||||||
<rect width="100" height="15"></rect>
|
|
||||||
<rect y="30" width="100" height="15"></rect>
|
|
||||||
<rect y="60" width="100" height="15"></rect>
|
|
||||||
</svg>
|
|
||||||
<p>menu</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="primary_nav__navlist">
|
|
||||||
{% for title, mapping in bag("navigation").items() %}
|
|
||||||
{% if mapping.visible|default(true) %}
|
|
||||||
<li class="primary_nav__navitem
|
|
||||||
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
|
|
||||||
-active
|
|
||||||
{%- endif -%}
|
|
||||||
{%- if loop.index == 1 %}
|
|
||||||
-first
|
|
||||||
{%- endif -%}
|
|
||||||
">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
|
|
||||||
{{ title }}
|
|
||||||
</a>
|
|
||||||
{% if mapping.list_childs %}
|
|
||||||
<ul class="primary_nav__sub_navlist">
|
|
||||||
{% set sub_menu = mapping['items'].items() %}
|
|
||||||
{% for sub_title, href in sub_menu %}
|
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
|
|
||||||
{{ sub_title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% if sub_title == 'Blog' %}
|
|
||||||
{% set children = site.get(href).children %}
|
|
||||||
{% for child in children %}
|
|
||||||
{% if loop.index <= 3 %}
|
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
|
|
||||||
{{ child.title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% if sub_title == 'Podcast' %}
|
|
||||||
{% set children = site.get(href).children %}
|
|
||||||
{% for child in children %}
|
|
||||||
{% if loop.index <= 3 %}
|
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
|
|
||||||
{{ child.title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<!-- background for header box - start -->
|
<!-- background for header box - start -->
|
||||||
<div class="bg_box__top_bar_left"></div>
|
<div class="bg_box__top_bar_left"></div>
|
||||||
<div class="bg_box__top_bar_middle"></div>
|
<div class="bg_box__top_bar_middle"></div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user