点击打开侧边栏

效果

html

<div id="menu">打开菜单</div>
<div class="mobileMenu"></div>
<div class="menu">
    <ul>
        <li><a href="">测试栏目1</a></li>
        <li><a href="">测试栏目2</a></li>
        <li><a href="">测试栏目3</a></li>
        <li><a href="">测试栏目4</a></li>
        <li>测试栏目5
            <ul>
                <li><a href="">测试栏目5-1</a></li>
                <li><a href="">测试栏目5-2</a></li>
                <li><a href="">测试栏目5-3</a></li>
            </ul>
        </li>
        <li><a href="">测试栏目6</a></li>
        <li><a href="">测试栏目7</a></li>
        <li><a href="">测试栏目8</a></li>
    </ul>
</div>

css

#menu{width: 80px;height: 60px;background-color:#36AF62;color: #fff;padding: 20px;text-align: center;line-height: 60px;position: fixed;right: 0;top: 0;cursor: pointer;}
.mobileMenu{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0);transition:.13s;-webkit-transition:.13s;z-index: -1;cursor: pointer;}
.mobileMenu.mobileMenu_active{background-color: rgba(0,0,0,.6);z-index: 50;}
.menu{background-color: #333;width: 200px;height: 100%;-webkit-transform: translateX(-103%);transform: translateX(-103%);will-change: transform;flex-direction: column; pointer-events: auto; display: flex;position: fixed;left: 0;top: 0;z-index: 999;}
.menu.menu_active{-webkit-transform: none;-webkit-transition: all .13s ease-in;transform: none;transition: all .13s ease-in;}
.menu.menu_visited{-webkit-transform: translateX(-103%);-webkit-transition: all .13s ease-out;transform: translateX(-103%);transition: all .13s ease-out;}
.menu li{text-align: center;color: #fff;border-bottom: 1px solid #444;line-height: 3em;cursor: pointer;}
.menu li a{display: block;color: #fff;text-decoration: none;}
.menu li a:hover{color: #36AF62;}
.menu li ul{display: none;}
.menu li.current{background-color: #36AF62;}
.menu li.current ul{background-color: #222;}

jq

<script>
$(function(){
    $('#menu').bind('click',function(){
        $('.menu').removeClass('menu_visited');
        $('.mobileMenu').addClass('mobileMenu_active');
        $('.menu').addClass('menu_active');
    });
    $('.mobileMenu').bind('click',function(){
        $('.menu').addClass('menu_visited');
        $('.menu').removeClass('menu_active');
        $('.mobileMenu').removeClass('mobileMenu_active');
    });

    //二级菜单
    $('.menu>ul>li').bind('click',function(){
        var judge = $(this).hasClass('current');
        if(judge==false){
            $(this).find('ul').slideDown(130);
            $(this).find('ul').parents().addClass('current');
        }else{
            $(this).find('ul').parents().removeClass('current');
            $(this).find('ul').slideUp(130);
        }
    })
})
</script>

 

转载于:https://www.cnblogs.com/gxsyj/p/5944824.html