suchen

Heim  >  Artikel  >  Web-Frontend  >  Reine HTML5-CSS3-Dropdown-Navigationsmenü-Implementierungscode_html5-Tutorialfähigkeiten

Reine HTML5-CSS3-Dropdown-Navigationsmenü-Implementierungscode_html5-Tutorialfähigkeiten

PHP中文网
PHP中文网Original
2016-05-16 15:49:574496Durchsuche

Das Rendering ist wie folgt:

Der Code ist wie folgt:


Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>纯html+css导航</title> 
<!-- mulder --> 
<!-- qq:10221408 --> 
<!-- 只支持 chrome firefox --> 
<style> 
*{ 
margin:0; 
padding:0; 
} 
.clear:after { 
clear: both; 
content: "."; 
display: block; 
height: 0; 
visibility: hidden; 
} 
nav{ 
display:inline-block; 
border:1px solid #505255; 
border-bottom: 1px solid #282C2F; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
margin:50px; 
-webkit-box-shadow:1px 1px 3px #292929; 
-moz-box-shadow:1px 1px 3px #292929; 
} 
li{ 
list-style:none; 
float:left; 
border-right: 1px solid #2E3235; 
position: relative; 
/*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F 50%,#3E4245 100%); 
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/ 
background:#555D5F; 
} 
li:hover{ 
/*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F 80%,#555D5F 100%); 
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/ 
background:#3E4245; 
-moz-transition: background 1s ease-out; 
-webkit-transition: background 1s ease-out; 
} 
li a{ 
display:block; 
height:40px; 
line-height:40px; 
padding:0 30px; 
font-size:12px; 
color:#fff; 
text-shadow: 0px -1px 0px #000; 
text-decoration:none; 
white-space:nowrap; 
border-left: 1px solid #999E9F; 
border-top: 1px solid #999E9F; 
-moz-border-top-left-radius: 2px; 
-webkit-border-top-left-radius: 2px; 
z-index:100; 
} 
li > a{ 
position:relative; 
} 
li.first a{ 
-moz-border-radius-topleft: 4px; 
-moz-border-radius-bottomleft: 4px; 
-webkit-border-top-left-radius: 4px; 
-webkit-border-bottom-left-radius: 4px; 
} 
li.last{ 
border-right: 0 none; 
} 
dl{ 
position:absolute; 
display:block; 
top:40px; 
left: -25px; 
width:165px; 
background:#222222; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-webkit-box-shadow:1px 1px 3px #292929; 
-moz-box-shadow:1px 1px 3px #292929; 
z-index:10; 
} 
li:hover dl{ 
top:50px; 
display:block; 
width:145px; 
padding:10px; 
} 
dl a{ 
background:transparent; 
border:0 none; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-transition: background 0.5s ease-out; 
-webkit-transition: background 0.5s ease-out; 
z-index:50; 
} 
dl a:hover{ 
color:#FFF; 
background:#999E9F; 
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
} 
dd{ 
margin-top:-40px; 
opacity:0; 
width:145px; 
-webkit-transition-property:all; 
/*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/ 
-moz-transition-property: all; 
/*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/ 
/*-webkit-transition-delay:5s; 
-moz-transition-delay:5s;*/ 
} 
li:hover dd{ 
margin-top:0; 
opacity:1; 
} 
li dd:nth-child(1){ 
-webkit-transition-duration: 0.1s; 
-moz-transition-duration: 0.1s; 
} 
li dd:nth-child(2){ 
-webkit-transition-duration: 0.2s; 
-moz-transition-duration: 0.2s; 
} 
li dd:nth-child(3){ 
-webkit-transition-duration: 0.3s; 
-moz-transition-duration: 0.3s; 
} 
li dd:nth-child(4){ 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; 
} 
dt{ 
display:none; 
margin-top:-25px; 
padding-top:15px; 
height:10px; 
} 
li:hover dt{ 
display:block; 
} 
.Darrow{ 
float:right; 
margin:18px 10px 0 0; 
border-width:5px; 
border-color:#FFF transparent transparent transparent; 
border-style:solid; 
width:0; 
height:0; 
line-height:0; 
overflow:hidden; 
cursor:pointer; 
text-shadow: 0px -1px 0px #000; 
-webkit-box-shadow:0px -1px 0px #000; 
-moz-box-shadow:0px -1px 0px #000; 
} 
.arrow{ 
margin:0 auto; 
margin-top:-5px; 
display:block; 
width:10px; 
height:10px; 
background:#222222; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
} 
</style> 
</head> 
<body> 
<nav> 
<ul class="clear"> 
<li class="first"><a href="#">菜单一</a></li> 
<li> 
<span class="Darrow"></span> 
<a href="#">菜单二</a> 
<dl> 
<dt><span class="arrow"></span></dt> 
<dd><a href="#">子菜单一</a></dd> 
<dd><a href="#">子菜单二</a></dd> 
<dd><a href="#">子菜单三子菜单三</a></dd> 
</dl> 
</li> 
<li> 
<span class="Darrow"></span> 
<a href="#">菜单三</a> 
<dl> 
<dt><span class="arrow"></span></dt> 
<dd><a href="#">子菜单一</a></dd> 
<dd><a href="#">子菜单二</a></dd> 
<dd><a href="#">子菜单三子菜单三</a></dd> 
</dl> 
</li> 
<li> 
<span class="Darrow"></span> 
<a href="#">菜单四</a> 
<dl> 
<dt><span class="arrow"></span></dt> 
<dd><a href="#">子菜单一</a></dd> 
<dd><a href="#">子菜单二</a></dd> 
<dd><a href="#">子菜单三</a></dd> 
<dd><a href="#">子菜单四</a></dd> 
</dl> 
</li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单七</a></li> 
<li class="last"><a href="#">菜单八</a></li> 
</ul> 
</nav> 
</body> 
</html>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-HTML-Elementerweiterung (Teil 1) – Überblick über neu hinzugefügte Elemente und Tutorialfähigkeiten zur Verwendung von_html5Nächster Artikel：HTML5-HTML-Elementerweiterung (Teil 1) – Überblick über neu hinzugefügte Elemente und Tutorialfähigkeiten zur Verwendung von_html5

In Verbindung stehende Artikel

Mehr sehen