:::觸控式下拉選單:::

範例如本頁,滑鼠接觸選單就會自動拉下,滑鼠離開選單就會自動昇上去,除「隨意玩網」有開啟新視窗提供測試,其它無連結網頁。

                 
A.貼在<head> 這裡 </head>

要更改的部份:(都在 HTML 更改)

1. 請自行加入CSS語法,控制頁面的字體、連結變色......。

2. 此段最後的「....if (!actionCheck && myTable.pixelTop > -210) ....」→ -210 是滑鼠離開後選單昇上去的距離,數目越大選單離視窗頂就越長,視選單的文字內容修改。

      
B.貼在 < body  這裡> ,要與body保持空格

     
C.貼在 <body>  這裡 </body> 

 

要更改的部份:

1. 此段前面的「....style="position: absolute; top: -210; left: 6; ....」,在標示頁面開啟選單的位置,「top: -210」→ 選單與視窗頂的距離,數目越大,選單外露在頁面的部份就越多,視選單中的文字內容修改,最好與A段中「...if (!actionCheck && myTable.pixelTop > -210)...」一致。「left: 6」→ 選單與視窗左邊的距離,數目越大就越靠右邊。

2. 選單上的連結文字、框線....可在頁面編輯時將選單移到可編輯的位置,直接在頁面修改完後,再移到指定位置,或到HTML中修改。

3. 如果要使用圖片,可加入貼圖標籤 → <img src="圖檔檔名路徑" border="0">,border="0" → 連結時圖片無外框。

3. 在Dreamweaver軟體時程式碼最前面一段「"http://www.w3.org/TR/html4/loose.dtd"」要刪除,否則進入頁面時整個選單會出現在頁面上。

 --隨意玩網--語法練習--
△TOP