木笛雅設

看到垂直收放式的下拉選單， 很像資料夾結構一般的網站覺得滿酷嗎？
今天要介紹的這個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