jQuery响应式页面导航效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍jQuery响应式页面导航效果

手机效果

b1a60f67-685c-4ed4-bb84-697154885651.png
手机导航下拉效果图

主要js代码

<script>
    $(function () {
        //手机导航点击下拉事件
        $("header .icon-menu").click(function () {
            if ($(".head-right .navflex").hasClass('sjdnavhide')) {
                var iphonenav = $(".sjdnav").find("li").length + 2;
                $(".head-right .navflex").animate({ "height": (iphonenav * 40) + "px" }, 600);
                $(".head-right .navflex").removeClass('sjdnavhide');
            } else {
                $(".head-right .navflex").animate({ "height": "0px" }, 600);
                $(".head-right .navflex").addClass('sjdnavhide');
            }
        });
    }) 
</script>