Jump to content


Animating a menu from a menu bar

Recommended Posts

Morning all!

I'm trying to get my menu items to look like they're sliding down from the menu itself.

I've a couple of problems though:

1: I don't know how to deal with the items being visible behind the menu as they slide in. I thought about having a menu wrapper the same color as the background for it to slide behind, but the contents are positioned absolutely to each item, meaning I don't think I can get a z-index lower anyway

2: I tried animating height instead, but couldn't get it to look very good, it's not quite the look I'm after, and it also suffers from looking like it's fading in as well

Does anyone have any suggestions on how to achieve this sort of look? Or alternatively how to make it look good in a more simplistic way?


*edit: I guess I could use the menu wrapper idea and place the contents divs completely outside of any other container, then manually find the position of each item and place the contents relative to that, but that seems very fiddly for what I'm trying to achieve!

See the Pen BadPJPm?editors=1011 by nwoodward (@nwoodward) on CodePen

Link to comment
Share on other sites

Hey Nick!


Sure - you just need to pop each of those dropdowns into a container with overflow hidden on.

Like so 

See the Pen KKvBYKX by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Hi Cassie!

Ugh, I've no idea why I thought to use a wrapper round the menu, but not round the items themselves 😄

Am going to blame the tiredness. Thanks a lot!

Link to comment
Share on other sites

Another set of eyes is always helpful! 👀


Glad I could help.

Link to comment
Share on other sites


Not wanting to take advantage... but... 😊

How would you deal with a box-shadow on the element that scrolls in? My actual nav bar has that, and it's an interesting problem - on the container (obviously) doesn't work, and the container masks the element scrolling in... so that wouldn't work either...

I guess I could try to make the container a couple of pixels larger than element? Just wanted to double check as the element's dimensions are dynamic, so it's probably more work than I think it is (no change there) 😄

*edit: ohhhhh, maybe a margin?
**edit: Yeah, that worked 😊

  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.