feat: replace menu opacity hack with proper overlay
- Add #menu-overlay div (fixed, full screen, z-index below menu) - Overlay fades in/out via opacity+visibility transition (cursor: pointer) - Click on overlay closes the menu - Remove opacity: 0.1 hack on main/footer/etc. when menu-open Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ca17be69be
commit
da2abad099
4 changed files with 27 additions and 7 deletions
|
|
@ -75,16 +75,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
#menu-overlay{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: calc(var(--z-header) - 2);
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity .3s ease-in, visibility .3s ease-in;
|
||||
}
|
||||
|
||||
body.menu-open{
|
||||
|
||||
#site-menu{
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
#menu-toggle{
|
||||
.open{ display: none; }
|
||||
.close{ display: block!important; }
|
||||
}
|
||||
|
||||
|
||||
#menu-overlay{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue