|
剛才我們看到MenuMachine調(diào)板中有動(dòng)作的選項(xiàng)，這意味著我們可以為菜單項(xiàng)添加動(dòng)作。比如我們想要做一個(gè)替換圖片的效果，首先我們將一幅圖片放到網(wǎng)頁(yè)中，在檢查器調(diào)板中為圖片設(shè)置名字，如下圖紅色箭頭處。
注意下圖中使用了基于CSS的版面網(wǎng)格，因此可以將圖片與菜單排列在任意位置，如果沒(méi)有使用版面網(wǎng)格，則不能如下圖般排列。
然后給網(wǎng)頁(yè)添加標(biāo)頭動(dòng)作，內(nèi)容是將剛才的圖片替換為其他的圖片，如下圖所示，尤其注意紅色箭頭處，一定要設(shè)置為調(diào)用時(shí)(即OnCall)。在這里添加了多個(gè)標(biāo)頭動(dòng)作，分別替換為不同的圖像。特別還設(shè)置了一個(gè)替換回原始圖像的動(dòng)作。
它們都是我MSN上使用的頭像，可在教程末尾另存為。
然后在網(wǎng)頁(yè)中點(diǎn)擊使用中的菜單，檢查器調(diào)板就會(huì)切換到MenuMachine的內(nèi)容，在動(dòng)作中作如下設(shè)定。分別為5個(gè)項(xiàng)目指定鼠標(biāo)經(jīng)過(guò)及鼠標(biāo)移出時(shí)執(zhí)行的動(dòng)作。思路是：經(jīng)過(guò)時(shí)替換原始圖像為各圖像，移出時(shí)則還原為原始的圖像。
現(xiàn)在在瀏覽器中就可以看到大致如下動(dòng)畫(huà)的效果了。如果播放完畢，可以在其上點(diǎn)擊右鍵選擇“播放”。
我們看到的動(dòng)態(tài)菜單效果，其實(shí)都是由JavaScript腳本代碼寫(xiě)成的，菜單飛梭將腳本代碼分為兩類(lèi)：一類(lèi)是核心代碼，一類(lèi)是菜單項(xiàng)目專(zhuān)屬代碼。菜單飛梭不會(huì)將JavaScript腳本代碼直接寫(xiě)入到頁(yè)面中，而是將其存放于一個(gè)專(zhuān)門(mén)的目錄(默認(rèn)為站點(diǎn)中的menumachine目錄，可在參數(shù)設(shè)定中修改)，然后在網(wǎng)頁(yè)中對(duì)目錄中的腳本文件進(jìn)行讀取。這樣的好處是腳本文件在讀取一次之后就會(huì)保留在緩存中，不必在打開(kāi)不同的頁(yè)面后重復(fù)讀取。因此在上傳網(wǎng)頁(yè)的時(shí)候，也要將菜單飛梭的目錄一并上傳。
需要注意的是，如果在網(wǎng)頁(yè)中設(shè)定了動(dòng)作，則需要將GoLive的腳本庫(kù)也同時(shí)上傳，除非指定GoLive將代碼寫(xiě)入到頁(yè)面文件中。具體的方法可參照GoLive的視頻教程。
菜單飛梭在每次啟動(dòng)GoLive后都會(huì)加載，如果不需要使用，可以在GoLive的首選項(xiàng)_模塊中關(guān)閉，如下圖。
最后要告訴大家的是，盡管菜單飛梭可以實(shí)現(xiàn)各種動(dòng)態(tài)特效，但這些特效會(huì)降低系統(tǒng)運(yùn)行的速度，如果瀏覽者的系統(tǒng)配置不高的話很可能“舉步維艱”。且動(dòng)態(tài)效果存在著對(duì)IE以外瀏覽器的兼容性問(wèn)題，因此不是特別需要就不必使用。當(dāng)然，IE瀏覽器占95%以上的實(shí)際使用率，是大部分用戶(hù)選用的瀏覽器。只有一些電腦資深玩家會(huì)偶爾使用Opear和FireFox。此外MAC平臺(tái)上使用的是safari瀏覽器。
如果是針對(duì)企業(yè)網(wǎng)站，處于兼容性和運(yùn)行速度的考慮，應(yīng)盡可能不使用菜單飛梭來(lái)制作菜單。
范例中所使用的圖像和小圖標(biāo)可以從這里下載。菜單飛梭目前版本是2，大家可到大師之路網(wǎng)站的資源庫(kù)下載本例中的漢化中文版。地址為：http://99ut.com/resource 若有其他問(wèn)題，可通過(guò)http://m.95time.cn/bbs/NewsDetail.asp?lp=1&id=2376898進(jìn)入討論組。
出處：藍(lán)色理想
責(zé)任編輯：趙鵬
上一頁(yè) 用菜單飛梭創(chuàng)建動(dòng)態(tài)酷菜單 [4] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 5 頁(yè) 用菜單飛梭創(chuàng)建動(dòng)態(tài)酷菜單 [5]
