dfx.sk/dfx-jekyll-mdl
1
0
Fork 0
Code Issues Releases Activity

New Header Type

Browse source 
Create a config for the type of the header used in the site, if the
header type is drawer then a sidebar is loaded
else use a simple material nav
This commit is contained in:
Oscar Cortez 2015-07-14 12:10:34 -06:00
parent aa439b98d3
commit c0ee41733f
7 changed files with 122 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
_includes/header.html
View file

@ -37,7 +37,7 @@
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">{{ site.title }}</span>
<span class="mdl-layout-title"><a href="#">{{ site.title }}</a></span>
<nav class="mdl-navigation">
{% for page in site.pages %}

39
_includes/header_fixed.html Normal file
View file

@ -0,0 +1,39 @@
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp" />
</div>
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"><a href="{{ site.url }}">{{ site.title }}</a></span>
<nav class="mdl-navigation">
{% for page in site.pages %}
{% if page.title %}
<a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endfor %}
</nav>
</div>