基于JS代碼實現導航條彈出式懸浮菜單

更新時間：2016年06月17日 14:33:02 作者：柯南&

這篇文章主要介紹了基于JS代碼實現導航條彈出式懸浮菜單的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

1.概述

采用彈出式懸浮菜單，不但可以使網站的導航內容更加清晰，而且不影響頁面的整體效果。運行本實例，如圖1所示，當鼠標移動到一級導航菜單的標題上時，將彈出懸浮菜單顯示該菜單對應的子菜單，鼠標移出時，將隱藏懸浮菜單。

2.技術要點

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

例如：在網頁中有一個id為mydiv的<div>標簽，并設置了此<div>為隱藏。在JavaScript中，控制此<div>顯示的寫法如下：

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

3.具體實現

（1）編寫用于顯示和隱藏的JavaScript方法，當鼠標經過一級菜單標題時會顯示二級菜單，當鼠標移出時會隱藏二級菜單。關鍵代碼如下：

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）在頁面中，預先在<div>標簽中為每個一級導航菜單添加二級菜單的內容，并設置二級菜單的<div>標簽為隱藏。關鍵代碼如下：

<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>
...//此處省略了其他二級菜單的<div>內容

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

<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">
...//省略了二級菜單的<div>代碼
</td>

以上所述是小編給大家介紹的導航條彈出式懸浮菜單，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: