做出CSS下拉式選單Pure CSS Menu Maker幫你輕鬆搞定

woff · 發表於 2009-11-8 19:09:00

當我們想在網頁上嵌入一個下拉式選單，通常會使用現成的Javascript程式，今天要介紹的就是不需要使用javascript，完全只靠CSS就能製作出選單的選單製作軟體，讓你輕輕鬆鬆做出美觀的下拉式選單喔～

Pure CSS Menu Maker

官方網站：http://cssmenu.com/
軟體下載：[官網下載] (426KB)

一、安裝方式
下載後解壓縮，裡面有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選單產生器：

迟汁广必 · 發表於 2014-6-15 04:30:02

顶！！！！！！！

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 做出CSS下拉式選單Pure CSS Menu Maker幫你輕鬆搞定