Simplified nav nesting

(cherry picked from commit eeb3f342b17a744d0c2b2f0360359fa3276f8abd)
This commit is contained in:
Silvio Giebl 2019-07-21 14:36:51 +02:00
parent 418cf1d640
commit ee8b901bcb
2 changed files with 41 additions and 44 deletions

View File

@ -1,40 +1,38 @@
<nav role="navigation" aria-label="Main navigation"> <ul class="navigation-list">
<ul class="navigation-list"> {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
{%- assign pages_list = site.html_pages | sort:"nav_order" -%} {%- for node in pages_list -%}
{%- for node in pages_list -%} {%- unless node.nav_exclude -%}
{%- unless node.nav_exclude -%} {%- if node.parent == nil -%}
{%- if node.parent == nil -%} <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
<li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}"> {%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- if page.parent == node.title or page.grand_parent == node.title -%} {%- assign first_level_url = node.url | absolute_url -%}
{%- assign first_level_url = node.url | absolute_url -%} {%- endif -%}
{%- endif -%} <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a> {%- if node.has_children -%}
{%- if node.has_children -%} {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
{%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%} <ul class="navigation-list-child-list ">
<ul class="navigation-list-child-list "> {%- for child in children_list -%}
{%- for child in children_list -%} <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}"> {%- if page.url == child.url or page.parent == child.title -%}
{%- if page.url == child.url or page.parent == child.title -%} {%- assign second_level_url = child.url | absolute_url -%}
{%- assign second_level_url = child.url | absolute_url -%} {%- endif -%}
{%- endif -%} <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a> {%- if child.has_children -%}
{%- if child.has_children -%} {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
{%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%} <ul class="navigation-list-child-list">
<ul class="navigation-list-child-list"> {%- for grand_child in grand_children_list -%}
{%- for grand_child in grand_children_list -%} <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}"> <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a> </li>
</li> {%- endfor -%}
{%- endfor -%} </ul>
</ul> {%- endif -%}
{%- endif -%} </li>
</li> {%- endfor -%}
{%- endfor -%} </ul>
</ul> {%- endif -%}
{%- endif -%} </li>
</li> {%- endif -%}
{%- endif -%} {%- endunless -%}
{%- endunless -%} {%- endfor -%}
{%- endfor -%} </ul>
</ul>
</nav>

View File

@ -4,7 +4,7 @@ layout: table_wrappers
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}"> <html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %} {% include head.html %}
<body> <body>
@ -14,10 +14,9 @@ layout: table_wrappers
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a> <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
<button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button> <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
</div> </div>
<nav role="navigation" aria-label="Main navigation" class="navigation main-nav js-main-nav">
<div class="navigation main-nav js-main-nav">
{% include nav.html %} {% include nav.html %}
</div> </nav>
<footer class="site-footer"> <footer class="site-footer">
<p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p> <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer> </footer>