Expanding Nav Link Box on Hover

Design help General
1

I am looking to create a nav link button that expands to reveal more nav links when it is hovered over. My site currently has a ‘more’ button which I want to reveal the four options beneath it without moving the original button (i.e. it opens towards the bottom-right, its top-left corner is fixed). In addition, it would be nice if the corner radius could be switched.

Vanilla CSS and JS is ideal, but I’m open to any means including IX/GSAP to get this working.

Thanks in advance to anyone able to help! :)

Here is my site Read-Only: LINK

2

Hi there,

To create a dropdown menu that reveals on hover, follow these steps:

  1. Create a dropdown wrapper div and set its position to relative. Place your “More” button inside this wrapper.
  2. Add a new div inside the wrapper (after the button) to contain your four nav links. Set its position to absolute, top: 100%, and initially set height to 0 to hide it.
  3. Create two hover interactions on the wrapper div:
    • Hover In: Change the dropdown content height from 0 to auto, and set overflow to visible
    • Hover Out: Return the height to 0 and set overflow to hidden

For smooth transitions, you can also add opacity changes and adjust the transition timing to create a more polished effect.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like