From e92d43aaf67e2d4df46c5c524f039c5179a09096 Mon Sep 17 00:00:00 2001 From: vimux Date: Sun, 1 Apr 2018 15:56:28 +0300 Subject: [PATCH] Add responsive JS menu --- layouts/partials/footer.html | 2 + layouts/partials/header.html | 3 +- layouts/partials/menu.html | 16 +++++ static/css/main.css | 123 +++++++++++++++++++++++++++++++++++ static/js/menu.js | 14 ++++ static/js/modernizr.js | 3 + 6 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 layouts/partials/menu.html create mode 100644 static/js/menu.js create mode 100644 static/js/modernizr.js diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 26dee5a..9872008 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,7 @@ + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ea1faf6..4fe71ad 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,5 +1,5 @@ - + @@ -19,4 +19,5 @@
+ {{ partial "menu.html" . }}
\ No newline at end of file diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html new file mode 100644 index 0000000..8531f3d --- /dev/null +++ b/layouts/partials/menu.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index 37009a9..134883b 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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; diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 0000000..12bb40f --- /dev/null +++ b/static/js/menu.js @@ -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'); + } +}); diff --git a/static/js/modernizr.js b/static/js/modernizr.js new file mode 100644 index 0000000..ca7d1d9 --- /dev/null +++ b/static/js/modernizr.js @@ -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