《Easy CSS Menu》網站下拉選單自動產生器

梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
  說到網站的下拉選單,是最常見也是最實用的操控方式,但這需要點程式背景,才有辦法來完成,偏偏網頁設計都是視覺出生,因此就會四處上網找相關範例來套用,但在套用的過程中,運氣好沒問題,運氣差一點不是跑版就是沒反應,總是套的一把眼淚一把鼻涕的,因此梅干今天要來分享個好東西,那就是Easy CSS Menu,可說是視覺設計人員的救星,透過它就可快速完成各種的下拉選單,同時還可套用各種不同的樣式,且過程也很簡單,只要點一點立即就可完成,因此身為設計人員,這個工具絕不容錯過喔!

Easy CSS Menu:
軟體名稱:Easy CSS Menu
軟體版本:v3.2
軟體語言:英文
適用平台:Windows XP+
官方網站:http://www.easycssmenu.com/
軟體下載:本站下載 | 官方下載

建立下拉選單列表:
Step1
下載完畢解壓,雙響安裝完成後,進入「Easy CSS Menu」應用程式,點右邊的CSS文件圖示
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step2
進入後,在Layout中,可設定下拉選單的方向,是要橫的還是直的,預設Horizontal為橫向,接著點左上的Add Item圖示,建立按鈕選單。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step3
接著在右下角,可設定按鈕的文字、樣式,與連結。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step4
若要建立次選單,則點上方的Add Submenu圖示。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step5
一樣的右邊可設定選單文字與連結,若要再建立多個選項,這時不是按Add Submenu,而是Add Item喔!
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step6
依序就可完成,下拉選單的基礎模型啦!
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
套用下拉選單CSS樣式:
Step1
下方就有各式的模版可套用,左邊是樣式類別,右邊會有該類別的各種模式,只要點一下右邊的樣式型態,立即就會套用。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step2
就可任意的選擇各種樣式,隨點隨套用。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
輸出下拉選單:
Step1
完成後,點右上角「Save Menu as HTML」。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step2
設定好儲存路徑與名稱後,再按Next
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step3
再按下Finish就完成囉!
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
成果預覽:
Step1
接著到剛所設定的目錄下,就會看到一個資料夾與HTML檔。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step2
進到目錄後,除了有一些圖檔外,還有css與js檔,因此該選單並非單純的CSS,而是有透過js來輔助。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step3
之後要套到自已的版型時,以下這幾個區塊,依照它的架構,貼到你的網頁裡。
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器
Step4
雙響那htm檔,就可預覽結果畫面囉!夠簡單吧!
梅問題-CSS工具-《Easy CSS Menu》網站下拉選單產生器

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 7 梅留言

  • 第2梅
    Lion 說道:

    梅干 你網站的選單是怎麼做的啊? 可以套用至每個網站嗎?

    回應:
    網站中的選單,只是簡單的使用javascript所製作的,可運用在依任何網站上
  • 第1梅
    Bi 說道:

    請問只能使用橫式MENU嗎?
    我看他也有提供直式的..卻無法產生

    回應:
    直的梅干就沒試過了~~