DEV Community

Cover image for Animated Navigation Menu
Alvaro Montoro
Alvaro Montoro

Posted on

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!

Top comments (24)

Collapse
 
best_codes profile image
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:

Image description

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

Collapse
 
alvaromontoro profile image
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?

Collapse
 
renancferro profile image
Renan Ferro

Wow, really cool man!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

This is super neat with a nice write up too!

Awesome stuff!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thank you!

Collapse
 
mobarakali profile image
Mobarak Ali

very cool!

Collapse
 
emmanuelj profile image
Emmanuel Joseph

Very cool, I like it

Collapse
 
muhammadsaim profile image
Muhammad Saim

Nice, looking awesome

Collapse
 
livetvchannels profile image
Trieu.iv

Nice 🤙

Collapse
 
alvaromontoro profile image
Alvaro Montoro

thanks! 🙏

Collapse
 
mike_earley_2ac31f69e25a7 profile image
Mike Earley

Awesome. Thanks for sharing.

Collapse
 
adi_the_developer profile image
Adi_the_Developer

Cool Man this is amazing.

Collapse
 
mobiletric5043 profile image
mobile tricks

That is awesome

Collapse
 
devmount profile image
Andreas

Keep it up, this is a nice animation 👏🏻

Collapse
 
blessing0024 profile image
onome blessing

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

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks! :)

Collapse
 
nnnirajn profile image
Niraj Narkhede

Awesome !

Collapse
 
miguelrodriguezp99 profile image
Miguel

how cool!

Collapse
 
prembiswas profile image
Prem Biswas

it's very cool, I like it