需求
点击某个图标或文字时,从左侧滑入侧边栏,再次点击滑出。
实现
<!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>
评语 (0)