今天阿正老師要介紹一套免費小軟體–Pure CSS Menu Maker,它能讓你輕鬆製作出簡單又美觀的CSS下拉式選單,而且完全不需要使用Javascript語法,相當方便好用。想在網頁上嵌入下拉選單的網頁設計者不妨試試看這套好用的工具吧!
當我們想在網頁上嵌入一個下拉式選單,通常會使用現成的Javascript程式,今天要介紹的就是不需要使用javascript,完全只靠CSS就能製作出選單的選單製作軟體,讓你輕輕鬆鬆做出美觀的下拉式選單喔~
Pure CSS Menu Maker
|
一、安裝方式
下載後解壓縮,裡面有setup.exe與setup.msi,擇一執行即可。
二、使用說明
Pure CSS Menu Maker的操作很簡單,幾個步驟就成製作一個精美的下拉選單了
1.開啟新專案:按下新增專案按鈕,或是從【File】選單選擇【New Project】,接著選擇要製作水平或垂直,並選擇一個要儲存檔案的資料夾。
2. 畫面分成三個部份:建立選單、選單內容及預覽畫面。
3.建立選單的部份,功能如下:
- 1.增加選單
- 2.增加子選單
- 3.刪除選單
- 4.調整選單
4.選單內容共有三頁:
Content可以輸入選單中的文字、超連結及連結的頁框
Style裡面又分成三頁,可以設定選單的字型,以及選單在正常狀態跟滑鼠經過(rollover)時的背景/文字顏色。
Output分頁是設定HTML的文件型態,一般來說可以不用設定。
5.完成之後,從右邊的預覽視窗可以看到選單設計好的結果,如果你的網頁背景色不是白色,可以從上方的【Options】選單,按下【Menu Preview Backgourd Color】來挑選背景色。
6.全部完成之後,按下上方的〔Generate Menu〕按鈕(或按鍵盤的[F9]),建立網頁檔案(共三個)。
如果要將該選單嵌入到其他網頁中,可以先用文書編輯器打開pure-css-menu.htm
將<head>標籤中的
<link href=”cm-style.css” rel=”stylesheet” type=”text/css”>
複製到你的網頁的<head>區塊中,另外將<body>中的
<div style=”display: table”>一直到</div>
複製到網頁中的<body>區塊中,要出現選單的位置。最後將cm-data.xml跟cm-style.css一併複製到網頁的資料夾中,就可以完成CSS選單了。
FAQ
Q:這套軟體做出來的CSS選單,支援哪些瀏覽器呢?
A:目前支援有:IE(8.0以上)、Firefox、Chrome、Safari、Opera、konqueror、Netscape…等。
※如果你希望在IE 7.0上使用CSS選單,可以試試看下面兩種線上CSS選單產生器:
[…] This post was mentioned on Twitter by 阿正老師 and alvinliu, Bruce Liu. Bruce Liu said: [RSS feed] 如何在網頁上做出CSS下拉式選單?免費的Pure CSS Menu Maker幫你輕鬆搞定!: 今天阿正老師要介紹一套免費小軟體–Pure CSS Menu Maker,它能讓你輕.. http://bit.ly/doGFK […]
我測試過後,在IE7不能正常執行,FIREFOX3.5是OK
主要是選單下拉後無法選取,其餘顯示皆正常。
後續更換IE8看看XD..
IE8可以~
阿正老師,我看到官網支援到的是IE8以上,沒有支援到IE7。
官網是寫8.0沒錯,但是我用IE 7.0測試官網的範例是ok的,以為7.0沒問題,不過用這套做出來的CSS menu似乎就不行了…
Thanks ~ 好用好用 !!
很方便的軟體阿
網頁設計
網頁設計公司
嗯嗯..不過在等一陣子後,這套軟體還是很方便很好用的,謝謝!阿正老師~
我有子選單的選項是整個背景都會是箭頭符號
請問有沒有什麼辦法解決壓
謝謝分享。
請問FC2的語法該怎麼處理,
我放進去以後 完全沒有變成下拉是選單的樣子出現
而是只有普通的連結
我都安裝完畢了,
也照你的方法放進去修改
可是並沒出現下拉式選單…
只是普通的連結
該怎麼處理?
想問一下,用中文字作為menu的heading,出來時會亂碼,請問有甚麼方法可以解決?
本人發現Menu不能使用中文字,一用便出現亂碼…要該如何改呀?
不好意思我想請問說,怎麼把做好的下拉式選單弄到自己的網站裡的特定位置?