jQuery下拉菜单过长支持滚动的二级分类导航菜单

jQuery下拉菜单过长支持滚动的二级分类导航菜单

jquery.dropdown.js是解决导航菜单下拉项若是过多的插件,我们可以采用下拉菜单滚动的方法,当鼠标的位置达到菜单一定高度,菜单会自动下拉滚动。

淘建站为您提供更多_导航菜单_下拉导航_滚动_菜单,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 470 次

下载资源

36 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

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' />");
    });
});

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/915.html
jQuery下拉菜单过长支持滚动的二级分类导航菜单 希望对你有帮助,感谢您的支持!
  • jQueryQQ商城焦点图自动切换

    jQueryQQ商城焦点图自动切换

  • jQuery后台左侧菜单导航切换子菜单

    jQuery后台左侧菜单导航切换子菜单

  • KinSlideshow焦点图切换

    KinSlideshow焦点图切换

  • Skrollr奇妙的视差滚动效果

    Skrollr奇妙的视差滚动效果

  • marquee.js演示三种不同的文字滚动效果

    marquee.js演示三种不同的文字滚动效果

  • javascript+fullPage演示9种全屏滚动

    javascript+fullPage演示9种全屏滚动

  • jQuery+fullPage.js演示12种全屏滚动

    jQuery+fullPage.js演示12种全屏滚动

  • jQuery+fullPage.js制作网易邮箱大师页面滚动效果

    jQuery+fullPage.js制作网易邮箱大师页面滚动效果

  • jQuery+fullPage.js制作网易邮箱介绍页面

    jQuery+fullPage.js制作网易邮箱介绍页面

  • jQuery+fullPage.js制作搜狐快站页面滚动效果

    jQuery+fullPage.js制作搜狐快站页面滚动效果

  • jQuery+fullPage.js制作百度百科史记

    jQuery+fullPage.js制作百度百科史记

  • jQuery+ResponsiveSlides演示5中不同的幻灯片效果

    jQuery+ResponsiveSlides演示5中不同的幻灯片效果

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2