jquery 实现左侧菜单栏左右收缩
随着网站的功能越来越复杂，左侧菜单栏已经成为了几乎所有网页的标配。然而，一些设计师可能会认为菜单栏占据了网页过多的空间，降低了网页的美观性。为了解决这个问题，可以使用jQuery实现菜单栏的左右收缩功能。
本文将介绍如何利用jQuery实现左侧菜单栏左右收缩效果。
首先，我们需要构建一个基本的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样式。代码如下：
.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样式中，我们设置了菜单栏的宽度和高度，以及绝对定位的位置。然后为菜单栏的子元素添加样式，包括菜单栏的切换按钮、菜单栏列表等。
现在，我们需要通过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，这个强大的JavaScript库不仅可以控制网页中的HTML元素，也能够使网页更具交互性。下面，我们将介绍如何使用JQuery实现左侧菜单栏左右收缩，使你的网页更加动态吸引人。
1. 包含CSS代码：获取最佳显示效果
在代码起始行中，插入需要使用的CSS代码，如下所示:
html,body{
height:100%;
width:100%;
margin:0;
padding:0;
}
2. HTML代码布局：使其更具交互性
需要创建一个HTML文件并包含以下代码，以确保具有良好的交互性。
此处为主要内容，
可填充其他HTML元素
3. jQuery代码设置：使菜单左右收缩
jQuery的代码作为功能JS库，可以控制HTML元素，也可以实现左右的滑动效果。以下JQuery代码控制左右滑动：
$(document).ready(function(){
$('.toggle-btn').click(function(){
$('.sidebar').toggleClass('active');
$('.main-content').toggleClass('active');
});
});
4. CSS代码设置：完善效果
完成以上JQuery代码，此时左侧菜单可左右滑动，但还需要完善CSS样式，以确保具有更佳的交互效果。
.wrapper{
display:flex;
height:100%;
}
.sidebar{
width:240px;
height:100%;
position:fixed;
top:0;
left:0;
z-index:1;
transition:0.5s;
}
.sidebar ul{
padding:0;
margin:0;
list-style:none;
}
.sidebar ul li{
padding:15px;
font-size:20px;
}
.toggle-btn{
position:absolute;
top:10px;
right:40px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:40px;
height:30px;
}
.toggle-btn span{
height:3px;
width:100%;
background-color:grey;
margin-bottom:7px;
transition:0.5s;
}
.main-content{
margin-left:240px;
height:100%;
transition:0.5s;
}
.sidebar.active{
width:50px;
}
.sidebar.active ul li{
text-align:center;
}
.sidebar.active .toggle-btn span{
margin:0;
height:1px;
}
5. 总结
这就是JQuery实现左侧菜单栏左右收缩的方法。通过使用JQuery和HTML、CSS的组合，不仅能够动态地展现你的网页，还能为用户提供更好的体验。如果你想让你的网站更加吸引人，使用JQuery是一个非常好的选择！
