1.概述

采用彈出式懸浮菜單，不但可以使網(wǎng)站的導(dǎo)航內(nèi)容更加清晰，而且不影響頁(yè)面的整體效果。運(yùn)行本實(shí)例，如圖1所示，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航菜單的標(biāo)題上時(shí)，將彈出懸浮菜單顯示該菜單對(duì)應(yīng)的子菜單，鼠標(biāo)移出時(shí)，將隱藏懸浮菜單。

2.技術(shù)要點(diǎn)

本實(shí)例主要是在JavaScript中，動(dòng)態(tài)改變<div>標(biāo)簽對(duì)象的style屬性的display屬性值來(lái)實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏二級(jí)導(dǎo)航菜單。其實(shí)，每一個(gè)一級(jí)菜單下的二級(jí)菜單內(nèi)容是已經(jīng)添加在網(wǎng)頁(yè)的<div>標(biāo)簽中，只是此時(shí)設(shè)置了<div>不顯示。所以，在JavaScript中，當(dāng)鼠標(biāo)經(jīng)過(guò)某個(gè)導(dǎo)航的標(biāo)題時(shí)，只需要調(diào)用指定的<div>對(duì)象，動(dòng)態(tài)修改它的display屬性即可，display屬性包含兩個(gè)用于顯示和隱藏的屬性值，分別為none（隱藏）和block（顯示）。

例如：在網(wǎng)頁(yè)中有一個(gè)id為mydiv的<div>標(biāo)簽，并設(shè)置了此<div>為隱藏。在JavaScript中，控制此<div>顯示的寫(xiě)法如下：

document.getElementById("mydiv").style.display="block"; 

3.具體實(shí)現(xiàn)

（1）編寫(xiě)用于顯示和隱藏的JavaScript方法，當(dāng)鼠標(biāo)經(jīng)過(guò)一級(jí)菜單標(biāo)題時(shí)會(huì)顯示二級(jí)菜單，當(dāng)鼠標(biāo)移出時(shí)會(huì)隱藏二級(jí)菜單。關(guān)鍵代碼如下：

function change(img,subMenu,path,type){
img.src="images/"+path+".GIF";
if(subMenu!=null){
if(type==0){
subMenu.style.display="none";
}else{
subMenu.style.display="block";
}
}
} 

（2）在頁(yè)面中，預(yù)先在<div>標(biāo)簽中為每個(gè)一級(jí)導(dǎo)航菜單添加二級(jí)菜單的內(nèi)容，并設(shè)置二級(jí)菜單的<div>標(biāo)簽為隱藏。關(guān)鍵代碼如下：

<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid; width:200px; position:absolute; display:none; left:1px; top: 34px;">
<table width="100%" border="0" height="35px" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="#">瀏覽員工信息</a>&nbsp;&nbsp;<a href="#">添加新員工</a></td>
</tr>
</table>
</div>
...//此處省略了其他二級(jí)菜單的<div>內(nèi)容 

（3）在一級(jí)菜單的的表格的<td>中設(shè)置onMouseOver和onMouseOut事件，調(diào)用步驟（1）中定義的JavaScript的change()方法，動(dòng)態(tài)改變二級(jí)菜單<div>的顯示和隱藏。關(guān)鍵代碼如下：

<td onMouseOver="change(ImgUser,NUser,'NUser_r',1)" onMouseOut="change(ImgUser,NUser,'NUser_b',0)" style="cursor:hand;">
<img id="ImgUser" src="images/NUser_b.GIF" width="106" height="48" border="0">
...//省略了二級(jí)菜單的<div>代碼
</td>

以上所述是小編給大家介紹的導(dǎo)航條彈出式懸浮菜單，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論