twitter bootstrap - jQuery solution for keeping Dropdown submenu inside screen -
i using bootstrap dropdown menu. has problem,
if dropdown menu have multilevel submenu shows off screen, , bottom scroll bar appear.
how keep submenu inside screen, need jquery solution.
check screenshot

here playground:
http://jsfiddle.net/howtoplease/svlkn/
here 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>
how this: checks see if sub menu going overflow , modifies it's position width of sub menu it's on 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 }); } });
Comments
Post a Comment