2 level dropdown menus in bootstrap working only with click

Question

I'm trying to force nested dropdown menu without hover. Currently, code below, shows only nested dropdown menu only on activated with hover. I want to force it only with click, so that in mobile version of website it would cause any problems. Effect that i'm trying to achieve looks like this: http://www.meanthemes.com/demo/meanmenu/demo.html

Approaches:

I tried to put dropdown-toggle inside drop-down-toggle, but the nested dropdown will not be displayed.

<div class="nav-collapse collapse">
 <ul class="nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Buildings/Land <b class="caret"></b></a>
<ul class="dropdown-menu">

  <li class="dropdown-submenu"><a tabindex="-2" href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Huron River Protection</a>
    <ul class="dropdown-menu">
      <li><a href="#"><img src="icons/green-roof_icon.png" class="icons-images">Green Roof</a></li>
      <li><a href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Porous pavement</a></li>
      <li><a href="#"><img src="icons/retention-detention_icon.png" class="icons-images">Retention/detention</a></li>
    </ul>
  </li>

   </ul>
      </li>         
</ul>
 </div>

elewinso elewinso · Accepted Answer · 2013-09-11T09:36:24

I did something similar. I create a fiddle for you :)

the HTML is very much like yours. I used jquery to identify the second level menus and open them when clicked.

     $(document).ready(function(){
     $('.dropdown .dropdown').each(function(){
         var $self = $(this);
         var handle = $self.children('[data-toggle="dropdown"]');
         $(handle).click(function(){
             var submenu = $self.children('.dropdown-menu');
             $(submenu).toggle();
             return false;
         });
     });
 });

and I had to use the following CSS on top of bootstrap so that the second level menu would open to the side.

.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
margin: 0;
padding: 0;
}

http://jsfiddle.net/elewinso/Upmx8/

I hope this helps.

2 level dropdown menus in bootstrap working only with click

1 Answers