mirror of
https://github.com/Vimux/Binario.git
synced 2024-11-23 22:48:35 +00:00
Add responsive JS menu
This commit is contained in:
vimux
parent
8f44cab641
commit
e92d43aaf6
6 changed files with 160 additions and 1 deletions
|
|
@ -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>
|
||||
|
|
@ -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
16
layouts/partials/menu.html
Normal 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>
|
||||
|
|
@ -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
14
static/js/menu.js
Normal 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
3
static/js/modernizr.js
Normal 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);
|
||||
Loading…
Reference in a new issue