js to replace css hover menu because iOS

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();
+};