jq右侧划出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>右侧划出</title>
    <style>
.menu-mobile { position: fixed; right: -200px; width: 260px; height: 100%; top: 0; z-index: 10; text-align: left; }
.menu-mobile.menu-open { right: 0px; }
.menu-wrap { position: absolute; top: 0; left: 60px; background: #1a1a1a; width: 200px; height: 100%; }
.menu-close { cursor: pointer; display: block; position: absolute; font-size: 14px; color: #808080; width: 40px; height: 40px; line-height: 40px; top: 20px; right: 5px; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.menu-close:hover { color: #ffffff; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.body-push-toright { left: 200px; }
.body-push-toleft { left: -200px; }
.menu-mobile { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
#menuToggle { position: absolute; top: 20px; left: 0; z-index: 11; display: block; text-align: center; font-size: 14px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; cursor: pointer; background: rgba(0, 0, 0, 0.25); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#menuToggle:hover { color: #ffffff; background: rgba(0, 0, 0, 0.2); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.menu-wrap ul li { list-style: none; color: #fff; }
    </style>
</head>

<body>
    <nav class="menu-mobile" id="menu-mobile">
        <div class="menu-wrap">
            <i class="menu-close">close</i>
            <ul>
                <li><span>111</span></li>
                <li><span>222</span></li>
                <li><span>333</span></li>
            </ul>
        </div>
        <div id="menuToggle"><i>22</i></div>
    </nav>

    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</body>
<script>
    $('#menuToggle, .menu-close').on('click', function() {
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toleft');
        $('#menu-mobile').toggleClass('menu-open');
    });
</script>
</body>

</html>

 

posted @ 2017-11-01 22:27  CorderBob  阅读(165)  评论(0编辑  收藏  举报