滑動(dòng)菜單的制作(組圖) -電腦資料

    菜單

今天應(yīng)朋友們要求，來對(duì)我網(wǎng)站上一個(gè)滑動(dòng)菜單效果寫一篇簡單的教程；在牛筋大學(xué)軟件部有一個(gè)關(guān)于層滑動(dòng)的效果，好像Itnow上的廣告也是采用的這樣效果，不用的時(shí)候隱藏，用的時(shí)候點(diǎn)擊一下按鈕層就慢慢的滑動(dòng)出來，即節(jié)省了有限的頁面空間，還達(dá)到了令人羨慕的視覺效果，感覺起來還不錯(cuò)，

滑動(dòng)菜單的制作(組圖)

。這個(gè)效果大家可以點(diǎn)擊這里察看.

   

言歸正傳，廢話少說。準(zhǔn)備工作如下：

    1． 在dw中新建一個(gè)空白文檔（或者打開你要添加效果的頁面）。

    2． 設(shè)置好你自己的css風(fēng)格。

    3．在頁面上插入一個(gè)長500pix的表格（這里說明：插入表格的目的是為了控制層在不同分辨率下保持相對(duì)的位置不變，如果你的頁面之前沒有做相關(guān)設(shè)置，那么這一部你可能要費(fèi)點(diǎn)功夫整理一下你的頁面結(jié)構(gòu)）。

    4． 將光標(biāo)置入表格內(nèi)，點(diǎn)擊菜單 [插入——層] 插入一個(gè)長500高20的圖層，并命名為layer1。

    5． 然后再將光標(biāo)置入圖層layer1，點(diǎn)擊菜單[插入——層]再插入一個(gè)長500高130的圖層layer2；并將layer2的屬性中左邊距和上邊距都設(shè)置為0，并為它指定一個(gè)你喜歡的背景色。

    6．然后重復(fù)步驟5的方法，再插入一個(gè)圖層layer3，這個(gè)圖層沒什么特殊的用處，在我的這個(gè)教程中，我只不過是為了放置幾個(gè)按鈕而已。最后我的開起來如圖：

   

TIPS：這里這么做的目的是為了給你要滑動(dòng)的圖層前面加一個(gè)擋板，只有當(dāng)點(diǎn)擊的時(shí)候圖層才從你的這個(gè)圖層下緩緩的滑動(dòng)出來。

    現(xiàn)在開始，才正式進(jìn)入到我們今天要制作的滑動(dòng)菜單的制作過程中。1

    現(xiàn)在讓我們再次重復(fù)上面的步驟5，再插入一個(gè)圖層layer4,設(shè)置圖層屬性為寬500、150高，剛好是剛才layer2和layer3的高度之和，并將圖層layer4調(diào)整到另外兩個(gè)圖層下面。如圖：

   

然后我們點(diǎn)擊圖層layer2前面的眼睛讓他閉合，這樣可以讓我們看到它下面的圖層layer4.

    這時(shí)，我們點(diǎn)擊ALT +F9打開時(shí)間軸面板，DW已經(jīng)為我們添加了默認(rèn)的時(shí)間軸Timeline1，然后，我們選中我們要滑動(dòng)的圖層layer4，在上面點(diǎn)擊右鍵，選擇[添加到時(shí)間軸]這時(shí)我們可以在時(shí)間軸面板中看到我們剛剛制定的圖層layer4，這說明，我們已經(jīng)添加成功了！

   

然后我們點(diǎn)擊時(shí)間軸上的第15楨，將圖層layer4的屬性面板中的上邊距調(diào)整為150，

電腦資料

《滑動(dòng)菜單的制作(組圖)》(http://m.clearvueentertainment.com)。到這里，一個(gè)能滑動(dòng)的圖層就算做好了，你可以拖動(dòng)時(shí)間軸上面的紅色方塊慢慢從1走向15，你就可以看到你的這個(gè)圖層慢慢的從layer2和layer3下面滑動(dòng)出來！

   

好了，現(xiàn)在我們只需要給這個(gè)會(huì)滑動(dòng)的圖層layer4設(shè)置一個(gè)可以激活他的動(dòng)作就算over了：）這之前，我已經(jīng)在我添加的layer3上插入了一個(gè)表格，并為layer4設(shè)置了兩個(gè)按鈕。

   

2

    我們先設(shè)置激活滑動(dòng)圖層的動(dòng)作。選擇上展開這個(gè)按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊在出來的菜單中選擇[時(shí)間軸——播放時(shí)間軸]DW會(huì)彈出一個(gè)窗體，在上面的下拉菜單中選擇timeline1。

   

然后在行為面板中確認(rèn)事件為onclick

   

好了，到這里，你可以預(yù)覽一下，當(dāng)你點(diǎn)擊上展開按鈕時(shí)，你的圖層就會(huì)慢慢的從上而下滑動(dòng)出來！

    怎么樣，看到了吧：）我們再給圖層添加上一個(gè)簡單的關(guān)閉動(dòng)作，就是點(diǎn)擊關(guān)閉按鈕后圖層隱藏。選擇上關(guān)閉按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊在出來的菜單中選擇[顯示隱藏層]，在跳出的窗體中選擇上layer4，然后點(diǎn)擊下面的隱藏按鈕，將其設(shè)置為隱藏，如圖：

   

好了，再預(yù)覽一下，發(fā)現(xiàn)展開后點(diǎn)擊關(guān)閉圖層就沒有了：）不過，似乎有一個(gè)問題，再次點(diǎn)擊展開的時(shí)候，似乎沒什么反應(yīng)了，那是我們還有一個(gè)動(dòng)作沒有設(shè)置。

    重復(fù)剛才的步驟5，選擇上展開按鈕，添加動(dòng)作[時(shí)間軸——轉(zhuǎn)到時(shí)間軸楨]，在跳出的窗體中的下拉菜單選擇timeline1，楨數(shù)添上1。

   

好了，這次預(yù)覽發(fā)現(xiàn)這個(gè)問題解決了。但是我們似乎還是忽略了一個(gè)問題，點(diǎn)擊關(guān)閉后這個(gè)圖層被設(shè)置為隱藏了，再點(diǎn)擊展開也沒反應(yīng)了。還是運(yùn)用老辦法，給展開按鈕添加一個(gè)動(dòng)作就可以解決了！

    重復(fù)步驟5，選擇[顯示隱藏層]，和剛才步驟6相反，這次我們選擇顯示，確定后，保證行為面板中顯示隱藏圖層的時(shí)間都是onclick。此刻展開按鈕的行為面板如圖：

   

    好，再次預(yù)覽，一切正常！

    至此，這個(gè)效果就算完成了，當(dāng)然，大家完全可以自我發(fā)揮制作出更好的效果來，但是萬變不離其宗，只要我們掌握好了時(shí)間軸配合動(dòng)作行為的運(yùn)用，所有的效果只是操作問題：）