Board logo

主題: [其他] [轉貼] 13styles：CSS多層選單線上產生器 [打印本頁]
發表人: jocosn    時間: 2006-7-20 05:03 PM     主題: [轉貼] 13styles：CSS多層選單線上產生器

13styles：CSS多層選單產生器

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

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

首先，使用者須設定選單名稱，並選擇一款樣式：
點擊查看全圖

步驟二，從右下角選擇選單第一層的選項數量，最多10個，然後按下「ADD NEW」：
點擊查看全圖

步驟三，填入選項名稱（Menu Item Title）、連結網址（Link URL）、連結目標（Target）：
點擊查看全圖

步驟四，為選單加入第二層選項，直接點擊選項的連結進入設定；也可以使用ORDER欄位的箭頭來調整選項的順序：
點擊查看全圖

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

步驟六，可以預覽成品，確定無誤後，按下「Download Source Code」連結，即可下載原始碼檔案。
點擊查看全圖

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

利用13styles製作的多層選單可以適用於目前幾種主流的瀏覽器，網站上有詳細的相容性說明表格可供參考。

完成品參考
http://ideagrapes.com/13styles/style4.html

---------------
[使用心得] 步驟二即失敗

[jocosn 在  2006-7-20 05:05 PM 作了最後編輯]



歡迎光臨 TWed2k (http://twed2k.org/) Powered by Discuz! 4.1.0