Princess Party

Princess Party - 網頁教學

網頁教學

側邊觸控式選單

2011/11/18 (Fri)
  • 當您的網頁內容十分多的時候,或許會整個畫面找不出一個地方放選單,怎麼辦呢?這個功能可以解決您的問題唷!這個功能是將選單隱藏在最左邊,用滑鼠碰一下就會拉出來,再碰一下就收回,既美觀又節省畫面的空間呢。

原始碼



設定方式

  • 【增加選單收放距離的方式】
     請把 Style 部分的第一行 #master {position:absolute;... 後面的 left: -100px 改成您希望選單拉出的距離,假設想拉出 150 個點距就請輸入 -150px。
     緊接著的下一行 #menu {position:absolute;... 後面的 left: 100px 也請改成需要的距離,比如要改成 150 個點距,就請輸入 150px。
     最後在底下找出一行 else{setPace("master", -100, 10, 10); 將其中的 -100 配合上面修改成希望的數值,若是 150 個點距,請輸入 -150。
     完成上面 3 個步驟,拉出距離就會變成您想要的距離了,但是表格大小卻不會因此改變,建議將表格大小也配合上面修改,這樣畫面會比較漂亮。若要修改的話,請在 Style 部分找出 #screen { ... width: 100px,將它修改成您想要的數字,再找出下一行的 #screenlinks { ...width: 88px; 因為左右各有 5 點的間距與 1 點的邊框,所以此寬度為前一個寬度 100 - 12 = 88,只要照著這個算法去改就可以了。

    【增加選單收放速度的方式】
     若要變化選單拉出時的速度,請在 Script 部分最底下找出一行 if(expandState == 0){setPace("master", 0, 10, 10); 的資料,然後將後面 ("master", 0, 10, 10) 最後的一個 10 的數值修改一下,請注意,數字越小才是越快。
     若是想修改選單收回時的速度,也是在 Script 部分最下面找出一行 else{setPace("master", -100, 10, 10);,然後修改後面 ("master", -100, 10, 10) 最後的 10,修改方式同上。

    【把選單改到右邊的方式】
     找出 Script 部分的第 3~6 行的四組 CSS (#master#menu#screen#screenlinks) 其中各有一項 left: OOpx,全部都改成 right: OOpx

     再找出 Script 第 32 行的 document.getElementById([layerName]).style.leftleft 也改為 right 即可。

取材網站

  • 這個站的教學區有這個效果,不過裡面的教學相當多,要找到恐怕得費點時間 ^﹏^|||。
  •     

相關回應


Benson

請教語法要怎樣插入網頁中

2013/02/17 (Sun)
  • Hello 你好!!

    我有一個網頁 想要增加您這個功能 但不熟悉語法 請問一下 我的網頁是從國外買套版 後台介面是 wordpress , 應該是Linux 語法寫的, 請問這樣要怎樣才可以更新進去設計我的文章分類呢 謝謝您
  • Mail
  • Home
  • Edit / Delete
     

JasonChan

謝謝網頁作者的分享

2013/07/19 (Fri)
  • 本人是一名香港學生,現正進行學校的SBA校本評核,個人認為此處的各種HTML碼非常實用,這有助我完成習作,在此感謝大大的分享,更讓我學到更多
  • Edit / Delete
     

李魁

非常有幫助!

2016/11/09 (Wed)
  • 謝謝樓主的分享~
    我目前也在學網頁<3
  • Mail
  • Edit / Delete
     

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

  • 表情:            
紙娃娃設定

主題條列

訪客人次

最近迴響

新作塗鴉