2martens/2martens.de
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Added dynamic non-JS submenu

Browse Source 
* closes #6

Signed-off-by: Jim Martens <github@2martens.de>
This commit is contained in:
Jim Martens
2017-12-24 22:49:36 +01:00
parent 90f5f0e5f4
commit b441310087
3 changed files with 62 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
_assets/css/main.scss
View File

@ -13,8 +13,18 @@
border-bottom: 2px solid $light; border-bottom: 2px solid $light;
} }
$navbarHeight: 60px;
#submenuNavbar {
top: $navbarHeight;
}
body { body {
padding-top: 60px; padding-top: $navbarHeight;
}
body.submenu {
padding-top: 2*$navbarHeight;
} }
main { main {

52
_includes/header.html
View File

@ -2,7 +2,8 @@
<nav class="navbar navbar-expand-lg navbar-light fixed-top"> <nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container"> <div class="container">
<a class="navbar-brand" href="{{ site.baseurl }}/"> <a class="navbar-brand" href="{{ site.baseurl }}/">
<img src="/assets/images/2martensIco.svg" width="30" height="30" class="d-inline-block align-top" alt=""> <img src="/assets/images/2martensIco.svg" width="30" height="30" class="d-inline-block align-top"
alt="">
{{ site.title }} {{ site.title }}
</a> </a>
@ -15,28 +16,49 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
{% for item in site.data.header-menu.items %} {% for item in site.data.header-menu.items %}
{% if item.items %} <li class="nav-item">
<li class="nav-item dropdown"> <a class="nav-link{% if item.link == page.url %} active{% endif %}" href="{{ item.link }}">
<a class="nav-link dropdown-toggle{% if item.link == page.url %} active{% endif %}" href="{{ item.link }}" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ item.title }} {{ item.title }}
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for subitem in item.items %}
<a class="dropdown-item" href="{{ subitem.link }}">{{ subitem.title }}</a>
{% endfor %}
</div>
</li> </li>
{% else %}
<li class="nav-item">
<a class="nav-link{% if item.link == page.url %} active{% endif %}" href="{{ item.link }}">{{ item.title }}</a>
</li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
{% for item in site.data.header-menu.items %}
{% if item.items %}
{% if page.url == item.link %}
{% assign showSubmenu = true %}
{% elsif page.parent_link == item.link %}
{% assign showSubmenu = true %}
{% else %}
{% assign showSubmenu = false %}
{% endif %}
{% if showSubmenu %}
<nav id="submenuNavbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#subnavbarSupportedContent" aria-controls="subnavbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="subnavbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% for subitem in item.items %}
<li class="nav-item">
<a class="nav-link{% if subitem.link == page.url %} active{% endif %}"
href="{{ subitem.link }}">{{ subitem.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
{% endif %}
{% endif %}
{% endfor %}
</header> </header>
<div class="container my-3"> <div class="container my-3">

12
_layouts/default.html
View File

@ -3,7 +3,17 @@
{% include head.html %} {% include head.html %}
<body> {% assign showSubmenu = false %}
{% for item in site.data.header-menu.items %}
{% if item.items %}
{% if page.url == item.link %}
{% assign showSubmenu = true %}
{% elsif page.parent_link == item.link %}
{% assign showSubmenu = true %}
{% endif %}
{% endif %}
{% endfor %}
<body class="{% if showSubmenu %}submenu{% endif %}">
{% include header.html %} {% include header.html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">