请用html css JavaScript写一个好看的报表导航栏页面 导航栏在左侧 导航项目可以展开收起 并配有相匹配的图标
<!DOCTYPE html>
<html>
<head>
<title>报表导航栏页面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
background-color: #2C3E50;
color: #fff;
width: 250px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li {
padding: 10px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.sidebar li:hover {
background-color: #34495E;
}
.sidebar li.active {
background-color: #34495E;
}
.sidebar li i {
margin-right: 10px;
}
.sidebar .submenu {
display: none;
}
.sidebar .submenu li {
padding-left: 30px;
}
.sidebar .submenu li.active {
background-color: #4A647B;
}
.content {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li class="active"><i class="fas fa-chart-bar"></i>报表1</li>
<li><i class="fas fa-chart-line"></i>报表2<i class="fas fa-caret-down" style="float: right;"></i>
<ul class="submenu">
<li><i class="fas fa-chart-pie"></i>子报表1</li>
<li><i class="fas fa-chart-area"></i>子报表2</li>
<li><i class="fas fa-chart-bar"></i>子报表3</li>
</ul>
</li>
<li><i class="fas fa-chart-pie"></i>报表3</li>
<li><i class="fas fa-chart-area"></i>报表4</li>
<li><i class="fas fa-table"></i>报表5</li>
</ul>
</div>
<div class="content">
<h1>报表1</h1>
<p>这是报表1的内容</p>
</div>
</div>
<pre><code><script>
let menuItems = document.querySelectorAll('.sidebar li');
menuItems.forEach((item) => {
item.addEventListener('click', (event) => {
let submenu = item.querySelector('.submenu');
if (submenu) {
submenu.classList.toggle('active');
}
menuItems.forEach((menuItem) => {
menuItem.classList.remove('active');
});
item.classList.add('active');
});
});
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/emOl 著作权归作者所有。请勿转载和采集!