Animated Navigation Menu

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.

Thanks for checking the component. Let me know if you have any questions. All feedback and suggestions are welcome!

Comments

[Best Codes]

This is really cool! The only thing I felt like could use some improvement was this big gap at the top and bottom:

Other than that, this is awesome! Keep up the good work!

[Alvaro Montoro]

That's going to be a tough one as it's because of the perspective. Maybe I could lift it 2rem instead of 3rem and the gap wouldn't be that visible?

[Renan Ferro]

Wow, really cool man!

[Alvaro Montoro]

Thanks!

[Tyler V. (he/him)]

This is super neat with a nice write up too!

Awesome stuff!

[Alvaro Montoro]

Thank you!

[Emmanuel Joseph]

Very cool, I like it

[Muhammad Saim]

Nice, looking awesome

[Trieu.iv]

Nice 🤙

[Alvaro Montoro]

thanks! 🙏

[Mike Earley]

Awesome. Thanks for sharing.

[mobile tricks]

That is awesome

[Andreas]

Keep it up, this is a nice animation 👏🏻

[Adi_the_Developer]

Cool Man this is amazing.

[onome blessing]

This is really awesome and neat. love everything about it.

[Alvaro Montoro]

Thanks! :)

[Mobarak Ali]

very cool!

[Niraj Narkhede]

Awesome !

[Prem Biswas]

it's very cool, I like it

[Josef Nobach]

Yeah like this a lot nicely done!