diff options
-rw-r--r-- | layouts/partials/navbar.html | 4 | ||||
-rw-r--r-- | static/css/mero.css | 1 | ||||
-rw-r--r-- | static/js/mero.js | 24 |
3 files changed, 26 insertions, 3 deletions
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index b224a56..f514c6f 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -7,11 +7,11 @@ <a href="{{ `/` | relURL }}"><span>Home</span> </a>
</div>
<div class="menu-item dropdown border border-warning bg-dark p-2">
- <span class="dropbtn text-warning"
+ <span class="dropbtn text-warning" onclick="toggleMenu(this)"
>Sections <i class="fas fa-angle-down"></i
></span>
<div
- class="dropdown-content p-2 bg-dark2 mt-2 rounded w-auto mt-1"
+ class="dropdown-content p-2 bg-dark2 mt-2 rounded w-auto mt-1 d-none"
style="min-width: 200px;"
>
<ul class="list-unstyled">
diff --git a/static/css/mero.css b/static/css/mero.css index f5ecef6..d2052fa 100644 --- a/static/css/mero.css +++ b/static/css/mero.css @@ -50,7 +50,6 @@ a:hover { color: #a57e09 !important; } .dropdown-content { - display: none; position: absolute; white-space: nowrap; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); diff --git a/static/js/mero.js b/static/js/mero.js index 0746922..262f64a 100644 --- a/static/js/mero.js +++ b/static/js/mero.js @@ -6,3 +6,27 @@ setColors = function() { imagecaption.forEach(elem => elem.classList.add("initialism")); }; window.onload = setColors; + +let toggleMenu = function(x) { + let elem = x.nextElementSibling; + if (elem.classList.contains("d-none")) { + elem.classList.remove("d-none"); + } else { + elem.classList.add("d-none"); + } +}; +let checkClick = function() { + let menuContainer = document.querySelector(".dropdown-content"); + if ( + !menuContainer.contains(event.target) && + !document.querySelector(".dropdown").contains(event.target) + ) { + menuContainer.classList.add("d-none"); + } +}; +window.onclick = function() { + checkClick(); +}; +window.ontouchstart = function() { + checkClick(); +}; |