前端主界面左侧菜单美观的模板代码
时间: 2023-10-03 18:03:20 浏览: 42
以下是一个简单的左侧菜单美观的模板代码,你可以根据自己的需求进行修改和扩展。
HTML代码:
```
<div class="sidebar">
<header>
<h2>Dashboard</h2>
</header>
<ul class="menu">
<li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-user"></i>Profile</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>Messages</a></li>
<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
<li><a href="#"><i class="fa fa-sign-out"></i>Logout</a></li>
</ul>
</div>
```
CSS代码:
```
.sidebar {
background-color: #f5f5f5;
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 250px;
}
.sidebar header {
background-color: #333;
color: #fff;
padding: 20px;
}
.sidebar header h2 {
margin: 0;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #eee;
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
color: #333;
display: block;
padding: 15px 20px;
}
.menu li.active a {
background-color: #fff;
color: #333;
}
.menu li a i {
margin-right: 10px;
}
```
这段代码使用了Font Awesome图标库,你需要在HTML文件中引用它:
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
```
该代码实现了一个包含标题和菜单的左侧栏界面,菜单项可以通过添加或删除li元素来进行扩展或收缩。