如何使twitter引导程序子菜单在左侧打开
how to make twitter bootstrap submenu to open on the left side?
我试图在下拉菜单中创建twitter引导子菜单,但我遇到了一个问题:我在页面的右上角有下拉菜单,而该菜单还有一个子菜单。然而,当子菜单打开时,它不适合窗口,并且向右移动太多,所以用户只能看到第一个字母。如何使子菜单不向右打开,而是向左打开?
如果我理解这一点,bootstrap就为这种情况提供了一个CSS类。将"向右拉动"添加到菜单"ul":
<ul class="dropdown-menu pull-right">
最终的结果是,菜单选项显示为右对齐,与它们下拉的按钮对齐。
最简单的方法是将pull-left
类添加到dropdown-submenu
中
<li class="dropdown-submenu pull-left">
jsfiddle:演示
.dropdown-submenu > .dropdown-menu
具有left: 100%;
。所以,若要打开左侧的子菜单,请将这些设置覆盖到左侧的负位置。例如CCD_ 5。现在,您将在左侧获得子菜单,您可以调整其他设置以获得完美的预览。
这是DEMO
编辑:OP的问题和我的答案来自2012年8月。同时,Bootstrap改变了,所以现在你有了。向左拉。当时,我的回答是正确的。现在你不需要手动设置css,你有了.pull-left类。
编辑2:演示不起作用,因为引导程序更改了他们的URL。只需更改jsfiddle中的外部资源,并用新资源替换它们。
如果您使用bootstrap v4,有一种新的方法可以做到这一点。
您应该在.dropdown-menu
元素上使用.dropdown-menu-right
。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
链接到代码:https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-项目
完成任务的正确方法是:
/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }
我创建了一个javascript函数,用于查看他右侧是否有足够的空间。如果有,他会在右边显示,否则他会在左边显示
测试地点:
- Firefox(mac)
- 合唱(mac)
- Safari(mac)
Javascript:
$(document).ready(function(){
//little fix for the poisition.
var newPos = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
$(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });
$(".fixed-menu .dropdown-submenu").mouseover(function() {
var submenuPos = $(this).offset().left + 325;
var windowPos = $(window).width();
var oldPos = $(this).offset().left + $(this).width();
var newPos = $(this).offset().left - $(this).width();
if( submenuPos > windowPos ){
$(this).find('ul').offset({ "left": newPos });
} else {
$(this).find('ul').offset({ "left": oldPos });
}
});
});
因为我不想在我创建的每个菜单项上都添加这个修复程序。将固定菜单放在ul:上
<ul class="dropdown-menu fixed-menu">
我希望这对你有用。
ps。safari和chrome中的一个小错误,第一次悬停会把它放在左边的mutch,如果我修复了它,它会更新这篇文章。
如果只有一个级别并且使用bootstrap 3,则将pull-right
添加到ul
元素
<ul class="dropdown-menu pull-right" role="menu">
实际上,如果您可以浮动dropdown
包装器,我发现它就像将navbar-right
添加到dropdown
一样简单。
这看起来像作弊,因为它不在导航栏中,但它对我来说很好。
<div class="dropdown navbar-right">
...
</div>
然后,您可以直接在dropdown
中使用pull-left
进一步自定义浮动。。。
<div class="dropdown pull-left navbar-right">
...
</div>
或者作为它的包装。。。
<div class="pull-left">
<div class="dropdown navbar-right">
...
</div>
</div>
如果你使用的是LESS CSS,我写了一个小的mixin来移动带有连接箭头的下拉列表:
.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) { // mixin to shift the dropdown menu
left: @num-pixels;
&:before { left: -@num-pixels + @arrow-position; } // triangle outline
&:after { left: -@num-pixels + @arrow-position + 1px; } // triangle internal
}
例如,要移动id为dropdown-menu-x
的.dropdown-menu
,可以执行以下操作:
#dropdown-menu-x {
.dropdown-menu-shift( -100px );
}
我创建了一个javascript函数,用于查看他右侧是否有足够的空间。如果有,他会在右边展示,否则他会在左边展示。同样,如果它在右侧有足够的空间,它就会显示右侧。这是一个循环。。。
$(document).ready(function () {
$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');
if (screenWidth > 767) {
$(".dropdown-submenu").hover(function () {
var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
var newPosition = $(this).offset().left - $(this).find('ul').width();
var windowPosition = $(window).width();
var oldPosition = $(this).offset().left + $(this).width();
//document.title = dropdownPosition;
if (dropdownPosition > windowPosition) {
$(this).find('ul').offset({ "left": newPosition });
} else {
$(this).find('ul').offset({ "left": oldPosition });
}
});
}
});
您使用的是最新版本的引导程序吗?我已经改编了流体布局示例中的html,如下所示。我添加了一个下拉列表,并通过添加pull-right
类将其放置在最右侧。当鼠标悬停在下拉菜单上时,它会自动向左拖动,并且不会隐藏任何内容——所有菜单文本都可见。我没有使用任何自定义css。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-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>
</ul>
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
你唯一要做的就是
<ul style='left:-100%'>
要在右侧显示的菜单的。
- 如何使下拉菜单向上滑动
- 通过单击同一图标使菜单出现和消失
- 如何使Jquery编码的动态下拉菜单与PHP GET变量协调工作
- 使自动完成可搜索下拉菜单don'我不想在点击搜索时显示列表
- 如何使twitter引导程序子菜单在左侧打开
- 使用vue路由器,我如何才能使菜单选择的样式
- 如何使活动菜单项具有突出显示样式
- 试图弄清楚如何使汉堡菜单在打开后保持静止
- 使悬停菜单适用于移动设备的最佳实践方法是什么?
- WordPress切换菜单 - 使菜单在当前页面上保持打开状态
- 如何使下拉菜单在一定时间后消失 JavaScript.
- 如何使我的下拉菜单显示/对齐
- 如何隐藏当前选定的选项,使其在打开下拉菜单时不显示
- 下拉菜单、CSS、HTML和JavaScript:JavaScript使菜单跳转,无法正常工作
- 如何使wordpress管理菜单默认折叠
- 使按钮立即打开菜单
- 如何使菜单容器在悬停两个元素以外的所有元素时隐藏
- 如何在下拉菜单中使背景颜色为白色
- 使下拉菜单在悬停时显示,并显示超时
- 自定义WordPress管理菜单:如何使编辑器可编辑