随着网站的功能越来越复杂，左侧菜单栏已经成为了几乎所有网页的标配。然而，一些设计师可能会认为菜单栏占据了网页过多的空间，降低了网页的美观性。为了解决这个问题，可以使用jquery实现菜单栏的左右收缩功能。
本文将介绍如何利用jQuery实现左侧菜单栏左右收缩效果。
- HTML结构
首先，我们需要构建一个基本的HTML结构。代码如下：
<div class="menu">
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
<ul class="menu-list">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>这里我们创建了一个名为“menu”的div容器，里面包含了“menu-toggle”和“menu-list”两个子元素。
- CSS样式
接下来，我们需要为菜单栏添加CSS样式。代码如下：
.menu {
width: 250px;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #333;
color: #fff;
overflow-x: hidden;
}
.menu-toggle {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 24px;
text-align: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: #555;
color: #fff;
z-index: 999;
}
.menu-list {
margin-top: 50px;
padding: 0;
list-style: none;
}
.menu-list li {
padding: 10px;
}
.menu-list li a {
color: #fff;
text-decoration: none;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
}在这个CSS样式中，我们设置了菜单栏的宽度和高度，以及绝对定位的位置。然后为菜单栏的子元素添加样式，包括菜单栏的切换按钮、菜单栏列表等。
- JS代码
现在，我们需要通过jQuery来添加菜单栏的左右收缩效果。代码如下：
$(document).ready(function() {
// 默认情况下，菜单栏打开
var menuState = "open";
// 点击按钮时切换菜单栏状态
$(".menu-toggle").click(function() {
if (menuState == "open") {
$(".menu").animate({left: "-250px"}, 300);
menuState = "closed";
} else {
$(".menu").animate({left: "0px"}, 300);
menuState = "open";
}
});
});在这个JS代码中，我们定义了一个变量“menuState”，用于跟踪菜单栏的状态。每次点击菜单栏的切换按钮时，判断菜单栏的状态，然后根据不同状态进行切换。
- 完整示例
现在，我们已经完成了一个简单的左侧菜单栏左右收缩效果。我们将上述HTML、CSS和JS代码整合在一起，形成完整的示例。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现左侧菜单栏左右收缩</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.menu {
width: 250px;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #333;
color: #fff;
overflow-x: hidden;
}
.menu-toggle {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 24px;
text-align: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: #555;
color: #fff;
z-index: 999;
}
.menu-list {
margin-top: 50px;
padding: 0;
list-style: none;
}
.menu-list li {
padding: 10px;
}
.menu-list li a {
color: #fff;
text-decoration: none;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
<ul class="menu-list">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 默认情况下，菜单栏打开
var menuState = "open";
// 点击按钮时切换菜单栏状态
$(".menu-toggle").click(function() {
if (menuState == "open") {
$(".menu").animate({left: "-250px"}, 300);
menuState = "closed";
} else {
$(".menu").animate({left: "0px"}, 300);
menuState = "open";
}
});
});
</script>
</body>
</html>- 总结
以上就是实现左侧菜单栏左右收缩效果的完整步骤。通过使用jQuery，我们可以轻松添加这一功能，并使网页的美观度得到提高。希望本文对你有所帮助。
