隨著網站的功能越來越複雜，左側選單列已經成為了幾乎所有網頁的標配。然而，一些設計師可能會認為選單列佔據了網頁過多的空間，降低了網頁的美觀。為了解決這個問題，可以使用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，我們可以輕鬆地添加這項功能，並使網頁的美觀度得到提升。希望本文對你有幫助。
以上是jquery 實現左側選單列左右收縮的詳細內容。更多資訊請關注PHP中文網其他相關文章！
