HTML部分
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/navigation.css">
<title>Two stage navigation -- 二级导航</title>
</head>
<body>
<header>
<nav class="naviga">
<ul class="menu">
<li><a href="#">我的淘宝<b class="triangle"></b></a>
<ul class="submenu">
<li><a href="#">天宇无敌</a></li>
<li><a href="#">超级天宇</a></li>
<li><a href="#">超级天宇无敌</a></li>
</ul>
</li>
<li><a href="#">购物车<b class="triangle"></b></a>
<ul class="submenu">
<li><a href="#">2天宇无敌2</a></li>
<li><a href="#">2超级天宇2</a></li>
<li><a href="#">2超级天宇无敌2</a></li>
</ul>
</li>
<li><a href="#">收藏夹<b class="triangle"></b></a></li>
<li><a href="#">商家支持<b class="triangle"></b></a></li>
<li><a href="#">网站导航<b class="triangle"></b></a></li>
</ul>
</nav>
</header>
<i class="triangle"></i>
</body>
</html>
···
CSS部分
···
header {
width: 100%;
height: auto;
border: 1px solid #ddd;
background: #f5f5f5;
}
header .naviga {
width: 80%;
height: auto;
margin: 0 auto;
}
header .naviga .menu {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
header .naviga .menu li {
flex: 1;
width: auto;
text-align: center;
line-height: 40px;
}
header .naviga .menu li:hover {
box-sizing: border-box;
border-right: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
background: #fff;
}
header .naviga .menu li .submenu {
display: none;
position: fixed;
z-index: 2;
width: auto;
height: auto;
background: #fff;
text-align: center;
box-sizing: border-box;
border: 1px solid #ddd;
border-top: none;
}
header .naviga .menu li .submenu li {
box-sizing: border-box;
padding: 0 10px;
}
header .naviga .menu li:hover .triangle {
animation: auR 0.3s forwards;
}
header .naviga .menu li:hover .submenu {
display: flex;
justify-content: center;
flex-direction: column;
}
header .naviga .menu li:hover .submenu li {
flex: 1;
}
header .naviga .menu li .triangle {
position: relative;
top: -2px;
left: 5px;
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #000 transparent;
display: inline-block;
}
header .naviga .menu li .triangle:after {
position: absolute;
z-index: 2;
bottom: -6px;
left: -5px;
content: '';
border-width: 5px;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
@keyframes auR {
from {
transform: rotateZ(-90deg);
transform-origin: 50% 75%;
}
to {
transform: rotateZ(-180deg);
transform-origin: 50% 75%;
}
}
···
网友评论