modify way of opening dropdown menu, works on safari

virto-network · Jun 19, 2024 · 93cd1c9 · 93cd1c9
1 parent 34200f0
commit 93cd1c9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/_includes/nav.liquid b/_includes/nav.liquid
@@ -65,3 +65,26 @@
 		</nav>
 	</div>
 </nav>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const menuIcon = document.getElementById('menu-icon');
+    const menuDropdown = document.getElementById('menu-dropdown');
+    const closeMenu = document.getElementById('close-menu');
+
+    menuIcon.addEventListener('click', function() {
+        menuDropdown.style.display = 'flex';
+    });
+
+    closeMenu.addEventListener('click', function() {
+        menuDropdown.style.display = 'none';
+    });
+
+    const menuLinks = menuDropdown.querySelectorAll('a');
+    menuLinks.forEach(function(link) {
+        link.addEventListener('click', function() {
+            menuDropdown.style.display = 'none';
+        });
+    });
+});
+</script>
diff --git a/css/layout.css b/css/layout.css
@@ -175,15 +175,15 @@ footer nav a {
 #menu-dropdown {
   background-color: hsla(163, 49%, 14%, 0.97);
   position: fixed;
-  top: -100%;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  transform: translateY(-100%);
+  transform: translateY(0);
   transform-origin: top center;
   transition: transform 0.7s ease-in-out;
   z-index: 999;
-  display: flex;
+  display: none;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;