txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add visible animation to hamburger menu

Browse Source 
Changes to make the menu animation clearly visible:
- Added opacity transition (0 → 1) with 0.3s ease
- Changed max-height to fixed 800px for consistent timing
- Used cubic-bezier(0.4, 0, 0.2, 1) easing for natural feel
- Increased transition duration to 0.5s
- Combined max-height and opacity creates smooth expand + fade effect

The menu now smoothly grows from top-to-bottom with a visible fade-in,
making the animation much more apparent when hovering the hamburger button.
This commit is contained in:
juanatsap
2025-11-09 21:15:38 +00:00
parent 26e6ec14c0
commit 1a5ba16121
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+6 -3
View File
@@ -2032,23 +2032,26 @@ a:focus {
max-height: 0;
background: #ffffff;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
transition: max-height 0.4s ease-in-out;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
overflow-y: auto;
z-index: 99;
pointer-events: none; /* Disable pointer events when hidden */
opacity: 0;
}
/* Show menu when hovering menu itself OR when it has the hover class */
.navigation-menu:hover,
.navigation-menu.menu-hover {
max-height: calc(100vh - 50px);
max-height: 800px; /* Fixed height for consistent animation timing */
pointer-events: auto; /* Enable pointer events when visible */
opacity: 1;
}
/* Legacy class for JS compatibility - keep for backward compatibility */
.navigation-menu.menu-open {
max-height: calc(100vh - 50px);
max-height: 800px;
pointer-events: auto;
opacity: 1;
}
.menu-content {