Menu icon Foundation
mega-menu issues with motion-ui and content dropdown

Hey, i have some problems by creating little mega menu.... i want to animate the dropdown-pane with motion ui and that it´s closable on body click...but this seems not to work...Can somebody help?

Thanks in advance

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li class="mega-menu"><a data-toggle="panel">Toggle Dropdown</a>
    <div class="mega dropdown-pane ease" id="panel" data-dropdown data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
      <div class="row">
        <div class="small-12 columns">
        <ul class="expanded menu">
          <li>
            <ul class="vertical menu">
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </li>
          <li>
            <ul class="vertical menu">
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </li>
          <li>
            <ul class="vertical menu">
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </li>
        </ul>
        </div>
      </div>
    </div>
  </li>
</ul>
            

         

mega-menumotion-uidropdownjs

Hey, i have some problems by creating little mega menu.... i want to animate the dropdown-pane with motion ui and that it´s closable on body click...but this seems not to work...Can somebody help?

Thanks in advance

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li class="mega-menu"><a data-toggle="panel">Toggle Dropdown</a>
    <div class="mega dropdown-pane ease" id="panel" data-dropdown data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
      <div class="row">
        <div class="small-12 columns">
        <ul class="expanded menu">
          <li>
            <ul class="vertical menu">
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </li>
          <li>
            <ul class="vertical menu">
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </li>
          <li>
            <ul class="vertical menu">
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </li>
        </ul>
        </div>
      </div>
    </div>
  </li>
</ul>
            

         
Alejandro almost 4 years ago

Hello there, i´m afriad i don´t have the solution to your answer, but you´ve given me the solution to my problem, make a mega-menu in F6. Can i ask you a few question, i was wondering what does it do the class "mega-menu" and "mega". Thank you in advance m8.
regards

Alejandro

Markus Lind almost 4 years ago

Hey Alejandro,

im happy the small snippet could help you.

the "mega" classes are currently just targeting classes, for custom widths. colors and so on... :-)

cheers