广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
随着网站的功能越来越复杂，左侧菜单栏已经成为了几乎所有网页的标配。然而，一些设计师可能会认为菜单栏占据了网页过多的空间，降低了网页的美观性。为了解决这个问题，可以使用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，我们可以轻松添加这一功能，并使网页的美观度得到提高。希望本文对你有所帮助。
以上就是jquery 实现左侧菜单栏左右收缩的详细内容，更多请关注9543建站博客其它相关文章！
发表评论