Improved navigation: folding, vsual feedback, optimization for mobile

(cherry picked from commit db50f282bab1e98397cc7434a811b8b7da2fe6dc)
This commit is contained in:
Silvio Giebl
2019-08-10 20:53:59 +02:00
parent 0a8138a6e0
commit 0ebbe4bb4e
6 changed files with 88 additions and 55 deletions

View File

@@ -1,5 +1,5 @@
<ul class="nav-list">
{%- assign pages_list = site.html_pages | sort:"nav_order" -%}
{%- assign pages_list = site.html_pages | sort: "nav_order" -%}
{%- for node in pages_list -%}
{%- unless node.nav_exclude -%}
{%- if node.parent == nil -%}
@@ -7,19 +7,25 @@
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | absolute_url -%}
{%- endif -%}
{%- if node.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%}
{%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
<ul class="nav-list-child-list ">
{%- assign children_list = site.html_pages | where: "parent", node.title | sort: "nav_order" -%}
<ul class="nav-list">
{%- for child in children_list -%}
<li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | absolute_url -%}
{%- endif -%}
{%- if child.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%}
{%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
<ul class="nav-list-child-list">
{%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort: "nav_order" -%}
<ul class="nav-list">
{%- for grand_child in grand_children_list -%}
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>