13styles:CSS多層選單產生器

13styles.com可以讓使用者在線上製作純CSS+XHTML的多層選單(精確地說是主要與次要兩層),理論上共有13種樣式,不過目前只有4種可以選擇。

要使用13styles的服務必須先註冊成為會員,然後透過Create a Menu開始製作選單。

首先,使用者須設定選單名稱,並選擇一款樣式
13styles 01

步驟二,從右下角選擇選單第一層的選項數量,最多10個,然後按下「ADD NEW」:
13styles 02

步驟三,填入選項名稱(Menu Item Title)、連結網址(Link URL)、連結目標(Target):
13styles 03

步驟四,為選單加入第二層選項,直接點擊選項的連結進入設定;也可以使用ORDER欄位的箭頭來調整選項的順序:
13styles 04

步驟五,重做步驟二、三來加入第二層選項。

步驟六,可以預覽成品,確定無誤後,按下「Download Source Code」連結,即可下載原始碼檔案。
13styles 05

下載回來的原始碼檔案非常簡單,包含了XHTML檔案、CSS檔案(有for IE的版本)和選單的圖檔。要注意的是,如果選單的選項有使用中文的話,必須將XHTML檔案的文字編碼改為UTF-8才能正常顯示(預設為iso-8859-1,中文會變亂碼)。

利用13styles製作的多層選單可以適用於目前幾種主流的瀏覽器,網站上有詳細的相容性說明表格可供參考。有需要的人也可以利用我的範例成品測試看看。

2007/09/22補記:現在13styles已經不提供線上客製化產生原始碼的服務了,有需要的人可以試用CSS Menu Generator這個網站。

可能的相關文章:

 
 
 

“13styles:CSS多層選單產生器”有 8 則回應

  1. rein
    30. June 2006 at 10:12

    如果使用 13styles:CSS多層選單產生器
    產生選單…若要符合無障礙網頁需要怎修改?
    是否有能直接產生出符合無障礙網頁且又能生成選單的玩意@@”

  2. yoren
    30. June 2006 at 17:03

    Rein:

    這個選單再移除CSS檔案之後,
    便會成為階層式的選單連結,
    應該可以被文字瀏覽器和其它舊版瀏覽器讀取才對,
    請問你所指的無障礙還需符合哪些規範呢?

  3. rein
    2. July 2006 at 23:12

    Hey yoren:

    行政院研究發展考核委員會
    http://enable.nat.gov.tw/
    有提到:

    網頁開發者在設計網頁內容時,為了增加網頁的可及性及確保網頁上的元素都有滑鼠以外的操作介面,需注意下列:

    確保需要滑鼠來啟動的事件,都可以使用鍵盤或其他方式來啟動。

    例如使用 Tab 鍵來選擇選單選項,並無法跳到選單內..
    以你的範例:
    http://ideagrapes.com/13styles/style4.html

    來做測試…不知這樣描述是否可明瞭我的意思?
    簡單的說,那選單只能使用滑鼠操作,並無法使用鍵盤操作 @@”

  4. yoren
    2. July 2006 at 23:29

    Rein:

    瞭解你的意思了,
    如果要使用鍵盤來操作多層選單,
    需要javascript來幫忙,
    而13styles並不提供這樣的功能。

    目前我還沒有看過這類的選單製造機可以用鍵盤來啟動下一層選單,
    如果你有找到的話希望能與我分享,
    謝謝!

  5. [2006/06/20 - 2006/07/07] Links for HEMiDEMi at 異人の館
    26. October 2006 at 10:38

    [...] Idea Grapes » 13styles:CSS多層選單產生器 不會用 CSS 寫多層選單嗎?有了它您還怕什麼^^ [...]

  6. Anonymous
    29. May 2008 at 04:26

    您好:

    可以給我整個範例成品的css原始檔嗎??
    我想參考一下
    寫了很久都寫不出在ie6可用的多層選單
    msn mail: yi_ting1221@msn.com

    謝謝!!

  7. ting1221
    29. May 2008 at 04:26

    您好:

    可以給我整個範例成品的css原始檔嗎??
    我想參考一下
    寫了很久都寫不出在ie6可用的多層選單
    msn mail: yi_ting1221@msn.com

    謝謝!!

  8. yoren
    29. May 2008 at 09:03

    Ting:

    CSS在這裡,直接下載就可以了:http://ideagrapes.com/13styles/style.css

歡迎留言: