純html5+css3下拉導航菜單實現(xiàn)代碼_HTML5教程
推薦:html5+css3實現(xiàn)一款注冊表單實例注冊表單采用html5+css3布局實現(xiàn),效果相當不錯,感興趣的前端web設(shè)計者可以參考下哈,希望可以幫助到你
效果圖如下:代碼如下:
復制代碼 代碼如下:m.dounai2.com
<!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>
分享:HTML5之HTML元素擴展(上)—新增加的元素及使用概述HTML5中加入了全新的結(jié)構(gòu)型元素,例如頁眉header,頁腳footer,導航nav,內(nèi)容article,章節(jié)section等除了這種整個頁面的結(jié)構(gòu)型元素,html5也加入了塊級別的語義元素,感興趣的朋友可以了解下,或許對你有所幫助
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- 檢測瀏覽器是否支持html5視頻的代碼
- HTML 5 標簽、屬性、事件及瀏覽器兼容性速查表 附打包下載
- html5中地理位置定位api接口開發(fā)應用小結(jié)
- 突襲HTML5之Javascript API擴展1—Web Worker異步執(zhí)行及相關(guān)概述
- HTML5之SVG 2D入門7—SVG元素的重用與引用
- 如何使用html5與css3完成google涂鴉動畫
- html5-Canvas可以在web中繪制各種圖形
- 用HTML5實現(xiàn)手機搖一搖的功能的教程
- HTML5中微數(shù)據(jù)概述及在搜索引擎中的使用舉例
- HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-純html5+css3下拉導航菜單實現(xiàn)代碼。