看到垂直收放式的下拉選單, 很像資料夾結構一般的網站覺得滿酷嗎?
今天要介紹的這個extension,不只可以做出這種效果,還有非常漂亮的天空圖片,
讓你的選單做出來像是專業級的水準。
讓我們來瞧瞧Sky Style Menu Extension 的奧妙吧!

Sky Style Menu
這個extension可以輕易的做出垂直收放式的下拉選單,而且還可以儲存參數樣板,下次再製作時直接讀入XML的資料檔即可,不用再一個一個個重建連結資料,因為收放式選單通常都有很多的連接點,每一次都重建光打字就昏了,實在是非常貼心的設計,最酷的是這個extension還提供非常漂亮的天空底圖,輕鬆做出專業級的效果,你也可以藉著更換底圖做出自己獨一無二的樣式。

目標:建立一個有下拉是收放選單的網頁,點選內容會出現在網頁的右邊

1.安裝好這個extension後,會在工具列上的命令-->Kaosweaver.com-->Sky Style Menu



2.先建立一個兩欄一列的表格,左欄寬200px(放下拉選單),右欄放選單內容

3.滑鼠點到左欄,於命令列中插入Sky Style Menu



這個就是Sky Menu的介面分成Main,Style,Option三個主要操作標籤。

4.將滑鼠點選Root,按下New Button開始建立我門的選單節點。建立好一個節點按下Add,繼續建立下一個。先不用擔心階層的問題,把所有想要的聯接內容通通新增進去吧。
■Name Button:選單名稱
■URL:選單連結
■Target:視窗開啟的目標
■Title:連結說明



5.都建立好後按Back鍵回到上一個畫面,現在要用介面左下方的Edit Tree四個方向鍵來安排連結階層,上下鍵可以調整連結順序,左右鍵式調整連結的階層。



6.階層連結都建好了,那現在到Style選單挑一個你喜歡的樣式。你可以選擇字體要粗體,斜體,還是要有底線,還有對齊的方式。



7.方格挑好後前往Option標籤,有System option預設是把Load parameters from a page這樣打勾。Menu option預設把Enable cookies打勾。木笛特別說明兩個選項。
■Hide old branches :這是說是否要隱藏不是目前選到的下拉分支,把他勾選的話,每一次只會有你選到的系列選單會打開,上一個打開的會收起來。如果不打勾,所有的選單都會打開,你要點選它才會收起。
■Width menu:就是menu的寬度,有百分比和圖素可以選,這裡我們選px並輸入200。



8.按下右邊的preview就可以預漂亮的下拉許單囉,不過因為是外國人寫的extension,你在預覽時文字會都是問號,實際輸出時就不會了。

9.好不容易做好的下拉收放式選單可以把這些參數存起來,點選Save Parameters As把這些設定並存成xml檔,下次有相似的頁面要用只需用Load Parameters來改就好囉。

10.至於連結內容的部份就請參考木笛之前的Iframe教學吧,你就可以把這兩各技巧結合起來,框架就沒有存在的必要了。完成後欣賞一下自己的成果吧。



注意事項
1.請不要在同一個頁面插入兩個Sky Menu,javascript會出問題。最好插入Sky Menu的動作是做這個網頁的第一個動作。
2.我有更棒的底圖要怎麼換呢?
選取整個Sky Menu的table,你會發現其實底圖就是設成table的背景,你可以隨意更換你想要的背景,做出更好看的效果喔。



3.不過請注意當選單被拉開時,你的底圖會因為不夠大而重複出現,選單因此變得很奇怪,所以避免重複時畫面很難看,請慎選背景圖。為什麼人家選天空就是這個原因。
4.那滑鼠移過去的圖示不是也可以換?
當然可以不過你得找一下原始碼,在表頭的css的設定裡有background-image:url(xSM/bg_sky_hover.jpg)這一行,把url裡的連結位置換掉就可以了,記得要換乾淨喔,有兩層連結就會有兩個這各語法位置,請擅用Ctrl+F來尋找關鍵語法。



Extension下載:Sky Style Menu


fennser 發表在 痞客邦 PIXNET 留言(7) 人氣()


留言列表 (7)

發表留言
  • kenny
  • 急!急!急!急!急!!!!!!!!!!

    為甚麼我的子選項用很多,但全變成一個
  • 悄悄話
  • Vivia
  • 請問一下會合網頁的樹階無法變動?

    首先先謝謝您的提供,Sky Style確實可以解決我的困難,但是下載及安裝後無法變動網頁的樹階,同時也無法預覽?不曉得是哪立出了問題,還是有什麼該安裝,但卻未安裝呢?先謝謝你囉~.~
  • KIYA
  • 急~!如何讓主選項和點出的子選項套用不同底圖?

    請問大大,如果想讓主選項和點出的子選項是套用不同底圖,這有辦法做嗎?該如何去修改語法呢?拜託拜託,懇請知道的話回答一下吧~感激不盡!
  • 只要修改css程式碼就可以了
    請看檔頭部分中中放css定義的地方
    找#sectionLinksLevel2 a:link, #sectionLinksLevel2 a:visited{...}
    這是定義第二層選單的樣式
    加入這一句語法background-image:url(圖檔位置);
    就可以讓主選單和次選單用不同底圖了

    fennser 於 2008/10/10 14:25 回覆

  • Cynthia
  • 主選單如果超過10個就會出現錯誤訊息......
  • 版主~~~救救命
  • 請問一下,為什麼我輸入的全都都是主選項,要如何像你的畫面一樣有主選跟次選項的分別~~麻煩您了!!
  • 看起來下載的檔案壞掉了,我這邊測試也一樣有這個問題
    最原始的下載當應該是zip檔
    不過我的原始檔不知還在不在,好久以前的文章
    如果檔案正確
    用選單上的左右鍵就可調整階層

    fennser 於 2011/02/17 10:16 回覆

  • ande
  • 下載下來後是個叫做SkySM1.mxp<<這怎麼用阿...