Animated Navigation Menu

#showdev #webdev #html #css

This past weekend, I coded an interactive navigation using HTML and CSS (no JavaScript this time):

(click on Rerun at the bottom right corner if you missed the initial animation, or if you want to see it again.)

For this demo:

I tried to stick to semantic HTML and give an accessible approach (hopefully I didn't mess this part).
The initial load animation is an animation that only runs once and stays in place after that.
Uses 3D CSS to make the list elements pop up and back down.
The focus and hover state are treated equally, so both mouse and keyboard users get a similar experience.
It has styles for reduced motion that lower the animation and transition speeds, so there's not so much movement (the navigation items will still pop up, but it won't be animated).
I used the drop-shadow() filter to generate the shadow of the whole menu (independently of the shadows of the menu items).
Also used box-shadow to add inset shadows to the siblings and provide a bigger sense of depth. I was doing it with outset shadows, but I was running into some trouble, so I may have overcomplicated them a little.
I used :has() to select the siblings (previous and following) the one that is active and add some depth and shadows to those too.
It uses Font Awesome for the icons.