Menu icon Foundation
Drilldown hide submenu (resolved)

Hi everyone!

I am just getting started with F6 and I love it :)
Quick question, I am playing a bit with the drilldown JS and and I am trying to fire _hide from somewhere else and I can't manage to do this.
I have tried:

            
var activeMenu = $('.menu-name-main-menu').find('.is-drilldown-submenu.is-active');
$(activeMenu).foundation('_hide');
         

And a lot of other variant of this, but I can't find a way to make this work. If I you have any idea, I would really appreciate!

Thanks.

drilldownfoundation 6

Hi everyone!

I am just getting started with F6 and I love it :)
Quick question, I am playing a bit with the drilldown JS and and I am trying to fire _hide from somewhere else and I can't manage to do this.
I have tried:

            
var activeMenu = $('.menu-name-main-menu').find('.is-drilldown-submenu.is-active');
$(activeMenu).foundation('_hide');
         

And a lot of other variant of this, but I can't find a way to make this work. If I you have any idea, I would really appreciate!

Thanks.

Brian Tan over 3 years ago

Try this. If myDrilldown is drilldown menu container id, and activeMenu is jquery element of active submenu,

 $("#myDrilldown").foundation('_hide',activeMenu);

baroneddy over 3 years ago

Thanks for the help Brian, I still haven't been able to make it work :(

My menu html looks like this:

<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
  <div id="main-menu-drilldown">
    <div class="is-drilldown" style="height: 410.312px; width: 230px;">
      <ul class="vertical menu" data-drilldown="ynctnt-drilldown" role="menubar">
         // My menu items ...
      </ul>
    </div>
  </div>
</div>

I added a container with an ID (#main-menu-drilldown) before the menu.
It tried to call:

 var activeMenu = $('#main-menu-drilldown').find('.is-drilldown-submenu.is-active');
$("#main-menu-drilldown").foundation('_hide',activeMenu);

or

$("#main-menu-drilldown").foundation('_hideAll');

And every time I get a console error: "We're sorry, '_hide' is not an available method for this element."
It looks like I am missing something but I can't figure out what.

Thanks for the help!

Brian Tan over 3 years ago

foundation function only works on its component, in this case component with data-drilldown attribute.

<ul id="myDrilldown" class="vertical menu" data-drilldown role="menubar">

var activeMenu = $('#myDrilldown').find('.is-drilldown-submenu.is-active');
$("#myDrilldown").foundation('_hide',activeMenu);

baroneddy over 3 years ago

Awesome! That works. Thanks a lot!!

Rafi Benkual over 3 years ago

@baroneddy Be sure to mark answers as helpful :)

baroneddy over 3 years ago

Absolutely, but the post was removed for a while after I posted for a 'spam' issue :) Thanks a lot Brian!