Question

我正在尝试使用此菜单：非常长的下拉菜单。：[::: link :::]

菜单代码如下：

BODY：

<ul class="dropdown">
    <li>
        <a href="#">Really Tall Menu</a>
        <ul class="sub_menu">
            <li><a href="#">Artificial Turf</a></li>
            <li><a href="#">Foul Poles</a></li>
            <li><a href="#">Scoreboards</a></li>
            <li><a href="#">Shade Structures</a></li>
        </ul>
    </li>
    <li>
        <a href="#">No Menu</a>
    </li>
</ul>

CSS：

/* 
    LEVEL ONE
*/

ul.dropdown {
    position: relative;
    width: 100%;
}
ul.dropdown li {
    font-weight: bold;
    float: left;
    width: 180px;
    background: #ccc;
    position: relative;
}
ul.dropdown a:hover {
    color: #000;
}
ul.dropdown li a {
    display: block;
    padding: 20px 8px;
    color: #222;
    position: relative;
    z-index: 2000;
}
ul.dropdown li a:hover,
ul.dropdown li a.hover {
    background: #F3D673;
    position: relative;
}

/* 
    LEVEL TWO
*/

ul.dropdown ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    z-index: 1000;
}
ul.dropdown ul li {
    font-weight: normal;
    background: #f6f6f6;
    color: #000;
    border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a {
    display: block;
    background: #eee !important;
}
ul.dropdown ul li a:hover {
    display: block;
    background: #F3D673 !important;
}

Javascript / Jquery：

var maxHeight = 400;

$(function() {

    $(".dropdown > li").hover(function() {

        var $container = $(this),
            $list = $container.find("ul"),
            $anchor = $container.find("a"),
            height = $list.height() * 1.1, // make sure there is enough room at the bottom
            multiplier = height / maxHeight; // needs to move faster if list is taller

        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());

        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");

        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });

        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }

    }, function() {

        var $el = $(this);

        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({
                top: 0
            })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");

    });

    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });

});

............................................... .............................

这是一个可滚动的菜单，编码为当用户滚动或将鼠标悬停以便查看子菜单的内容时自动滚动。

我正在尝试添加子菜单＆gt;此菜单的子类别。例如，在滚动菜单时，此菜单中每个列出的项目是否都有子菜单？我总共只需要三个级别的子菜单。目前它是两个包括顶级导航..： 1. Top Nav（默认显示） 2.子菜单（当悬停在顶部导航时显示（并且可滚动）。 3.子类别（当“子菜单”中的任何菜单项被悬停或点击时应显示。

这个插件/脚本可以吗？

这是我试图做的事情，但是我的尝试无法实现......：

<ul class="dropdown">
    <li>
        <a href="#">Really Tall Menu</a>
        <ul class="sub_menu">
             <li>
                 <a href="#">Submenu Artificial tarf</a>
                 <ul class="sub_menu">
                     <li><a href="#">1</a></li>
                     <li><a href="#">2 Fencing &amp; Windscreen</a></li>
                     <li><a href="#">7 Outdoor Signs</a></li>
                     <li><a href="#">8 Padding</a></li>
                 </ul>
             </li>
             <li><a href="#">Foul Poles</a></li>
             <li><a href="#">Scoreboards</a></li>
             <li><a href="#">Shade Structures</a></li>
        </ul>
    </li>
    <li>
        <a href="#">No Menu</a>
    </li>
</ul>

也在codepen.io上找到了这个：http://codepen.io/larrygeams/pen/feoDc

有人可以提供任何帮助吗？

感谢。

如何在Long Dropdown中创建多级菜单？

0 个答案: