jQuery解决方案,用于将Dropdown子菜单保留在屏幕内 [英] jQuery solution for keeping Dropdown submenu inside screen
本文介绍了jQuery解决方案,用于将Dropdown子菜单保留在屏幕内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在下拉菜单中使用了引导程序.但这有问题,
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.
如何将子菜单保留在屏幕内,我需要一个jQuery解决方案.
How do I keep my submenu inside the screen, I need a jQuery solution.
查看我的屏幕截图
这是游乐场:
http://jsfiddle.net/howtoplease/svLKN/
这是下拉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 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 });
}
});
这篇关于jQuery解决方案,用于将Dropdown子菜单保留在屏幕内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文