How to display whole section on click from navbar interaction

Design help Animations & Interactions
1

Hi there,

I’m having troubles with display animation of our menu. It’s on click animation for the hamburger button with delay 1000ms (so far so good) but on click it displays the text right away (not good) and the animation follows after resulting in really messy effect.

Anyone encountered this before? Any help appreciated!

I use techniques from here: https://interactions.webflow.com/click-to-show-content-video and here: https://webflow.com/blog/how-to-customize-your-hamburger-menu-in-webflow

Thanks!

J.

Here is my public share link: https://preview.webflow.com/preview/qdesigners?preview=dacc46875a8222f9d610ed428a5b34a9
(how to access public share link)

2

Overflow + Padding.

If you change the height of the container the content still remain visible - Default value: visible) + padding issue (you set height of the content to zero but add extra padding so the box still have height).
https://www.w3schools.com/cssref/pr_pos_overflow.asp

How to fix this - Open/Close animation

  1. Change .Hidden-Nav to: overflow: hidden (overwise you get weird result - the height collapse but the content still remain on the screen without white bg).
  2. Remove the padding-top/bottom!! from the .Hidden-Nav. padding gives height even to empty div (box-model) or height:0 div !! the animation should start from box of: zero height to some height- this will solve the buggy white strip delay)

Now it should work fine & smooth :slight_smile:

HTML

The html example is her (example3)

Inspect element and you see this class

.hidden-text {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #e8f3ff;
    box-shadow: inset 0 0 0 2px rgba(58, 143, 240, .28);
}
3

Thanks a lot! Problem solved.

1 Like
4

NICE!! :slight_smile: mark as solve to close this topic. Thanks