最新消息
标签搜索
jQuery + CSS 实现侧边栏左侧滑入滑出动画
jQuery + CSS 实现侧边栏左侧滑入滑出动画
2021年04月06日 2.4k 阅读
  • 首页
  • /
  • 笔记
  • /
  • 正文
  • 需求

    点击某个图标或文字时,从左侧滑入侧边栏,再次点击滑出。

    实现

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery + CSS 实现侧边栏左侧滑入滑出</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            #sidebar {
                position: fixed;
                height: 100%;
                width: 200px;
                left: -200px;
                background: #34be56;
                z-index: 9;
            }
        </style>
    </head>
    
    <body>
        <div class="nav">显示/隐藏</nav>
            <div id="sidebar">
    
    <div>菜单1</div>
    
    <div>菜单2</div>
    
    <div>菜单3</div>
    
    <div>菜单4</div>
    
    </div>
    
    </body>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        //isHiden只是返回部件的隐藏属性,并不能表示部件当前的真实状态。
        isHiden = true;
        $(".nav").click(function () {
            if (isHiden) {
                $('#sidebar').animate({ left: '0' }).show();//菜单块向右移动
            } else {
                $('#sidebar').animate({ left: '-200px' }); //菜单块向左移动
            }
            isHiden = !isHiden;
        })
    </script>
    
    </html>

    效果

    sidebar.gif

    5

    评语 (0)

    取消