diff options
| author | Dan Allen <dan@opendevise.com> | 2017-11-18 17:09:47 -0700 |
|---|---|---|
| committer | Dan Allen <dan@opendevise.com> | 2017-11-20 16:46:38 -0700 |
| commit | 894088dece1233030ec8ea4d0fc6b66060aaa787 (patch) | |
| tree | 956768aec1fef9a6f94c970f0f226f0065f7414e /src | |
| parent | 3d4e9744028a978260ffcb5911bf3671a4cb7920 (diff) | |
| download | alpine-antora-theme-894088dece1233030ec8ea4d0fc6b66060aaa787.tar.bz2 alpine-antora-theme-894088dece1233030ec8ea4d0fc6b66060aaa787.tar.xz | |
add JavaScript for mobile navbar
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/header.css | 6 | ||||
| -rw-r--r-- | src/js/04-mobile-navbar.js | 12 |
2 files changed, 13 insertions, 5 deletions
diff --git a/src/css/header.css b/src/css/header.css index 65ce47c..d356e7b 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -80,7 +80,7 @@ body { } .navbar-burger span { - background-color: currentColor; + background-color: var(--color-navbar-text); display: block; height: 1px; left: 50%; @@ -102,10 +102,6 @@ body { margin-top: 4px; } -.navbar-burger:hover { - background-color: var(--color-navbar-bg-focus); -} - .navbar-burger.is-active span:nth-child(1) { margin-left: -5px; transform: rotate(45deg); diff --git a/src/js/04-mobile-navbar.js b/src/js/04-mobile-navbar.js new file mode 100644 index 0000000..ba5cb09 --- /dev/null +++ b/src/js/04-mobile-navbar.js @@ -0,0 +1,12 @@ +document.addEventListener('DOMContentLoaded', function () { + var navbarToggles = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0) + if (navbarToggles.length === 0) return + navbarToggles.forEach(function (el) { + el.addEventListener('click', function (e) { + e.stopPropagation() + el.classList.toggle('is-active') + document.getElementById(el.dataset.target).classList.toggle('is-active') + document.documentElement.classList.toggle('is-clipped--navbar') + }) + }) +}) |