查看積分策略說明發表回覆
Discuz! 代碼
提示插入
直接插入
說明訊息

插入粗體文本 插入斜體文本 插入下劃線 置中對齊 插入超級連結 插入信件位址 插入圖像 插入 flash 插入代碼 插入引言 插入列表
刪除線 直線分隔線 虛線分隔線
    
添加文字底框
內容 [字數檢查]:

表情符號

更多 Smilies
字型大小 |||
溫馨提示:本區開放遊客瀏覽。


文章關鍵字 : [功能說明]
(關鍵字可加強搜索準確性, 如關鍵字多於一組, 請以 , 作分隔, e.g. : 阿笨,shiuh,第一笨)

 關閉 URL 識別 | html 禁用
 關閉 表情符號 | 表情符號 可用
 關閉 Discuz! 代碼 | Discuz! 代碼 可用
使用個人簽名
接收新回覆信件通知
推薦放檔網絡空間

檔案(Torent, zip等)
  1. freedl
  2. multiupload
  3. btghost
  4. 便當狗
  5. mediafire
  6. pillowangel
圖片(JPG, GIF等)
  1. hotimg
  2. tinypic
  3. mousems2
  4. imageshack
  5. imm.io
>>>歡迎推薦好用空間


最新10篇文章回顧
jocosn

 發表於 2006-7-20 05:03 PM

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 作了最後編輯]





所在時區為 GMT+8, 現在時間是 2024-11-24 08:17 PM
清除 Cookies - 連絡我們 - TWed2k © 2001-2046 - 純文字版 - 說明
Discuz! 0.1 | Processed in 0.017332 second(s), 6 queries , Qzip disabled