jQuery左侧导航菜单_jquery iconfont-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery左侧导航菜单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
display: flex;
min-height: 100vh;
background-color: #f5f5f5;
}

/* 左侧导航栏样式 */
.sidebar {
width: 250px;
background-color: #2c3e50;
color: white;
transition: all 0.3s;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow-y: auto;
}

.sidebar-header {
padding: 20px;
background-color: #1a252f;
text-align: center;
}

.sidebar-menu {
padding: 0;
list-style: none;
}

.sidebar-menu li {
position: relative;
}

.sidebar-menu li a {
display: block;
padding: 15px 20px;
color: #b8c7ce;
text-decoration: none;
transition: all 0.3s;
border-left: 3px solid transparent;
}

.sidebar-menu li a:hover {
color: white;
background-color: #1e282c;
border-left-color: #3c8dbc;
}

.sidebar-menu li.active > a {
color: white;
background-color: #1e282c;
border-left-color: #3c8dbc;
}

.sidebar-menu .treeview-menu {
display: none;
list-style: none;
padding-left: 5px;
background-color: #1e282c;
}

.sidebar-menu .treeview-menu li a {
padding: 10px 20px 10px 35px;
color: #8aa4af;
}

.sidebar-menu .treeview.active .treeview-menu {
display: block;
}

.menu-icon {
margin-right: 10px;
}

.menu-arrow {
float: right;
transition: transform 0.3s;
}

.treeview.active > a .menu-arrow {
transform: rotate(90deg);
}

/* 主内容区域 */
.main-content {
flex: 1;
margin-left: 250px;
padding: 20px;
transition: all 0.3s;
}

.content-header {
padding: 15px 0;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}

/* 响应式设计 - 小屏幕时隐藏侧边栏 */
@media (max-width: 768px) {
.sidebar {
left: -250px;
}

.main-content {
margin-left: 0;
}

.sidebar.active {
left: 0;
}

.main-content.active {
margin-left: 250px;
}
}

/* 切换按钮样式 */
.toggle-btn {
display: none;
position: fixed;
left: 10px;
top: 10px;
z-index: 1000;
background: #2c3e50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}

@media (max-width: 768px) {
.toggle-btn {
display: block;
}
}
</style>
</head>
<body>

<div class="sidebar">
<div class="sidebar-header">
<h3>网站导航</h3>
</div>
<ul class="sidebar-menu">
<li class="active">
<a href="#">
<i class="menu-icon fa fa-dashboard"></i> 控制面板
</a>
</li>
<li class="treeview">
<a href="#">
<i class="menu-icon fa fa-users"></i> 用户管理
<span class="menu-arrow">›</span>
</a>
<ul class="treeview-menu">
<li><a href="#">用户列表</a></li>
<li><a href="#">添加用户</a></li>
<li><a href="#">用户组</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="menu-icon fa fa-shopping-cart"></i> 产品管理
<span class="menu-arrow">›</span>
</a>
<ul class="treeview-menu">
<li><a href="#">产品列表</a></li>
<li><a href="#">添加产品</a></li>
<li><a href="#">产品分类</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="menu-icon fa fa-cog"></i> 系统设置
</a>
</li>
<li>

<i class="menu-icon fa fa-external-link"></i> 外部链接
</a>
</li>
</ul>
</div>


<div class="main-content">
<button class="toggle-btn">☰</button>
<div class="content-header">
<h1>欢迎使用管理系统</h1>
</div>
<div class="content">
<p>这是一个使用jQuery实现的左侧导航菜单示例。</p>
<p>点击菜单项可以展开或折叠子菜单，在小屏幕设备上会自动隐藏侧边栏。</p>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 处理树形菜单的展开/折叠
$('.treeview > a').click(function(e) {
e.preventDefault();
var parent = $(this).parent();
var isActive = parent.hasClass('active');

// 关闭所有其他菜单
$('.treeview').not(parent).removeClass('active');
$('.treeview-menu').not(parent.find('.treeview-menu')).slideUp();

// 切换当前菜单
if (!isActive) {
parent.addClass('active');
parent.find('.treeview-menu').slideDown();
} else {
parent.removeClass('active');
parent.find('.treeview-menu').slideUp();
}
});

// 处理菜单项点击
$('.sidebar-menu li:not(.treeview) > a').click(function() {
$('.sidebar-menu li').removeClass('active');
$(this).parent().addClass('active');
});

// 响应式 - 切换按钮点击事件
$('.toggle-btn').click(function() {
$('.sidebar').toggleClass('active');
$('.main-content').toggleClass('active');
});

// 点击主内容区域关闭侧边栏（小屏幕）
$('.main-content').click(function() {
if ($(window).width() <= 768) {
if ($('.sidebar').hasClass('active')) {
$('.sidebar').removeClass('active');
$('.main-content').removeClass('active');
}
}
});
});
</script>
</body>
</html>