CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
mohsinali1317
mohsinali1317

Reputation: 4425

Collapsing multiple navbar bootstrap

I have followed this example http://jsfiddle.net/rDN3P/98/ to create a collapsing navbar. It is working fine as long as I have one level in my menu. The collapsing seems not to work if I have multiple level of menu.

In this example, if you open the collapsible menu and click on the second 'dropdown2' item in the menu you will know what I mean.

This structure is the issue I assume

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Dropdown2

                    <span class="caret"></span>
                </a>

              <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action sub</a></li>
              </ul>

          </li>

Upvotes: 1

Views: 370

Answers (2)

UserX
UserX

Reputation: 119

<li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#">
                Dropdown2
            </a>

          <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action sub</a></li>
          </ul>

      </li>

The nesting should be done properly I guess, with the correct classes.

Upvotes: 0

silviagreen
silviagreen

Reputation: 1729

Solved: jsfiddle

Based on this answer to add the third level menu with a little modification of the js code to close the third level menu on click:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 

    // Avoid having the menu to close when clicking
    event.stopPropagation(); 

// If a menu is already open we close it
if($(this).parent().hasClass('open')){
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
}else{
    // opening the one you clicked on
$(this).parent().addClass('open');

var menu = $(this).parent().find("ul");
var menupos = menu.offset();

if ((menupos.left + menu.width()) + 30 > $(window).width()) {
    var newpos = - menu.width();      
} else {
    var newpos = $(this).parent().width();
}
menu.css({ left:newpos });
}

});

Upvotes: 1

Related Questions