diff --git a/dynamic.js b/dynamic.js index bff9cd7..5749eb2 100644 --- 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 index 60edc70..88522de 100644 --- 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;