amirho/expressjs.com
1
0
Fork 0
mirror of https://github.com/expressjs/expressjs.com.git synced 2026-02-21 19:41:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Eliminate layout shift in menu toggle arrow with CSS-only solution (#1935)

Browse Source 
refactor menu toggle arrow
This commit is contained in:
shubham oulkar
2025-06-06 06:50:31 +05:30
committed by GitHub
parent c98d2c441b
commit 30c053b5f1
6 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
css/style.css
View File

@@ -1130,6 +1130,19 @@ h2 a {
color: #000;
background-color: #fff;
&::after {
content: "";
display: block;
width: 0.8em;
height: 0.5em;
background-color: var(--card-bg);
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
cursor: pointer;
pointer-events: none;
transition: transform 0.2s ease-in-out;
transform: rotate(-90deg);
}
&:is(:hover, :active, :focus) {
background-color: #ebf2f5;
}
@@ -1331,10 +1344,16 @@ h2 a {
}
#menu-toggle.show {
display: block;
display: flex;
gap: 0.5rem;
align-items: center;
opacity: 1;
}
#menu-toggle.show.rotate::after {
transform: rotate(0deg);
}
#menu > li > a,
#menu ul a {
padding: 0.5rem;