4

I am using bootstrap for my dropdown menu. But it has a problem,

If My dropdown menu have multilevel submenu then it shows off the screen, and bottom scroll bar appear.

How do I keep my submenu inside the screen, I need a jQuery solution.

Check my Screenshot

dropdown

Here is the playground:

http://jsfiddle.net/howtoplease/svLKN/

Here is dropdown HTML

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li>
                    <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="nav-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>         
        </div><!-- /.nav-collapse -->
      </div>
  </div>
</div>
user007
  • 3,203
  • 13
  • 46
  • 77

1 Answers1

8

How about this: It checks to see if the sub menu is going to overflow and modifies it's position by the width of the sub menu so it's on the other side

$('.sub-menu').parent().hover(function() {
    var menu = $(this).find("ul");
    var menupos = $(menu).offset();

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

http://jsfiddle.net/svLKN/4/

Beno
  • 4,633
  • 1
  • 27
  • 26
  • thanks a lot:) but better user `children("ul")` than `find("ul")` if there are more deeper layers in your submenu – scythargon Oct 19 '13 at 17:16
  • `$('> .dropdown-menu',this)` might be a better filter. than `$(this).find("ul")`. Technically, it works the same as `children`, but jQuery may optimize it in the single call. – bradlis7 Feb 25 '15 at 20:03