:::觸控顯示-6:::

範例如本頁,除001子目錄有連結「隨意玩網」作為測試(新視窗),其他無連結網頁。

滑鼠接觸選單項目會出現子目錄,接觸「關閉選單」時,所有子目錄就會隱藏,選單可關閉與開啟,並且會隨捲軸移動。

在Dreamweaver軟體編輯時,要把程式碼最前面的「"http://www.w3.org/TR/html4/loose.dtd"」刪除。

FrontPage 軟體編輯時,用「瀏覽器預覽」較能看到真正的效果。
   
A.貼在 <head> 這裡 </head>

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

可更改的部份:

1. 這一段在設定選單表格與子目錄的各項細節,許多細節比較繁鎖,尤其各圖層位置的設定,可在頁面用滑鼠直接移動,並在HTML中修改。

2. 從「開啟選單」到每個項目都是一個Layer」(圖層),以left(與左邊視窗的距離)、top(與視窗頂的距離)來設定位置。每個項目都有一段「onMouseOver="MM_showHideLayers('Layer5','','hide');......」,是設定當滑鼠接觸時第幾個圖層要顯現(show),其他圖層要隱藏(hide)......

3. 子目錄也可設定在選單左邊出現,<div id="Layer2" style="position:...... left: 115; top: 1;......>,「left: 115;」改成「left: -115;」即可....

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

可更改的部份:(在html中修改)

「....if (IE4)
setInterval('KB_keepItInIE("KBStatic",
0,10)',1)
if (NN4)
setInterval('KB_keepItInNN("KBStatic",
0,10)',1)....」

「0,10」( 0 是與視窗頂的距離,10 是與視窗左邊的距離),這是頁面開啟後選單出現的真正位置,要與 B 段語法最前面的「....<div id="KBStatic" style="absolute; left: 10; top: 0; ....」一致。

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

開啟選單
◆ 001
◆ 002
◆ 003
◆ 004
關閉選單