Menu icon Foundation
Drop Down Menu Transition

I would like to add a transition to the drop down menu.

<div class="title-bar" data-responsive-toggle="main-menu" data-for="small">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Page Nav</div>
</div>

<div class="row" id="main-menu">
  <div class="link-row">
    <a href="#link" class="link">Link 1</a>
    <a href="#link" class="link">Link 2</a>
    <a href="#link" class="link">Link 3</a>
    <a href="#link" class="link">Link 4</a>
    <a href="#link" class="link">Link 5</a>
    <a href="#link" class="link">Link 6</a>
    <a href="#link" class="link">Link 7</a>
  </div>
</div>

How / where can I adjust the settings to allow this? 

 

Thanks!

Drop Down Menuresponsive togglemenu-icontransition

I would like to add a transition to the drop down menu.

<div class="title-bar" data-responsive-toggle="main-menu" data-for="small">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Page Nav</div>
</div>

<div class="row" id="main-menu">
  <div class="link-row">
    <a href="#link" class="link">Link 1</a>
    <a href="#link" class="link">Link 2</a>
    <a href="#link" class="link">Link 3</a>
    <a href="#link" class="link">Link 4</a>
    <a href="#link" class="link">Link 5</a>
    <a href="#link" class="link">Link 6</a>
    <a href="#link" class="link">Link 7</a>
  </div>
</div>

How / where can I adjust the settings to allow this? 

 

Thanks!

Rafi Benkual over 3 years ago

Looks like you have a typo. Should be 

data-hide-for="medium"

Your #main-menu needs to use the menu structure to work this way. The responsive toggle is meant to work with the top bar. The docs provide the code to do this: http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle

 

RCD over 3 years ago

Hey Rafi, I am using data-hide-for="none" because I want it shown on all screen sizes. I works fine except I would like to add a transition.

Even in the example from the link you posted, it also doesn't have a transition applied to ease in/out the effect. It just is shown or not shown, or rather display: none or display: flex (or block). I want to add a transition to this.

I don't think a transition can be applied to display, but maybe this can be done using javascript or some other css hack?