DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 用菜單飛梭創建動態酷菜單
用菜單飛梭創建動態酷菜單
編輯:CSS進階教程     

MenuMachine是一個制作菜單的工具,具有使用簡單,制作快速,兼容性高等特點,是GoLive上著名的擴展模塊。只是在國內很少為人所知,為了方便大家的學習和使用,我已經將其中的重要部分做了漢化,並暫時起了一個中文名稱叫做“菜單飛梭”。下面我們就來學習一下如何使用它在網頁中創建菜單。本教程有視頻版本,可通過 http://99ut.com/tutorial 觀看。

啟動GoLive並開啟站點,然通過菜單【MenuMachine_開啟MenuMachine調板】,就會出現如下左圖所示的調板,調板中會列出當前站點中的菜單項目。大家要先弄明白菜單飛梭的工作方式,它並不是直接在頁面中創建菜單,而是通過一個專門的編輯器來完成,完成後的菜單項目將出現在這個調板中。然後我們再從這個調板中拖動所需的菜單項目到網頁當中。可以創建多個菜單項目,按照需要來使用。
現在還沒有任何項目,所以我們按照提示在箭頭所指處點擊以創建一個新的菜單項目。

點擊後就會自動開啟主編輯器,如下圖。首先在標志1處為菜單項目取個名字,比如圖中的main1。然後在標志2處的主題中選擇一個主題,不同的主題有不同的菜單風格,可以在標志3處看到預覽。以後也可以將我們自己創建的菜單作為主題來使用。為了更全面地學習,我們選擇最基礎的“blank menu”主題。最後點擊標志4處的右向箭頭以進入下一步。需要注意的是,如果沒有輸入菜單名將無法繼續。

現在我們進入最主要的設定界面,如下圖所示。紅色箭頭處是3個設定類,分別是:
Item(單項設定):用來對菜單結構中的任何一項進行單獨設定,內容最多。
Block(層級設定):用來對某級別的所有項目進行設定,內容相對少些。
Global(整體設定):用來對所有項目進行設定,內容最少。
綠色箭頭處是菜單結構的預覽,同時也可以反映出鼠標懸停等效果。右下角的橙色箭頭處可以更改預覽區域的背景顏色。它只提供視覺參考,而並不對應用菜單項目的網頁產生影響。如果將來要把菜單放置在一個紫色背景的網頁中,那麼就可以在編輯器中設定為紫色背景,這樣比較容易判斷色彩搭配方式。

現在大家要明確一下菜單的概念。菜單是具有多個層次的,通常來說,一開始就顯示在網頁中的,是頂級菜單項目,然後通過鼠標懸停(或點擊,大多數情況下是懸停)的方式,出現下級的子菜單。因此在制作之前首先要先規劃好自己的菜單層次結構。現在我們現在是這樣來規劃的:
頂級菜單有3項,分別是教程列表、資源庫、友情鏈接。
教程列表下設2個子級項:圖形處理、網頁制作。圖形處理下有Photoshop、Illustrator。網頁制作下有GoLive、DreamWeaver。
資源庫下設3個子級項:Photoshop、Illustrator、GoLive。
友情鏈接下設置4個子級項:大師之路(99ut.com)、藍色理想(blueidea.com)、太平洋(pconline.com.cn)、天極網(yesky.com)。
現在我們點擊下圖紅色箭頭處的按鈕創建同級菜單項,按照規劃,總共要有3個項目。
藍色箭頭處是保存按鈕,在修改後應及時保存。在後面我們將學習如何將菜單項目應用到網頁中,以後點擊保存就可以在網頁中看到修改後的效果,而不必退出編輯器。

Item(單項設定)中將菜單文字改為相應的內容。可以設置寬度和高度。需要注意的是,高度的修改將影響同級所有項目。另外也可以在預覽窗口通過鼠標拖動來修改,如下動畫所示。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved