如何製作CSS多層下拉式選單?(不用Javascript)

製作網頁時,很多人會想要讓網頁選單擁有下拉的功能,因為這樣感覺比較炫,不過要製作下拉選單的選單可不容易,因為如果不太會CSS,那弄起來可是很頭大的。現在你不用再煩惱這樣的問題了,因為有現成的工具「Pure CSS Menu Maker」,只要滑鼠點一點,就可以產生多層的下拉選單。

這個Pure CSS Menu Maker選單製作軟體是完全免費的,可以製作多層的選單,而且不需使用Javascript,完全純CSS就達到的選單,是一個不可多得的好工具。透過滑鼠點擊設定,就可以輕鬆完成下拉選單,你完全不需去考慮瀏覽器相容問題,因為他都幫你處理好了,在各大新版瀏覽器都可以正常使用喔!

平常想要製作多層選單,想必大家就會開始拼命Google多層選單,找找看有沒有人分享語法?不過現在不用這麼麻煩了,只要利用「Pure CSS Menu Maker」這個小巧的軟體,就可以產生兩層、三層、四層以上的選單都不是問題。而且我們也不需去擔心瀏覽器相容性問題,目前它支援IE8以上、Chrome、Safair、Opera、Firefox等等。

不過眼尖的朋友會發現,奇怪?那IE7、IE6支援嗎?喔~真不巧,他不支援IE7和IE6,所以使用這軟體產生選單前可能要稍微注意一下,它不相容於IE7以下的IE瀏覽器,這是比較可惜的地方,如果未來大家使用IE8一定是個趨勢,而且很多大網站也漸漸不支援IE6,所以就放心地使用吧XD!

  • 軟體名稱:Pure CSS Menu Maker
  • 軟體性質:免費軟體
  • 軟體語言:英文
  • 官方網站:http://cssmenu.com
  • 軟體下載按這裡

第1步 開啟軟體後,點擊左方的按紐新增專案。

如何製作CSS多層下拉式選單?(不用Javascript)

第2步 接著請選擇選單類型,然後設定儲存路徑,最後點擊﹝Okay﹞產生選單。

  • Horizontal:橫式
  • Vertical:直式

如何製作CSS多層下拉式選單?(不用Javascript)

第3步 產生選單後,預設會有一些選單,可以透過左上方的選單按鈕進行新增、刪除或修改選單,中間區塊是調整樣式,右邊是即時預覽。

如何製作CSS多層下拉式選單?(不用Javascript)

第4步 在中間部分,這是調整樣式以及選單網址的部分,你可以點擊【Content】進行選單名字修改(Text)或是加入網址(URL)以及選擇開啟的方式(Target_Frame)。

如何製作CSS多層下拉式選單?(不用Javascript)

第5步 切換到【Style】,可以調整選單的樣式,例如文字的粗細、選單高寬、字型、字體大小等等。當然這部分還有子項目可以切入設定,像是選單的顏色等等,大家可以自己點點看、摸摸看喔!

如何製作CSS多層下拉式選單?(不用Javascript)

第6步 當你設定都完成後,可以點左上角的磁片進行儲存檔案,然後再點﹝Generate Menu﹞產生選單!

值得一提的是雖然可以儲存檔案,可是卻不能開啟已經存在的專案,因為免費版不支援這樣的功能,所以設定選單時要小心,別關掉視窗了。

如何製作CSS多層下拉式選單?(不用Javascript)

第7步 點一下「HTML file」連結,就可以立刻使用瀏覽器開啟預視囉!

如何製作CSS多層下拉式選單?(不用Javascript)

第8步 以下這是在Chrome下觀看的狀況,選單正常,記得使用一下其他瀏覽器查看一下有沒有正常喔!

如何製作CSS多層下拉式選單?(不用Javascript)

第9步 如果在第7步驟點了「Menu folder path」可以開啟原始檔案。裡面有很多檔按,可是實際上影響選單的只有畫面中圈選的檔案,分別是:arrow-down.gif’、arrow-right.gif、cm-style.css、puee-css-menu.htm。

如何製作CSS多層下拉式選單?(不用Javascript)

第10步Notepad++開啟「puee-css-menu.htm」檔案其中需要的部分只有前面的引入CSS部分,和下方的選單程式碼而已,把它們移植、整合到你的網站,就可以了喔!

如何製作CSS多層下拉式選單?(不用Javascript)



  • Skymen

    請問css多層選單功能的選單名稱可以使用資料庫方式出來嗎?

    • http://sofree.cc/s9011514/ 香腸

      可以辦到。像WordPress,就是使用PHP+MYSQL出來的囉!

  • QQ

    請問如果我有自己做的圖片想要做成像下拉式選單那樣 但我是要用橫的 從最左邊點下去會有相對應標題的圖跑出來 當然裡面有些小標題要在灌上超連結 不知道該怎麼做呢沒什麼頭緒QQ

    香腸回應:
    這你可能要額外爬文,因為這部分我也不太會寫~~

  • http://h-sphere.tk Jonnes

    还算可以,就是做的太土气了

    香腸回應:
    對阿~免費軟體功能受限

  • http://blog.yam.com/qooboo FGO

    正好在傷腦筋我的選單不夠優~
    介紹的這個軟體似乎不錯用^^

    香腸回應:
    可以試試看~

  • http://tfeng.org 聽 。風

    我記得大致的原理是用select的控制項吧
    然後把拉的地方隱藏住

    香腸回應:
    嗯嗯?

  • http://n.c7y.in stroll

    一直很喜欢下拉菜单,很cool~

    香腸回應:
    ^^

  • http://fu9506.acaro.org 飯飯

    耶~

    好東西

    香腸回應:
    XD

  • http://scl13.com Sinchen

    我覺得應該來個進階版,搭配WP分類輸出Code來達到CSS下拉選單的效果。

    香腸回應:
    大陸很多教學耶XDD 我有看到就是了