Menu icon Foundation
how to open vertical dropdown menu on click rather than hover

Happy hols everyone!
Meanwhile...
How do I get my vertical dropdown menu to open on click, rather than hover? Sorry if this seems a dumb question, but I can't work it out from the docs.

   <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
  <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">
        <a href="index.html"><img src="img/g4040.png" /></a>
    </li>
      <li class="has-submenu">
        <a href="#">About</a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">Who we are</a></li>
            <li><a href="#">Core Values</a></li>
            <li><a href="#">etc.</a></li>
            <li><a href="#">etc.</a></li> 
          </ul>
      </li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a>
      <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li> 
            </ul></li>
      <li><a href="#">Link 4</a>
     <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li> 
            </ul></li>
      <li><a href="#">Link 5</a>
      <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li> 
            </ul></li>
    </ul>
  </div>


  
  <div class="top-bar-right">
  <!--  <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul> -->
  </div>
</div>        

         

vertical submenuhoverF6

Happy hols everyone!
Meanwhile...
How do I get my vertical dropdown menu to open on click, rather than hover? Sorry if this seems a dumb question, but I can't work it out from the docs.

   <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
  <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">
        <a href="index.html"><img src="img/g4040.png" /></a>
    </li>
      <li class="has-submenu">
        <a href="#">About</a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">Who we are</a></li>
            <li><a href="#">Core Values</a></li>
            <li><a href="#">etc.</a></li>
            <li><a href="#">etc.</a></li> 
          </ul>
      </li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a>
      <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li> 
            </ul></li>
      <li><a href="#">Link 4</a>
     <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li> 
            </ul></li>
      <li><a href="#">Link 5</a>
      <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li>
            <li><a href="#">sublink</a></li> 
            </ul></li>
    </ul>
  </div>


  
  <div class="top-bar-right">
  <!--  <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul> -->
  </div>
</div>        

         
Brian Tan almost 4 years ago

You can add data-options="disableHover:true" to your "dropdown menu" ul elements.

Max Drake almost 4 years ago

Thanks Brian! That's done the job. So my UL element now looks like this:
HTML
<ul class="dropdown vertical medium-horizontal menu" data-options="disableHover:true;clickOpen:true" data-dropdown-menu>

thanks again.

Brian Tan almost 4 years ago

clickOpen is true by default.

Max Drake almost 4 years ago

Well, I had to add it to make it work anyway.

Bruno De Bondt over 3 years ago

Same here: to get the submenus to open on click instead of hover, I had to add 'clickOpen: true' when initializing the plugin (even though that's set by default according to http://foundation.zurb.com/sites/docs/dropdown-menu.html):

var dropDownMenu = new Foundation.DropdownMenu($('.js-dropdown-menu'), {
      disableHover: true,
      clickOpen: true
    });