一款简单的jQuery制作的手机导航效果带二级菜单

文章内容

分享一款jQuery制作的手机导航效果带二级菜单？代码如下

html代码

<div class="index_header">
    <div class="sj_header">
        <div class="menu">
            <a class="menubtn">
                <img src="images/menu.png"></a></div>
    </div>
    <!--header-->
    <div id="hamburgermenu">
        <div id="firstpane" class="menu_list">
            <div class="menu_head">
                <a href="#">导航一</a></div>
            <div class="menu_head">
                导航二</div>
            <div class="menu_body">
                <a href="#">▪ 分类一</a> <a href="#">▪ 分类二</a> <a href="#">▪ 分类三</a>
            </div>
            <div class="menu_head">
                导航三</div>
            <div class="menu_body">
                <a href="#">▪ 分类一</a> <a href="#">▪ 分类二</a> <a href="#">▪ 分类三</a>
            </div>
            <div class="menu_head">
                <a href="#">导航四</a></div>
            <div class="menu_head">
                <a href="#">导航五</a></div>
        </div>
    </div>
    <div class="overlay">
    </div>
</div>

js代码

<script>
    $(function () {
        var menuwidth = 180;
        var menuspeed = 300;

        var $bdy = $('body');
        var $container = $('#pgcontainer');
        var $burger = $('#hamburgermenu');
        var negwidth = "-" + menuwidth + "px";
        var poswidth = menuwidth + "px";

        $('.menubtn').on('click', function (e) {
            if ($bdy.hasClass('openmenu')) {
                jsAnimateMenu('close');
            } else {
                jsAnimateMenu('open');
                $('#hamburgermenu').css('overflow-y', 'scroll')
            }

        });

        $('.overlay').on('click', function (e) {
            if ($bdy.hasClass('openmenu')) {
                jsAnimateMenu('close');
            }
        });

        function jsAnimateMenu(tog) {
            if (tog == 'open') {
                $bdy.addClass('openmenu');
                $container.animate({ marginRight: negwidth, marginLeft: poswidth }, menuspeed);
                $burger.animate({ width: poswidth }, menuspeed);
                $('.overlay').animate({ left: poswidth }, menuspeed);
            }

            if (tog == 'close') {
                $bdy.removeClass('openmenu');
                $container.animate({ marginRight: "0", marginLeft: "0" }, menuspeed);
                $burger.animate({ width: "0" }, menuspeed);
                $('.overlay').animate({ left: "0" }, menuspeed);
            }
        }
    });

    $(document).ready(function () {
        $("#firstpane .menu_body:eq(0)").hide();
        $("#firstpane div.menu_head").click(function () {
            $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
            $(this).siblings().removeClass("current");
        });
    });

</script>

在线演示：演示