首頁 > 開發者 > JavaScript
標籤：ie6 javascript 下拉式功能表 dropdown 導航
下拉式功能表dropdown在很多前端架構裡面都有，直接拿來用就可以的，但是架構內的下拉式功能表不好改，也很可能會有相容性問題。
其實這東西完全可以利用HTML+CSS+Javascript去實現的。
效果如下：
其基本製作思想如下：
首先是HTML與CSS的布局，先布置一個table，這個table裡面有兩行，一行放下拉按鈕，一行放下拉式功能表，佔據整個寬度的100%，單元格之間的行距為0。
因為共5個元素每列佔20%。
這裡不用div的float去布局，是因為這裡使用table的話，這個下拉式功能表組非常好控制。根本就不用管下拉式功能表所對應的下拉按鈕在哪個位置，還要取出對應下拉式功能表的座標等等這樣的煩心事。
下拉按鈕所對應的下拉式功能表一開始是隱藏的。如果滑鼠放在下拉式功能表與下拉按鈕上面，則調用下面的javascript顯示下拉式功能表的事件，利用onmousemove事件，其實onmouseover也行的。
之後如果滑鼠離開這個包含下拉式功能表的表格，則利用onmouseout的事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>dropdown</title></head><body><table id="dropdown" width="100%" onmouseout="dropdown_dismiss()" cellspacing="0"> <tr align="center"> <td onmousemove="dropdown_show(0)" width="20%" > 下拉式功能表1▼ </td> <td onmousemove="dropdown_show(1)" width="20%"> 下拉式功能表2▼ </td> <td onmousemove="dropdown_show(2)" width="20%"> 下拉式功能表3▼ </td> <td onmousemove="dropdown_show(3)" width="20%"> 下拉式功能表4▼ </td> <td onmousemove="dropdown_show(4)" width="20%"> 下拉式功能表5▼ </td> </tr> <tr align="center"> <td onmousemove="dropdown_show(0)" width="20%" > <div style="display:none;"> sssssss<br /> sssssss<br /> sssssss<br /> sssssss<br /> </div> </td> <td onmousemove="dropdown_show(1)" width="20%"> <div style="display:none;"> sssssss<br /> sssssss<br /> sssssss<br /> sssssss<br /> </div> </td> <td onmousemove="dropdown_show(2)" width="20%"> <div style="display:none;"> sssssss<br /> sssssss<br /> sssssss<br /> sssssss<br /> </div> </td> <td onmousemove="dropdown_show(3)" width="20%"> <div style="display:none;"> sssssss<br /> sssssss<br /> sssssss<br /> sssssss<br /> </div> </td> <td onmousemove="dropdown_show(4)" width="20%"> <div style="display:none;"> sssssss<br /> sssssss<br /> sssssss<br /> sssssss<br /> </div> </td> </tr></table></body></html>之後是指令碼部分，與《【JavaScript】原生態相容IE6的圖片輪播》（點擊開啟連結）一樣，先利用document.getElementById("dropdown").getElementsByTagName("div");取出id=dropdown這個表格的旗下所有div節點，形成一個數組。傳過來showname參數，代表要顯示id=dropdown這個表格的旗下第showname個div。剛好與下拉式功能表所對應。之後，遍曆所有div節點，除了第showname個div其餘全部隱藏。
dropdown_dismiss函數是滑鼠離開表格時的函數，則隱藏所有div。
<script>function dropdown_show(showname){var dropdownArr=document.getElementById("dropdown").getElementsByTagName("div");for(var i=0;i<dropdownArr.length;i++){ if(i==showname){dropdownArr[i].style.display="block"; } else{ dropdownArr[i].style.display="none"; } } }function dropdown_dismiss(){var dropdownArr=document.getElementById("dropdown").getElementsByTagName("div");for(var i=0;i<dropdownArr.length;i++){ dropdownArr[i].style.display="none"; }}</script>
【JavaScript】利用onmousemove與onmouseout事件製作相容IE6純javascript無外掛程式原生態的下拉式功能表dropdown
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
