Menu icon Foundation
Responsive Navigation Dropdown Animation

Hi,

I have made a small fork of the "Top Bar with Responsive Toggle and Animation" pen here:

https://codepen.io/mikehdesign/pen/wdQvPb?editors=1000

I have changed the animation to data-animate="slide-in-down slide-out-up"

Now when I trigger the responsive dropdown the rest of the site content jumps down, and the menu slides down over the title bar. When I close it it slides up, again over the title bar, and then the site content jumps down.

I am pretty new to Foundation so this may be a simple question, but how can I get the menu to:

  1. Slide down from and back up behind the title bar
  2. Cause the site content to slide down and up too rather than jumping?

Thanks for any help anyone can offer

 

Mike

Responsivemenunavigationanimation

Hi,

I have made a small fork of the "Top Bar with Responsive Toggle and Animation" pen here:

https://codepen.io/mikehdesign/pen/wdQvPb?editors=1000

I have changed the animation to data-animate="slide-in-down slide-out-up"

Now when I trigger the responsive dropdown the rest of the site content jumps down, and the menu slides down over the title bar. When I close it it slides up, again over the title bar, and then the site content jumps down.

I am pretty new to Foundation so this may be a simple question, but how can I get the menu to:

  1. Slide down from and back up behind the title bar
  2. Cause the site content to slide down and up too rather than jumping?

Thanks for any help anyone can offer

 

Mike

Eliza Molly 4 months ago

Arranging and making your menu for mobiles will maybe be the trickiest part of a custom essays writer responsive design. It is a juggling demonstration between both comprehensibility and usefulness.