前端开发 内容:6

jquery实现网站打开/关闭侧拉菜单栏

  • 查看作者
  • 网站侧拉菜单栏可以使用animata方法让click-bar块right变为0px,从而实现菜单隐藏到显示全过程。

    引用js

    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    PS:使用前先检测网站是否有jquery.js文件,一般网站都有,如果没有必须引用上方js文件。

    js

    var clickbar = $('.click-bar'),
        buttonOn = $('.btn-on'),
        buttonOut = $('.btn-out');
    function showClickbar() {
        clickbar.animate({
            'right': 0
        });
        buttonOn.fadeOut();
        buttonOut.fadeIn();
    }
    function hideClickbar() {
        clickbar.animate({
            'right': -clickbar.width()
        });
        buttonOut.fadeOut();
        buttonOn.fadeIn();
    }
    buttonOn.on('click', showClickbar)
    buttonOut.on('click', hideClickbar)

    css

    body {
    margin:0;
    background:rgb(120,194,196);
    }
    ul {
    display:inline-block;
    list-style:none;
    width:100%;
    }
    li {
    padding:10px;
    }
    ul a {
    text-decoration:none;
    color:rgb(255,255,255);
    font-size:16px;
    font-weight:700;
    display:inline-block;
    width:100%;
    }
    ul a:hover {
    background:rgb(189,192,186);
    }
    .btn-on,.btn-out {
    border:none;
    background:rgb(110,117,164);
    width:200px;
    height:100px;
    color:rgb(255,255,255);
    font-size:16px;
    font-weight:700;
    position:absolute;
    right:10px;
    top:10px;
    }
    .btn-out {
    display:none;
    background:rgb(0,137,167);
    }
    .click-bar {
    background:rgb(110,117,164);
    width:400px;
    position:fixed;
    top:130px;
    right:-400px;
    }

    html

    <button class="btn-on">打开侧拉菜单</button>
    <button class="btn-out">关闭侧拉菜单</button>
    <div class="click-bar">
        <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>
        </ul>
    </div>


    请登录之后再进行评论

    登录
    最新评论