如何在網頁上做出CSS下拉式選單?免費的Pure CSS Menu Maker幫你輕鬆搞定!

14
27,095 人次

image

今天阿正老師要介紹一套免費小軟體–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】,接著選擇要製作水平或垂直,並選擇一個要儲存檔案的資料夾。

image

2. 畫面分成三個部份:建立選單、選單內容及預覽畫面

image

3.建立選單的部份,功能如下:

image

  • 1.增加選單
  • 2.增加子選單
  • 3.刪除選單
  • 4.調整選單

4.選單內容共有三頁:

Content可以輸入選單中的文字、超連結及連結的頁框

image

Style裡面又分成三頁,可以設定選單的字型,以及選單在正常狀態跟滑鼠經過(rollover)時的背景/文字顏色。

image

Output分頁是設定HTML的文件型態,一般來說可以不用設定。

5.完成之後,從右邊的預覽視窗可以看到選單設計好的結果,如果你的網頁背景色不是白色,可以從上方的【Options】選單,按下【Menu Preview Backgourd Color】來挑選背景色。

image

6.全部完成之後,按下上方的〔Generate Menu〕按鈕(或按鍵盤的[F9]),建立網頁檔案(共三個)。

image

如果要將該選單嵌入到其他網頁中,可以先用文書編輯器打開pure-css-menu.htm

image

將<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選單產生器

14 意見

  1. […] 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 […]

發表迴響