TShopping
標題:
做出CSS下拉式選單Pure CSS Menu Maker幫你輕鬆搞定
[打印本頁]
作者:
woff
時間:
2009-11-8 19:09
標題:
做出CSS下拉式選單Pure CSS Menu Maker幫你輕鬆搞定
當我們想在網頁上嵌入一個下拉式選單,通常會使用現成的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選單產生器
:
CSSmenumaker.com/
PureCSSMenu.com
作者:
迟汁广必
時間:
2014-6-15 04:30
顶!!!!!!!
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2