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
     

發表回應

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

  • 表情:            
紙娃娃設定

次選單

訪客人次

  • Total: 109584
  • Today: 02
  • Yesterday: 07

新作塗鴉

最近迴響

  • 台灣頂級打炮聖地**看照選妹: 大★台★灣★喝★茶+LINE:【tw5205】 ...
  • 香草: 香草本地純兼職加LINE:love58966 SK:wh...
  • 香草: 香草本地純兼職加LINE:love58966 SK:wh...
  • 麥莉: 台中.外.送.茶.LINE:clear258豐原.外.約....
  • 麥莉: 免費到府服務:台中市 西區.北區.中區.東...
  • 麥莉: 有氣氛@放鬆讓我們從身體開始 很溫柔唷~...
  • 志玲: 安唷 我是小鈴鐺 是一名新人GTO 每天重複...
  • 志玲: 安唷 我是小鈴鐺 是一名新人GTO 每天重複...
  • 志玲: 安唷 我是小鈴鐺 是一名新人GTO 每天重複...
  • 騎姬正妹外約: 騎姬正妹外約+賴mar339看照 全台出差旅...

素材版權

  • Princess PartyDesign: Rei
  • 幻想素材サイトFirst MoonSozai: 糸宇 睦月

標籤貼紙

  • Valid XHTML 1.0
  • Valid CSS 2.1
  • WCAG 1.0 Triple-A