Làm thế nào để thêm cuộn onhover cho menu thả xuống mà không cần thanh cuộn


8

Tôi có danh sách thả xuống rất dài ,,,, tôi muốn nó với cuộn onhover, nhưng không có thanh cuộn xin vui lòng hướng dẫn cho tôi những thay đổi tôi phải làm ......

nhập mô tả hình ảnh ở đây

Câu trả lời:


1

thay đổi topmenu.phtml thêm những cái này. nó đã làm việc với hai cấp độ.

<nav id="nav">
        <ol class="dropdown">
            <?php echo $_menu ?>
        </ol>
    </nav>

thêm bên dưới vào footer.phtmlvà xem đầu ra và cũng kiểu như bạn yêu cầu tôi đã thực hiện thay đổi trong phong cách.

 <script>
    var maxHeight = 300;
    var maxwidth 
    jQuery.noConflict();
    jQuery(function(){

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

             var jQuerycontainer = jQuery(this),
                 jQuerylist = jQuerycontainer.find("ul"),
                 jQueryanchor = jQuerycontainer.find("a"),
                 height = jQuerylist.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            
            jQuerycontainer.data("origHeight", jQuerycontainer.height());

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

            // make sure dropdown appears directly below parent list item    
            jQuerylist
                .show()
                .css({

                    paddingTop: jQuerycontainer.data("origHeight")
                });

            // don't do any animation if list shorter than max
            if (multiplier > 1) {
                jQuerycontainer
                    .css({
                        height: maxHeight,
                        overflow: "hidden",


                    })
                    .mousemove(function(e) {
                        var offset = jQuerycontainer.offset();
                        var relativeY = ((e.pageY - offset.top) * multiplier) - (jQuerycontainer.data("origHeight") * multiplier);
                        if (relativeY > jQuerycontainer.data("origHeight")) {
                            jQuerylist.css("top", -relativeY +jQuerycontainer.data("origHeight"));
                        };
                    });
            }

        }, function() {

            var jQueryel = jQuery(this);

            // put things back to normal
            jQueryel
                .height(jQuery(this).data("origHeight"))
                .find("ul")
                .css({  })
                .hide()
                .end()
                .find("a")
                .removeClass("hover");

        })});

        //Add down arrow only to menu items with submenus
        // jQuery(".nav-primary > li:has('ul')").each(function() {
        //     jQuery(this).find("a:first").append("<img src='images/down-arrow.png' />");
        // });
    </script>
    <style type="text/css">
        ol.dropdown {
        position: relative;
        width: 100%;
    }
    ol.dropdown li {
        background: none repeat scroll 0 0 #ccc;
        float: left;
        font-weight: bold;
        position: relative;
        width: 180px;
    }
    ol.dropdown a:hover {
        color: #000;
    }
    ol.dropdown li a {
        color: #222;
        display: block;
        padding: 20px 8px;
        position: relative;
        z-index: 2000;
    }
    ol.dropdown li a:hover, ol.dropdown li a.hover {
        background: none repeat scroll 0 0 #f3d673;
        position: relative;
    }
    ol.dropdown ul {
        display: none;
        left: 0;
        position: absolute;
        top: 0;
        width: 180px;
        z-index: 1000;
    }
    ol.dropdown ul li {
        background: none repeat scroll 0 0 #f6f6f6;
        border-bottom: 1px solid #ccc;
        color: #000;
        font-weight: normal;
    }
    ol.dropdown ul li a {
        background: none repeat scroll 0 0 #eee !important;
        display: block;
    }
    ol.dropdown ul li a:hover {
        background: none repeat scroll 0 0 #f3d673 !important;
        display: block;
    }

    </style>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.