Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

  • 兀兒德>_<兀兒德>_< by 兀兒德
    2009/09/12(Sat)12:00:38

網頁教學

緩進式下拉選單

2008/05/21 (Wed)
  • 這個功能蠻類似網路上常見的樹狀選單,不過它並不是像樹狀選單一般按下去直接就全部攤開,而是會慢慢的往下拉動,在畫面上比樹狀選單漂亮太多了!而且,這個效果我是在 1998 年看到的,在當初 CSS 剛起步,FLASH 也還不知道在哪的那個時代,能做到這樣已經是驚為天人啦!而且,用舊方法做出來的它,也因此能對應較舊版本的瀏覽器 (I.E 4.0對應可!),但是也因為這個效果是用比較舊式的方法做出來的,功能設定上十分麻煩,不建議初學者使用,想我當初為了研究它,整整花了三天.....而且還非常大膽的敢不鎖原始碼給人複製,能複製的走的人也不簡單 XD。

原始碼



設定方式

  • 設定非常複雜,沒耐性根性屢敗屢戰精神請勿嘗試

    【改變版面的方式】
     若想改變每顆按鈕出現的位置,請分別去修改各組 div 之中的 left:XXpx;top:XXpx; 之中的數字。另外如果修改了 top 的數字,還必須將 Script 中第 27 行 tabtops = new Array(27,30,57,84,110) 的數字也修改,個別的對應分別是頂、選單1、選單2、選單3、底。
     如果您的文字、行高不是跟我一樣的 12px,17px,在下拉時可能會發現沒辦法拉到適當的位置,怎麼辦呢?這時請找出 Script 中第 22 行 lfactor = 18;,這個數值代表每單位下拉的距離點數,配合您各選項的高度修改這個數字應該就能解決問題了。

     您可能覺得很奇怪,為什麼要有頂跟底的設定呢?事實上,頂是配合底存在的,可以拿掉無所謂,我這個範例是把頂拿來當作邊框使用了。而底是用來遮醜的,如果沒有設定底,那選項的尾巴就會從底下露出來,造成版面的不好看,有興趣的可以把底色透明掉看看便知囉!還有就是選項太多時也會有這樣的問題,這時候請把底的高度加高,就能解決了。

    【新增選單的方式】
     首先先找到 Script 區的第 23 行 var arraylen = 5; 因為現在預設是 頂 + 3 個選單 + 底,所以設定為 5,現在要新增,所以將它改成 6。
     第 24 行 tabs = new Array("SliderLayer" , "RollTab1" , "RollTab2" , "RollTab3","Blank"),請在中間插入 "RollTab4",用來當作新選單的點選狀態。
     第 25 行 tabs2 = new Array("" , "NoRollTab1" , "NoRollTab2") 也請在後面新增 "NoRollTab4",用來當作新選單的未點選狀態。
     再來請確定新選單的選項數量,修改第 26 行 tablinks = new Array(0,3,4,2,0) 假設新選單有 5 個選項,就改成 new Array(0,3,4,2,5,0)
     第 27 行 tabtops = new Array(77,80,107,134,160) 代表選單出現位置的高度,假若沒有修改版面的話,因我在這裡設定的標頭高度約為 77px,故中間點距都為 77px,與底之間因顧慮到其他瀏覽器的關係,多加 1 點以防蓋住虛線,故這裡請改成 new Array(77,80,107,134,161,187)
     最後便是將 Html 部分的東西整組複製下來貼上,再配合上面的設定將以下部分分別修改成 id="RollTab4"id="NoRollTab4"javascript: checkclick(4);top:111px; ,然後底的 top:110px; 則改為 top:187px;

    【新增選項的方式】
     除了在 Html 部分新增以外,還必須修改第 26 行 tablinks = new Array(0,3,4,2,0) 之中的數字,預設是第一選單有 3 個選項,第二選單有 4 個選項,第三選單有 2 個選項,可依需要自行修改。

    【其他相關】
     版面的設定是採用 CSS 方式,因此只要在 <style></style> 的部分自行加入或修改 CSS 設定即可,這部份就不贅述了。

取材網站

  • 其實這就是很久以前的叮噹屋,改版沒多久網站就消失了。不過雖然網站已經消失了,它的精神會永遠與我們同在的.....XD

相關回應

目前無相關回應

發表回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

素材、設計