From 8209e64f10d652c854adeedab64a4ebbe0aed01e Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Tue, 25 Jun 2024 15:34:23 +0200 Subject: [PATCH] Fixed the animation --- .vscode/launch.json | 14 +++++ burger.js | 24 ++------ styles.css | 133 ++++++++++++++------------------------------ 3 files changed, 61 insertions(+), 110 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..bed90cf --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Open index.html", + "file": "c:\\Users\\lucab\\Desktop\\FOSS\\foss_alternatives\\index.html" + } + ] +} \ No newline at end of file diff --git a/burger.js b/burger.js index 839317f..12ff1ed 100644 --- a/burger.js +++ b/burger.js @@ -3,37 +3,21 @@ function toggleMenu() { const menu = document.querySelector(".menu"); - - // Toggle the 'active' class to show/hide the menu menu.classList.toggle("active"); - - // Apply animations based on the menu's visibility + + // Add event listener to close menu when clicking anywhere on the document if (menu.classList.contains("active")) { - menu.style.animation = "slideIn 0.3s forwards"; // Menu is shown here - document.addEventListener("click", closeMenu); // Event listener added to close menu + document.addEventListener("click", closeMenu); } else { - menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here - // Remove the event listener to close the menu (this line removes the event listener, not closes the menu) document.removeEventListener("click", closeMenu); - // Reset animation after it's completed - menu.addEventListener("animationend", () => { - menu.style.animation = ""; // Animation reset after hiding menu - }, { once: true }); } } function closeMenu(event) { const menu = document.querySelector(".menu"); - // Check if the click is outside the menu and not on the burger icon if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { - menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here - // Remove the event listener to close the menu (again, this line removes the event listener) + menu.classList.remove("active"); document.removeEventListener("click", closeMenu); - // After animation completes, remove 'active' class and reset animation - menu.addEventListener("animationend", function() { - menu.classList.remove("active"); // 'active' class removed after animation completes - menu.style.animation = ""; // Animation reset after hiding menu - }, { once: true }); } } diff --git a/styles.css b/styles.css index 1b70feb..cccd1e0 100644 --- a/styles.css +++ b/styles.css @@ -4,7 +4,7 @@ margin: 0; padding: 0; font-family: "Roboto", Arial, sans-serif; - transition: 3s; /* Smooth transitions */ + transition: 0.5s; /* Smooth transitions */ } /* Body styles */ @@ -28,7 +28,7 @@ header { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 0; /* Further reduce the padding */ height: auto; - z-index: 9999; + z-index: 10; /* Higher z-index to ensure it is above other elements */ } .header-content { @@ -41,7 +41,7 @@ header { justify-content: space-between; align-items: center; padding: 0 20px; /* Original padding */ - z-index: -1; + z-index: 10; } header li { @@ -53,74 +53,6 @@ header a { width: 100%; padding: 12px 0; text-align: center; /* Center align the menu items */ -} - -.project-name { - color: #ffffff; - font-size: 1.5em; /* Updated font size */ - font-weight: bold; - z-index: 9999; -} - -.burger-menu { - background: none; - border: none; - color: #ffffff; - font-size: 1.5em; /* Updated font size */ - cursor: pointer; - display: block; - padding: 0; - z-index: 9999; -} - -.menu { - display: none; - flex-direction: column; - background-color: #2c3e50; - position: absolute; - top: 100%; - left: 0; - width: 100%; /* Full width of the header */ - z-index: 999; - padding: 0; - list-style: none; - justify-content: center; /* Center items vertically */ - text-align: center; /* Center items horizontally */ - animation: slideOut 0.3s ease forwards; /* Initial animation state */ -} - -.menu.active { - display: flex; - animation: slideIn 0.3s ease forwards; /* Show animation */ -} - -.menu.closed { - animation: slideOut 0.3s ease forwards; /* Hide animation */ -} - -@keyframes slideIn { - from { - transform: translateY(-100%); - } - to { - transform: translateY(0); - } -} - -@keyframes slideOut { - from { - transform: translateY(0); - } - to { - transform: translateY(-100%); - } -} - -header li { - margin: 10px; /* Smaller margin */ -} - -header a { color: #ffffff; text-decoration: none; padding: 8px; /* Smaller padding */ @@ -133,6 +65,46 @@ header a:hover { background-color: #34495e; } +.project-name { + color: #ffffff; + font-size: 1.5em; /* Updated font size */ + font-weight: bold; + z-index: 11; /* Higher z-index to ensure it is above the menu */ +} + +.burger-menu { + background: none; + border: none; + color: #ffffff; + font-size: 1.5em; /* Updated font size */ + cursor: pointer; + display: block; + padding: 0; + z-index: 12; /* Higher z-index to ensure it is above the menu */ +} + +.menu { + display: flex; + flex-direction: column; + background-color: #2c3e50; + position: absolute; + top: -40vh; + left: 0; + width: 100%; /* Full width of the header */ + z-index: 0; /* Lower z-index than header, header content, and project name */ + padding: 0; + list-style: none; + justify-content: center; /* Center items vertically */ + text-align: center; /* Center items horizontally */ + animation: top 1s ease-in-out; /* Initial animation state */ +} + +.menu.active { + display: flex; + top: 100%; + z-index: 0; /* Lower z-index than header, header content, and project name */ +} + /* Article styles */ article { margin-bottom: 50px; @@ -221,22 +193,3 @@ nav { .folder-link:active { transform: scale(0.98); /* Slight scale down on click */ } - -/* Animation styles */ -@keyframes slideIn { - from { - transform: translateY(-100%); - } - to { - transform: translateY(0); - } -} - -@keyframes slideOut { - from { - transform: translateY(0); - } - to { - transform: translateY(-100%); - } -}