HTML+CSS侧边栏导航! 附源码
效果展示源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>赏心悦目的侧边导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f8ff;
/* 淡蓝色背景 */
}
ul {
list-style: none;
}
nav {
position: fixed;
width: 300px;
height: 98%;
left: 6px;
background-color: #e0ffff;
/* 淡蓝色侧边栏 */
border-radius: 20px 20px 20px 0px;
}
.menus {
margin: 50px 0;
color: #333;
}
.li {
letter-spacing: 2px;
font-size: 17px;
font-weight: 600;
padding: 16px 12px;
box-sizing: border-box;
transition: 0.3s;
}
.menus li:hover {
background-color: #add8e6;
/* 浅蓝色悬停效果 */
}
.li .fa {
font-size: 20px;
width: 50px;
height: 20px;
text-align: center;
margin-left: 5px;
}
.li ul {
border-radius: 20px;
width: 0;
height: 550px;
padding: 50px 0;
background-color: #b0e0e6;
/* 浅青色子菜单背景 */
position: absolute;
top: 0;
right: 0;
overflow: hidden;
transition: 0.3s;
height: 100%;
}
.li ul li {
padding: 16px 24px;
white-space: nowrap;
transition: 0.3s;
}
.li:hover ul {
border-radius: 20px;
width: 250px;
}
.li ul li:hover {
background-color: #87cefa;
/* 更深一点的蓝色 */
}
</style>
</head>
<body>
<nav>
<ul class="menus">
<li class="li"> QQ <ul>
<li>QQ1号</li>
<li>QQ2号</li>
<li>QQ3号</li>
<li>QQ4号</li>
<li>QQ5号</li>
<li>QQ6号</li>
<li>QQ7号</li>
</ul>
</li>
<li class="li"> 探探
<ul>
<li>探探1号</li>
<li>探探2号</li>
<li>探探3号</li>
<li>探探4号</li>
<li>探探5号</li>
<li>探探6号</li>
<li>探探7号</li>
<li>探探8号</li>
<li>探探9号</li>
<li>探探10号</li>
</ul>
</li>
<li class="li">推特<ul>
<li>推特1号</li>
<li>推特2号</li>
<li>推特3号</li>
</ul>
</li>
<li class="li"> ins <ul>
<li>ins1号</li>
<li>ins2号</li>
<li>ins3号</li>
<li>ins4号</li>
<li>ins5号</li>
</ul>
</li>
<li class="li"> 电报 <ul>
<li>电报1号</li>
<li>电报2号</li>
<li>电报3号</li>
<li>电报4号</li>
<li>电报5号</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
页:
[1]