|
|
|
|
|
本文介紹一款常見的簡單大方的CSS3下拉導(dǎo)航菜單,代碼量少,制作簡單,但是非常實(shí)用,適合各種風(fēng)格的網(wǎng)頁使用,簡直是百搭導(dǎo)航。
效果圖
示例介紹
該示例用HTML5+CSS3實(shí)現(xiàn),無JavaScript。
注意,該示例非響應(yīng)式導(dǎo)航。
HTML代碼
<nav class="dropdownmenu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">技術(shù)教程</a>
<ul id="submenu">
<li><a href="#">SVG</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">最新消息</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>
外層標(biāo)簽為<nav></nav>
,其class
屬性值為dropdownmenu,里面是一個(gè)ul
容器,li
列舉是菜單內(nèi)容。li
里面包含的ul
容器和li
列舉,這是該菜單的二級(jí)菜單,二級(jí)菜單的ul
容器的id
值為submenu。
CSS代碼
.dropdownmenu ul, .dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}
.dropdownmenu li {
float: left;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
.dropdownmenu ul
是設(shè)置導(dǎo)航容器的樣式:背景、列舉、寬度等。
.dropdownmenu li
設(shè)置列舉樣式:位置、寬度等。
.dropdownmenu li:hover a {...}
設(shè)置導(dǎo)航菜單鼠標(biāo)懸停效果。
#submenu
設(shè)置二級(jí)菜單的樣式:位置、透明度等。
li:hover ul#submenu {...}
設(shè)置二級(jí)菜單鼠標(biāo)懸停的樣式:透明度等。
總結(jié)
本文介紹了一款HTML5+CSS3實(shí)現(xiàn)的水平下拉導(dǎo)航菜單,該導(dǎo)航簡單又大方,適合用于各種類型風(fēng)格的網(wǎng)頁上。喜歡的朋友可以收藏本頁,也可以直接下載源碼保存?zhèn)溆谩?/p>
相關(guān)文章