純html5+css3下拉導(dǎo)航菜單實(shí)現(xiàn)代碼

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁(yè)制作

來(lái)源：易賢網(wǎng) 閱讀：1952 次日期：2016-07-13 16:14:09

溫馨提示：易賢網(wǎng)小編為您整理了“純html5+css3下拉導(dǎo)航菜單實(shí)現(xiàn)代碼”,方便廣大網(wǎng)友查閱！

下拉導(dǎo)航在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)遇見(jiàn)到，記得以前都是使用js實(shí)現(xiàn)的吧，不過(guò)本文接下來(lái)要介紹的是采用css3+html5實(shí)現(xiàn)，感興趣的你可不要錯(cuò)過(guò)了哈，希望看完對(duì)你學(xué)習(xí)css3有所幫助

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>純html+css導(dǎo)航</title>

<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>

<li>

<dl>

<dd><a href="#">子菜單三子菜單三</a></dd>

</dl>

</li>

<li>

<dl>

<dd><a href="#">子菜單三子菜單三</a></dd>

</dl>

</li>

<li>

<dl>

</dl>

</li>

</ul>

</nav>

</body>

</html>

更多信息請(qǐng)查看網(wǎng)頁(yè)制作

上一篇：HTML5中的Article和Section元素認(rèn)識(shí)及使用

下一篇：html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)

易賢網(wǎng)手機(jī)網(wǎng)站地址：純html5+css3下拉導(dǎo)航菜單實(shí)現(xiàn)代碼

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)頁(yè)制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實(shí)現(xiàn)網(wǎng)頁(yè)中常見(jiàn)的小箭頭10月30日

有關(guān)HTML5中背景音樂(lè)的自動(dòng)播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動(dòng)畫(huà)效果——讓頁(yè)面動(dòng)起來(lái)10月30日

html5清空畫(huà)布方法(三種)10月30日

HTML實(shí)現(xiàn)移動(dòng)端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計(jì)彩色邊框的表格?10月30日

Dreamweaver怎么給個(gè)人簡(jiǎn)歷添加照片并排版?10月30日

基于HTML5的WebGL實(shí)現(xiàn)json和echarts圖表展現(xiàn)在同一個(gè)界面10月30日

解決HTML5手機(jī)端頁(yè)面縮放的問(wèn)題10月30日

利用純CSS實(shí)現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁(yè)排版09月29日

HTML5+CSS3 實(shí)現(xiàn)靈動(dòng)的動(dòng)畫(huà) TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動(dòng)畫(huà)技巧與細(xì)節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026國(guó)考·省考課程試聽(tīng)報(bào)名

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合