简单的侧边折叠式侧边栏

最新推荐文章于 2023-11-08 11:43:40 发布

李浩东@

最新推荐文章于 2023-11-08 11:43:40 发布

阅读量195

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64180190/article/details/132914921

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>侧边导航栏</title>
<style>
.sidebar {
width: 300px;
height: 100%;
background-color: #e1e1e1;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
}

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

.menu-item {
padding: 10px;
}

.menu-item a {
display: block;
color: #000;
text-decoration: none;
font-weight: bold;
}

.submenu {
display: none;
list-style: none;
padding: 0;
margin: 0;
}

.submenu li {
padding: 10px;
}

.submenu li a {
display: block;
color: #000;
text-decoration: none;
}

.menu-item.active .submenu {
display: block;
}

.menu-item:hover {
background-color: #ccc;
}

.submenu li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="sidebar">
<ul class="menu">
<li class="menu-item">
首页
<ul class="submenu">
<li>我们的实力</li>
<li>我们的产品</li>
<li>购物车</li>
</ul>
</li>
<li class="menu-item">
新闻
<ul class="submenu">
<li>国际</li>
<li>国内</li>
<li>高层要闻</li>
</ul>
</li>
<li class="menu-item">
我们的宣传
<ul class="submenu">
<li>公司简介</li>
<li>公司团队</li>
<li>展望未来</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
var menuItems = document.getElementsByClassName('menu-item');

for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function() {
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('active');
}
this.classList.add('active');
});
}
</script>
</html>

李浩东@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的侧边折叠式侧边栏

我们的产品</li><li>高层要闻</li><li>公司简介</li><li>公司团队</li><li>展望未来</li><title>侧边导航栏</title><li>购物车</li><li>国际</li><li>国内
复制链接

扫一扫