small refactor and fixed button by added empty string handling.

SzBenedek2006 · Apr 9, 2024 · 491a6e8 · 491a6e8
1 parent df9c555
commit 491a6e8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/dynamic.js b/dynamic.js
@@ -36,17 +36,19 @@ img.onload = function() {
 
 // Button
 document.addEventListener('DOMContentLoaded', function () {
-            var menuButton = document.getElementById('toggle-menu');
-            var menu = document.getElementById('menu');
-            var headerContents = document.querySelector('.header');
-
-            menuButton.addEventListener('click', function () {
-                if (menu.style.display === 'none') {
-                    menu.style.display = 'block';
-                    headerContents.style.display = 'none'; // Hide header contents
-                } else {
-                    menu.style.display = 'none';
-                    headerContents.style.display = 'block'; // Show header contents
-                }
-            });
-        });
+    var menuButton = document.getElementById('toggle-menu');
+    var menu = document.getElementById('menu');
+    var headerContents = document.querySelector('.header');
+
+    //menu.style.display = 'block'; // Initially display the menu
+
+    menuButton.addEventListener('click', function () {
+        if (menu.style.display === 'none' || menu.style.display === '') {
+            menu.style.display = 'block';
+            headerContents.style.display = 'none'; // Hide header contents
+        } else {
+            menu.style.display = 'none';
+            headerContents.style.display = 'block'; // Show header contents
+        }
+    });
+});
diff --git a/style.css b/style.css
@@ -157,7 +157,6 @@ body {
 
         .menu {
             display: none;
-
             text-align: justify;
             background-color: rgba(255, 255, 255, 0);
             padding: 20px;
@@ -166,6 +165,16 @@ body {
             animation: fadeInMenu 1s ease-in-out forwards;
         }
 
+        .menu.active {
+            display: block;
+            text-align: justify;
+            background-color: rgba(255, 255, 255, 0);
+            padding: 20px;
+            border-radius: 10px;
+            color: #000;
+            animation: fadeInMenu 1s ease-in-out backwards;
+        }
+
         .menu-entry {
             margin: 80px 10px;
             color: #fff;