Menu icon Foundation
Animated dropdown menu

Hi

I would like to have a responsive menu, visible on mobile, which slides up/down when the toggle button is clicked.

I have a dropdown menu which is described in the documentation here.  

There is documentation for toggling effects described here

I have been googling for suggestions but cannot see how to put the two together.  There must be a way of achieving this, as I imagine this is a very common use-case.  Possibly this isn't in the current code base?  Issue here.

Any guidance appreciated 

Matt

dropdown menu toggler

Hi

I would like to have a responsive menu, visible on mobile, which slides up/down when the toggle button is clicked.

I have a dropdown menu which is described in the documentation here.  

There is documentation for toggling effects described here

I have been googling for suggestions but cannot see how to put the two together.  There must be a way of achieving this, as I imagine this is a very common use-case.  Possibly this isn't in the current code base?  Issue here.

Any guidance appreciated 

Matt

Rafi Benkual about 3 years ago

Is this what you're looking for? http://codepen.io/rafibomb/pen/rLqWdV

Matt Hegarty about 3 years ago

Hi Rafi

That is close, but I am looking for a way for the drop-down menu to slide in / slide out. (ie on click of "One" in your codepen)

There is a tutorial here on how to do it for Accordion menu, but I wondered if there was an easy way to do it with the drop-down menu (without custom css)

 

Thanks

Matt

Val Ery about 3 years ago

Hi Matt!

Quote: "(ie on click of "One" in your codepen)"

Opening / closing the menu by click - add attributes to <ul> data-disable-hover="true" data-click-open="true".

<!-- From Rafi example -->
<ul class="dropdown menu" data-dropdown-menu data-disable-hover="true" data-click-open="true">

With the animation (hinge, spin etc.) is slightly more complicated. If you are interested, can work something out :)

Matt Hegarty about 3 years ago

Thanks - but what I am looking for is for the menu to slide down / up (animated) on click, maybe with a duration of 0.4s.  This is surely a very common use-case for drop-down menus.  I don't need any more sophisticated animation such as hinge or spin.

In fact the Foundation off-canvas menu example does this (although it slides in from the left).

There is an example of what I am looking for here (using jQuery) - so perhaps it is not possible with Foundation and I have to use jQuery.