2

目前我正在使用这个超级菜单

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;

通过向左更改：-1px向左：-120px我得到了我想要的 在此处输入图像描述

然而，这一次它既不是动态的，也不是响应式的。

我想，必须计算先前菜单项的宽度并将其写入'left：？px'自动或让我们以编程方式说我不知道​​。

也许这可以通过使用这种 jquery 方法来完成。

如何找到孩子ul li a的宽度

这些也是我想要的一些例子。我只需要知道我将如何修改我的代码以便响应地改变悬停行为。

http://jsfiddle.net/jWSPz/4/ http://jsfiddle.net/jWSPz/9/

4

1 回答 1

4

首先，演示站点没有将子菜单嵌套在当前菜单项下，而是有一个单独的子菜单容器。

其次，必须有一些 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)
            });
        });
    });
});

要将其仅应用于某个子菜单，请full-width在第 2 行添加自定义类选择器（例如：）：

    $('.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>
于 2013-07-19T02:46:42.113 回答