histausse/typst-web-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add animations to nav-menu

Browse source
This commit is contained in:
Jean-Marie 'Histausse' Mineau 2026-03-18 22:34:12 +01:00
parent bd489f4944
commit 49c9b373d6
Signed by: histausse
GPG key ID: B66AEEDA9B645AD2
1 changed files with 43 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

47
lib/nav_menu.typ
View file

@ -46,14 +46,29 @@
) = { ) = {
```raw-css ```raw-css
body:has(#nav-menu-toggle:checked) #icon-nav-menu { display: none; } body:has(#nav-menu-toggle:checked) #icon-nav-menu { display: none; }
body:has(#nav-menu-toggle:checked) #icon-nav-menu-close { display: block; } body:has(#nav-menu-toggle:checked) #icon-nav-menu-close { display: flex; }
body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu { display: block; } body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu { display: flex; }
body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu-close { display: none; } body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu-close { display: none; }
#nav-menu-toggle-label { #nav-menu-toggle-label {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:has(input:focus-visible) icon-container {
outline: 2px solid var(--color-button-focus);
}
&:hover icon-container {
box-shadow: inset 0px 0px 0.4em 0px var(--color-button-shadow);
cursor: pointer;
}
icon-container {
padding: 0.2em;
border-radius: 0.5em;
justify-content: center;
align-items: center;
}
input { input {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
@ -81,16 +96,40 @@
#let nav-menu(body) = { #let nav-menu(body) = {
```raw-css ```raw-css
body:has(#nav-menu-toggle:not(:checked)) nav-menu { body:has(#nav-menu-toggle:not(:checked)) nav-menu {
display: none; /*display: none;*/
/* visibility: hidden + max-height: 0 ~= display: none
*/
visibility: hidden;
opacity: 0;
max-height: 0;
} }
nav-menu { nav-menu {
display: block;
border-top: solid 1px var(--color-border); border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border); border-bottom: solid 1px var(--color-border);
text-align: center; text-align: center;
font-size: 1.25em; font-size: 1.25em;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
max-height: 100%;
visibility: visible;
@starting-style {
opacity: 0;
max-height: 0;
}
/* Uses visibility instead of diplay for animation because Firefox
* preferes making slopeware instead of fixing this bug:
* https://bugzilla.mozilla.org/show_bug.cgi?id=1882408
*/
transition:
opacity 0.5s ease-in,
/*display 0.5s,*/
visibility 0.5s,
max-height 0.5s ease-out;
transition-behavior: allow-discrete;
ul { ul {
list-style: none; list-style: none;