1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [JS]橫跨五大瀏器皆可使用的滑鼠觸碰下拉選單

[JS]橫跨五大瀏器皆可使用的滑鼠觸碰下拉選單

2008/12/19

  提到滑鼠觸碰的下拉選單,其實透過Dreamweaver內建就可以直接辦到,內建雖然方便也快速,但滑出的選單,大多只能是文字形態,若要改成圖片時,不是利用圖層的開關閉外,就是從上網爬文,找相關的範例來套用。


  但不論是DW內建或是從網路找的範例,那程式碼都若若長,且有些還只能在IE下使用,最近因工作上需使用到此功能,便讓梅干桑思索了一下,就只是滑鼠碰到秀出選單,有這麼複雜嗎?要寫這麼多,於是讓梅干桑想到一個偷吃步的方法,只要短短的三~四行就可辦到,同時還可橫跨各個瀏覽器。


<head>….</head>之間
#css

#apDiv1 ,#apDiv2{
 height:15px;
 cursor:pointer;
 overflow:hidden;
 float:left;
 margin-left:10px;
 list-style-type: none;
 border: 1px solid #CCCCCC;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
 font-size: 15px;
 font-weight: bold;
 color: #666666;
}
li a{
 font-size: 12px;
 color: #0000FF;
 text-decoration: none;
 font-weight: normal;
}
li a:hover{
 color: #FF3333;
}

#javascript

function Event(n,e){
 if(e == “true”){
 document.getElementById(n.id).style.overflow=“visible”;
 }else{
 document.getElementById(n.id).style.overflow=“hidden”;
 }
}

<body>….</body>之間

<ul id=“apDiv1” onmouseover=“Event(this,’true’);”
onmouseout=“Event(this,”);”>
<li>梅問題</li>
<li><a href=“//photo.minwt.com/”>生活網</a></li>
<li><a href=“//photo.minwt.com/doc”>教學網</a></li>
<li><a href=“//photo.minwt.com/tools”>工具網</a></li>
</ul>
<ul id=“apDiv2” onmouseover=“Event(this,’true’);” onmouseout=“Event(this,”);”>
<li>友站連結</li>
<li><a href=“http://blog.xuite.net/abgne/diary1">男丁格爾</a></li>
<li><a href=“http://blog.roodo.com/vic5700_">維克腦吳</a></li>
</ul>

※由上方<body>….</body>中可看到藍色為選單一紅色為選單二,若要再多選單時,請直接複製其中一個色塊,並將<ul id="XXX"改成apDiv3名稱不可重覆依此類推,再將上方的CSS,#apDiv1 ,#apDiv2 ,#apDiv3即可。


[範例預覽]