弹性盒版下拉菜单导航条
一、前言
利用css3中的弹性盒制作一个带有下拉菜单的导航条。
二、整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒导航条</title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
.nav{
width:800px;
margin:20px auto;
/* 开启相对定位 */
position:relative;
background-color: #a29bfd;
}
.nav .nav-content{
/* 开启弹性容器 */
display:flex;
/* 内容居中 */
text-align: center;
}
.nav li{
/* 设置增长系数 */
flex-grow:1;
}
.nav a{
/* 转换为块元素 */
display:block;
width:100%;
color:#fff;
}
.nav a:hover{
background-color:#ff00008e;
}
/* 设置倒勾 */
.nav .sign{
position:absolute;
bottom:-2px;
right:70px;
color:#07ff8b;
font:16px "微软雅黑";
/* 添加过渡 */
transition:all 0.3s;
}
/* 设置下拉菜单 */
.nav .menu {
/* 开启绝对定位 */
position:absolute;
width:100px;
height:120px;
right:52px;
background-color:#fff;
/* 设置背景阴影 */
box-shadow:0 0 2px rgba(0,0,0,.3);
/* 添加过渡 */
transition:all 0.3s;
/* 默认隐藏下拉栏 */
height:0;
overflow:hidden;
}
.nav .menu ul{
/* 开启弹性容器 */
display:flex;
height:100%;
/* 设置元素自上而下排列 */
flex-direction: column;
justify-content: space-around;
/* 设置元素水平居中 */
align-content: center;
}
/* 设置超链接 */
.nav .menu a{
display:block;
text-align: center;
color: #00b3fa;
}
/* 设置鼠标移入li,倒勾旋转 */
.nav .nav-more:hover .sign{
bottom:2px;
color:black;
transform:rotateZ(180deg);
}
/* 鼠标移入li,下拉栏显示 */
.nav .nav-more:hover .menu{
/* 使下拉菜单显示 */
height:120px;
}
.nav .nav-more .menu a:hover{
background-color:none;
color:#000;
background-color:#fc7b02;
}
</style>
</head>
<body>
<!-- 创建外部容器 -->
<div class="nav">
<ul class="nav-content">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">了解</a></li>
<li class="nav-more">
<a href="#">
更多
<!-- 创建一个倒勾 -->
<div class="sign">^</div>
<!-- 创建下拉菜单 -->
<div class="menu">
<ul class="menu-content">
<li><a href="#">王者荣耀</a></li>
<li><a href="#">英雄联盟</a></li>
<li><a href="#">和平精英</a></li>
<li><a href="#">绝地求生</a></li>
<li><a href="#">王者归来</a></li>
</ul>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
三、效果展示
示例1:
示例2:
四、总结
整体上相对来说这个练习还是比较简单的,需要注意的就是一些css样式的设计,以及处理下拉栏的隐藏和显示的一些问题。