标签搜索

jQuery + CSS 实现侧边栏左侧滑入滑出动画

小王先森
2021-04-06 / 0 评论 / 38 阅读 / 正在检测是否收录...
/

需求

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

实现

<!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

1

评论 (0)

取消