:::觸控顯示-8(捲軸式):::
《此選法所產生的觸控選單會有捲軸,適合子目錄很多很多的情況》
範例
﹝測試頁﹞

如果覺得語法太長,可將A、B兩段語法各別製作成 js 檔,再到網頁指定位置加入呼叫的語法。﹝→ js 檔的製作﹞

選單在不同解析度的螢幕下子目錄的位置會有所不同,解決的方式有:(1)選單靠網頁左邊。(2)使用無工具視窗(視窗-無工具視窗)。(3)使用IFRAME (視窗-網頁中的視窗-1).....。

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

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

            
C.貼在 <body>  指定位置  </body> 

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

1. 這部份的語法是頁面上的選單各個按鈕的細節設定,每個按鈕由兩個圖片變化,每一段都有「Layer」(圖層)的編號,當滑鼠接觸按鈕時,就會讓這個圖層的子目錄顯現,其他圖層的子目錄隱藏,「....'Layer1','','show','Layer2','','hide',...」→ 這一段就是表示圖層1顯現(show),圖層2隱藏(hide).....

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

可更改的部份:

1. 這部份在定義每個子目錄的內容,「div id="Layer1"」要與 C 段相對應,它所出現的位置由「left: 13px; top: 40px;」中所設定,分別是與視窗左邊與頂邊的距離,這個設定較瑣碎,最好配合「用瀏覽器預覽」來設定最正確的位置。在頁面編輯時,不能用滑鼠去移動這些子目錄,否則會失去子目錄捲軸的功能。

2. 子目錄的上邊的位置最好與按鈕要有重疊,不然會造成滑鼠要接觸按鈕兩次,才能選擇子目錄中的連結。

3. 子目錄上的捲軸變色是以網頁捲軸變色為準。

4. 「... <table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#cccccc">...」→ #cccccc 是子目錄表格底色,因為儲存格間距是2,所以呈現出來會如同線框的色彩。

5. 「...<tr bgcolor="#eeeeff">
<td class="text-s"><a href="#.htm">001-1</a></td>...」→ #eeeeff 是儲存格的底色。如果要指定連結的目標框架,請自行加上<a href="#.htm"
target="_blank"> 的連結標籤。「target="_blank"」是連結的網頁在新視窗開啟。

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