HTML+CSS+JavaScript通過嵌套u(yù)l li實現(xiàn)簡單的二級菜單
發(fā)布時間：2013-08-07 17:06:17 作者：佚名 
我要評論
我要評論通過嵌套的ul li 實現(xiàn)簡單的二級菜單兼容IE6-9,谷歌火狐等主流瀏覽器，示例代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助
復(fù)制代碼
代碼如下:HTML網(wǎng)頁如下：(通過嵌套的<ul><li></li></ul>)(兼容IE6-9,谷歌火狐等主流瀏覽器)
復(fù)制代碼
代碼如下:<body onload="loadFun()">
<form id="form1" runat="server">
<div id="menu">
<ul>
<li><a href="#" onclick="Show('rule')">相關(guān)法規(guī)</a>
<ul id="rule">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
<li><a href="#">操作員計算機(jī)IE設(shè)置</a></li>
<li><a href="#">電子簽章辦理須知</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('load')">相關(guān)下載</a>
<ul id="load">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
<li><a href="#">操作員計算機(jī)IE設(shè)置</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('info')">公司簡介</a>
<ul id="info">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('window')">連接窗口</a>
<ul id="window">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('phone')">連接電話</a>
<ul id="phone">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Adobe Reader</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
網(wǎng)頁加載時，需要將所有的菜單項都暫時隱藏，調(diào)用相關(guān)的JavaScript代碼
復(fù)制代碼
代碼如下:/*網(wǎng)頁加載時觸發(fā)的函數(shù)*/
function loadFun() {
//獲取<ul></ul>的所有子節(jié)點<li>節(jié)點5個
var array = document.getElementsByTagName("ul").item(0).childNodes;
//遍歷子節(jié)點
for (var i = 0; i < array.length; i++) {
//獲取<li></li>標(biāo)簽的子節(jié)點
var childnodes = array[i].childNodes;
for (var j = 0; j < childnodes.length; j++) {
//如果碰到主菜單中的<ul>標(biāo)簽就隱藏該子菜單的下拉菜單
if (childnodes[j].tagName == "UL") {
childnodes[j].style.display = "none";
}
}
}
}
詳細(xì)的CSS代碼如下：
復(fù)制代碼
代碼如下:<style type="text/css">
/*設(shè)置上一級菜單的樣式*/
html,body
{
width:100%;
height:100%;
/*消除網(wǎng)頁的邊界*/
margin:0px;
padding:0px;
border-style:none;
}
#menu
{
width:225px;
height:320px;
background-color:RGB(216,216,216);
padding:0px;
margin:0px;
}
/*去掉列表前的圓點*/
#menu ul
{
width:225px;
list-style-type:none;
padding:0px;
margin:0px; /*消除左側(cè)間隙*/
}
#menu ul li
{
width:225px;/*填充滿整個邊欄*/
/*
margin:0px;
padding:0px;
*/
}
#menu ul li a
{
display:block; /*先轉(zhuǎn)化成塊級元素*/
color:Gray;
text-align:left;
text-decoration:none;
padding:10px 0px 10px 30px;/*設(shè)置距離左側(cè)的邊欄和上邊距*/
font-size:14px;
}
#menu ul li a:hover
{
color:Orange;
text-align:left;
text-decoration:none;
padding:10px 0px 10px 30px;
font-size:14px;
}
/*設(shè)置子菜單的樣式*/
#menu ul li ul
{
list-style-type:none;
/*
padding:0px;
margin:0px;
*/
}
#menu ul li ul li
{
width:225px; /*通過設(shè)置寬度來填充*/
}
#menu ul li ul li a
{
display:block;
/*此處可以通過設(shè)置來調(diào)整相關(guān)的樣式*/
padding:6px 0px 6px 60px;
text-align:left;
text-decoration:none;
font-size:12px;
}
#menu ul li ul li a:hover
{
padding:6px 0px 6px 60px;
text-align:left;
text-decoration:none;
font-size:12px;
color:Black;
background-color:#CD2626;
}
</style>
鼠標(biāo)點擊觸發(fā)的JavaScript代碼如下：
復(fù)制代碼
代碼如下:/*點擊按鈕是觸發(fā)的事件*/
var arrays = new Array("rule","load","info","window","phone");
function Show(tagId) {
for (var i = 0; i < arrays.length; i++) {
if (arrays[i] == tagId) {
//設(shè)置全新的背景顏色
document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(237,237,237)";
document.getElementById(arrays[i]).style.display = "block";
}
else {
//將背景顏色還原
document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(216,216,216)";
document.getElementById(arrays[i]).style.display = "none";
}
}
}
效果圖如下：
相關(guān)文章
使用HTML+CSS實現(xiàn)鼠標(biāo)劃過的二級菜單欄的示例
本篇文章主要介紹了使用HTML+CSS實現(xiàn)鼠標(biāo)劃過的二級菜單欄的示例，非常具有實用價值，需要的朋友可以參考下2017-09-14純CSS實現(xiàn)鼠標(biāo)滑過顯示子菜單的二級菜單效果
這篇文章主要為大家介紹了純CSS實現(xiàn)鼠標(biāo)滑過顯示子菜單的二級菜單效果,通過簡單的css針對hover設(shè)置實現(xiàn)鼠標(biāo)滑過顯示二級菜單的功能,具有一定參考借鑒價值,需要的朋友可以參2015-09-14
css實現(xiàn)圓角下拉菜單,可以自定義個數(shù),兼容主流瀏覽器. "廣州網(wǎng)聚信息傳播有限公司"提供2010-06-07- 這個菜單效果挺好，使用了jQuery+CSS配合實現(xiàn)，完美兼容多種瀏覽器，鼠標(biāo)滑過主菜單，分顯示出對應(yīng)的二級菜單，橫排布局，莊重藍(lán)色風(fēng)格，適合大部分網(wǎng)站做主導(dǎo)航菜單。當(dāng)2009-08-04
這篇文章主要介紹了css 實現(xiàn)動態(tài)二級菜單效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-30
