Home >Web Front-end >CSS Tutorial >Pure css3 navigation
Pure css3 navigation
- 羽Original
- 2017-10-08 12:55:321237browse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.MenuItem{list-style: none;float: left;display: block;}
.MenuItem a{color:beige;background: #000;}
a, .MenuItemChildItem>a {
float: left;
color: #fff;
padding: 10px 0px 10px 0px;
text-align: center;
font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
cursor: pointer;
width: 170px;
}
.MenuItem>a:hover {
background-color: #252525;
}
.MenuItem:first-child>a {
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}
.MenuItem:hover #MenuMark {
width: 100%;
}
#MenuItemChild {
margin: 0;
visibility:hidden;
padding: 0;
width: 100%;
float: left;
}
#MenuItemChild>li>a {
background-color: #333;
}
.MenuItemChildItem {
list-style: none;
color: #fff;
-webkit-perspective: 300px;
-moz-perspective: 300px;
-ms-perspective: 300px;
-o-perspective: 300px;
perspective: 300px;
}
.MenuItemChildItem>a {
border-bottom: 1px solid #222222;
border-top: 1px solid #555555;
-webkit-transform: rotateY(90deg);
transition-duration: 0.5s;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
opacity:0;
}
.MenuItem:hover #MenuItemChild{
visibility:visible;
}
.MenuItemChildItem>a:hover {
background-color: #252525 !important;
}
.MenuItem:hover #MenuItemChild>li:nth-child(1)>a {
opacity: 1;
-webkit-transform: rotateY(0deg);
}
.MenuItem:hover #MenuItemChild>li:nth-child(2)>a {
opacity: 1;
transition-delay: 0.2s;
-webkit-transform: rotateY(0deg);
}
.MenuItem:hover #MenuItemChild>li:nth-child(3)>a {
opacity: 1;
transition-delay: 0.4s;
-webkit-transform: rotateY(0deg);
}
.MenuItem:hover #MenuItemChild>li:nth-child(4)>a {
opacity: 1;
transition-delay: 0.5s;
-webkit-transform: rotateY(0deg);
}
.MenuItem:hover #MenuItemChild>li:nth-child(5)>a {
opacity: 1;
transition-delay: 0.6s;
-webkit-transform: rotateY(0deg);
}
.MenuItem:hover #MenuItemChild>li:nth-child(6)>a {
opacity: 1;
transition-delay: 0.8s;
-webkit-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul>
<li><a>菜单1</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单1-1</a></li>
<li><a>菜单1-2</a></li>
<li><a>菜单1-3</a></li>
<li><a>菜单1-4</a></li>
<li><a>菜单1-5</a></li>
<li><a>菜单1-6</a></li>
</ul>
</li>
<li><a>菜单2</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单2-1</a></li>
<li><a>菜单2-2</a></li>
<li><a>菜单2-3</a></li>
<li><a>菜单2-4</a></li>
<li><a>菜单2-5</a></li>
<li><a>菜单2-6</a></li>
</ul>
</li>
<li><a>菜单3</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单3-1</a></li>
<li><a>菜单3-2</a></li>
<li><a>菜单3-3</a></li>
<li><a>菜单3-4</a></li>
<li><a>菜单3-5</a></li>
<li><a>菜单3-6</a></li>
</ul>
</li>
<li><a>菜单4</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单4-1</a></li>
<li><a>菜单4-2</a></li>
<li><a>菜单4-3</a></li>
<li><a>菜单4-4</a></li>
<li><a>菜单4-5</a></li>
<li><a>菜单4-6</a></li>
</ul>
</li>
<li><a>菜单5</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单5-1</a></li>
<li><a>菜单5-2</a></li>
<li><a>菜单5-3</a></li>
<li><a>菜单5-4</a></li>
<li><a>菜单5-5</a></li>
<li><a>菜单5-6</a></li>
</ul>
</li>
<li><a>菜单6</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单6-1</a></li>
<li><a>菜单6-2</a></li>
<li><a>菜单6-3</a></li>
<li><a>菜单6-4</a></li>
<li><a>菜单6-5</a></li>
<li><a>菜单6-6</a></li>
</ul>
</li>
<li><a>菜单7</a>
<div id="MenuMark"></div>
<ul id="MenuItemChild">
<li><a>菜单7-1</a></li>
<li><a>菜单7-2</a></li>
<li><a>菜单7-3</a></li>
<li><a>菜单7-4</a></li>
<li><a>菜单7-5</a></li>
<li><a>菜单7-6</a></li>
</ul>
</li>
</ul>
</body>
</html>
The above is the detailed content of Pure css3 navigation. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn