目前我正在使用这个大型菜单
http://demo.shymarkets.com/codecanyon/mega/model-1/css/index.html
无论悬停位置如何,我都需要一个全宽下拉菜单。
首先,让我向您展示我将鼠标悬停在下拉菜单项上的内容。
如您所见,当我将鼠标悬停在'4 COLS' 上时,它并没有覆盖整个容器。左侧的下拉菜单丢失。
我希望它是全宽的,无论悬停位置如何。
我通过更改 custom.css 文件中的值来实现这一点。
http://demo.shymarkets.com/codecanyon/mega/model-1/css/css/custom.css
/* drop-down menu */
.dropdown-menu {
position: absolute;
top: 100%;
**left: -1px;**
z-index: 1000;
display: none;
float: left;
通过将 left: -1px 更改为 left: -120px 我得到了我想要的
但是,这一次它既不是动态的,也不是响应式的。
我想,前面的菜单项的宽度必须计算出来并写入'left: ? px' 自动或者让我们以编程方式说,我不知道。
也许可以通过使用这种 jquery 方法来完成。
这些也是我想要的一些例子。我只需要知道如何修改我的代码以便响应地更改悬停行为。
最佳答案
首先,演示站点没有将子菜单嵌套在当前菜单项下,而是有一个单独的子菜单容器。
其次,必须使用一些 JS,因为您的页面是响应式的,而且子菜单嵌套在菜单项中。
如果您想继续,请将此 JS jQuery 片段粘贴到您的页面中(可能并不完美,因为我是即时编码的,并且无法在您的页面上测试它)
$(function() {
$('.nav').on('mouseover', '.dropdown', function() {
// Get width of .navbar-inner
var w = $('.navbar-inner').width();
// Add 20px width due to padding gon .navbar-inner
w += 20;
$('.nav .dropdown-menu').each(function() {
// Get relative offset of parent
var o = $(this).parents('.dropdown').position().left;
// Add relative offset of .nav due to 20px padding on .navbar-inner +1px for border
o += 21;
// Set styles for .dropdown-menu
$(this).css({
width: w,
left: -o // shift dropdown menu left (negative-sign)
});
});
});
});
要将其仅应用于某个子菜单,请在第 2 行添加自定义类选择器(例如:全 Angular
):
$('.nav').on('mouseover', '.dropdown.full-width', function() {
将第 7 行更改为:
$('.full-width .dropdown-menu').each(function() {
将自定义类应用到您的菜单项:
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th-large"></i>
关于jquery - 无论悬停位置如何,全宽下拉菜单 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17736527/