sergiodj/binario
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add responsive JS menu

Browse source
This commit is contained in:
vimux 2018-04-01 15:56:28 +03:00
parent 8f44cab641
commit e92d43aaf6
6 changed files with 160 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/footer.html
View file

@ -1,5 +1,7 @@
<footer class="footer">
<div class="footer__copyright">© {{ now.Format "2006" }} {{ .Site.Title }}. <span class="footer__copyright-credits">{{ T "footer_credits" | safeHTML }}</span></div>
</footer>
<script src="{{ "js/modernizr.js" | relURL }}"></script>
<script src="{{ "js/menu.js" | relURL }}"></script>
</body>
</html>

3
layouts/partials/header.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
<html class="h" lang="{{ .Site.LanguageCode | default "en-us" }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -19,4 +19,5 @@
<body>
<header class="header">
<a class="logo" href="/">Binario</a>
{{ partial "menu.html" . }}
</header>

16
layouts/partials/menu.html Normal file
View file

@ -0,0 +1,16 @@
<nav class="main-nav" role="navigation">
<button id="toggle" class="main-nav__btn" aria-expanded="false">
<svg class="main-nav__btn-icon icon-menu" width="18" height="18" viewBox="0 0 18 18">
<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
<path class="icon-menu__x" d="M11.55 9L18 15.45 15.45 18 9 11.55 2.55 18 0 15.45 6.45 9 0 2.55 2.55 0 9 6.45 15.45 0 18 2.55 11.55 9z"/>
</svg>
</button>
<ul id="menu" class="main-nav__list">
{{- $currentNode := . }}
{{- range sort .Site.Menus.main }}
{{- if .Name}}
<li class="main-nav__item{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} main-nav__item--active{{end}}">{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }}{{ .Name }}{{ else }}<a class="main-nav__link" href="{{ .URL }}">{{ .Name }}</a>{{end}}</li>
{{- end }}
{{- end }}
</ul>
</nav>

123
static/css/main.css
View file

@ -411,6 +411,129 @@ mark {
text-decoration: none;
}
/* Menu */
.main-menu {
display: block;
font-size: 0;
font-weight: 700;
}
.main-nav__btn {
float: right;
width: 42px;
height: 42px;
padding: 0;
font-size: 1em;
color: #000;
background-color: #f8ae00;
border: 0;
}
.main-nav__btn:focus,
.main-nav__btn:hover {
color: #000;
}
.main-nav__btn .icon-menu__burger {
display: inline;
}
.main-nav__btn .icon-menu__x {
display: none;
}
.main-nav__btn--active .icon-menu__burger {
display: none;
}
.main-nav__btn--active .icon-menu__x {
display: inline;
}
.main-nav__list {
font-size: 0;
}
.main-nav__item {
font-size: 1rem;
font-weight: 700;
border-top: 1px solid #333;
}
.main-nav__item:hover {
background-color: #444;
}
.main-nav__item--active {
padding: 10px;
}
.main-nav__item--active:hover {
background-color: transparent;
}
.main-nav__link {
display: block;
padding: 10px;
}
.main-nav__list {
padding: 0;
margin: 0;
list-style: none;
}
.classlist .main-nav__list {
display: none;
}
.classlist .main-nav__btn {
display: block;
}
.main-nav__list.main-nav__list--active {
display: block;
width: 100%;
clear: both;
background-color: #2a2a2a;
}
@media (min-width: 720px) {
.logo {
display: inline-block;
}
.logo:hover {
background-color: #444;
}
.classlist .main-nav__list {
display: block;
}
.classlist .main-nav__btn {
display: none;
}
.main-nav__btn {
display: none;
}
.main-nav {
display: inline-block;
}
.main-nav__item {
display: inline-block;
border: 0;
}
.main-nav__list.main-nav__list--active {
position: initial;
border: 0;
}
}
/* Taxonomies */
.page__title {
margin-bottom: 0;

14
static/js/menu.js Normal file
View file

@ -0,0 +1,14 @@
var toggle = document.getElementById('toggle');
var menu = document.getElementById('menu');
toggle.addEventListener('click', function () {
if (menu.classList.contains('main-nav__list--active')) {
this.setAttribute('aria-expanded', 'false');
this.classList.remove('main-nav__btn--active');
menu.classList.remove('main-nav__list--active');
} else {
menu.classList.add('main-nav__list--active');
this.classList.add('main-nav__btn--active');
this.setAttribute('aria-expanded', 'true');
}
});

3
static/js/modernizr.js Normal file
View file

@ -0,0 +1,3 @@
/* eslint-disable */
/* modernizr 3.6.0 | MIT | https://modernizr.com/download/?-classlist-setclasses */
!function(n,e,s){function o(n,e){return typeof n===e}function a(){var n,e,s,a,i,f,r;for(var c in l)if(l.hasOwnProperty(c)){if(n=[],e=l[c],e.name&&(n.push(e.name.toLowerCase()),e.options&&e.options.aliases&&e.options.aliases.length))for(s=0;s<e.options.aliases.length;s++)n.push(e.options.aliases[s].toLowerCase());for(a=o(e.fn,"function")?e.fn():e.fn,i=0;i<n.length;i++)f=n[i],r=f.split("."),1===r.length?Modernizr[r[0]]=a:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=a),t.push((a?"":"no-")+r.join("-"))}}function i(n){var e=r.className,s=Modernizr._config.classPrefix||"";if(c&&(e=e.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+s+"no-js(\\s|$)");e=e.replace(o,"$1"+s+"js$2")}Modernizr._config.enableClasses&&(e+=" "+s+n.join(" "+s),c?r.className.baseVal=e:r.className=e)}var t=[],l=[],f={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(n,e){var s=this;setTimeout(function(){e(s[n])},0)},addTest:function(n,e,s){l.push({name:n,fn:e,options:s})},addAsyncTest:function(n){l.push({name:null,fn:n})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr;var r=e.documentElement,c="svg"===r.nodeName.toLowerCase();Modernizr.addTest("classlist","classList"in r),a(),i(t),delete f.addTest,delete f.addAsyncTest;for(var u=0;u<Modernizr._q.length;u++)Modernizr._q[u]();n.Modernizr=Modernizr}(window,document);