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

1、滑動(dòng)菜單的制作滑動(dòng)菜單的制作今天應(yīng)朋友們要求，來(lái)對(duì)我網(wǎng)站上一個(gè)滑動(dòng)菜單效果寫(xiě)一篇簡(jiǎn)單的教程；在牛筋大學(xué)軟件部有一個(gè)關(guān)于層滑動(dòng)的效果，好像Itnow上的廣告也是采用的這樣效果，不用的時(shí)候隱藏，用的時(shí)候點(diǎn)擊一下按鈕層就慢慢的滑動(dòng)出來(lái)，即節(jié)省了有限的頁(yè)面空間，還達(dá)到了令人羨慕的視覺(jué)效果，感覺(jué)起來(lái)還不錯(cuò)。這個(gè)效果大家可以點(diǎn)擊這里察看言歸正傳，廢話少說(shuō)。準(zhǔn)備工作如下：1在dw中新建一個(gè)空白文檔（或者打開(kāi)你要添加效果的頁(yè)面）。2設(shè)置好你自己的css

2、風(fēng)格。3在頁(yè)面上插入一個(gè)長(zhǎng)500pix的表格（這里說(shuō)明：插入表格的目的是為了控制層在不同分辨率下保持相對(duì)的位置不變，如果你的頁(yè)面之前沒(méi)有做相關(guān)設(shè)置，那么這一部你可能要費(fèi)點(diǎn)功夫整理一下你的頁(yè)面結(jié)構(gòu)）。4將光標(biāo)置入表格內(nèi)，點(diǎn)擊菜單[插入——層]插入一個(gè)長(zhǎng)500高20的圖層，并命名為layer1。5然后再將光標(biāo)置入圖層layer1，點(diǎn)擊菜單[插入——層]再插入一個(gè)長(zhǎng)500高130的圖層layer2；并將layer2的屬性中左邊距和上邊距都設(shè)置

3、為0，并為它指定一個(gè)你喜歡的背景色。6然后重復(fù)步驟5的方法，再插入一個(gè)圖層layer3，這個(gè)圖層沒(méi)什么特殊的用處，在我的這個(gè)教程中，我只不過(guò)是為了放置幾個(gè)按鈕而已。最后我的開(kāi)起來(lái)如圖：TIPS：這里這么做的目的是為了給你要滑動(dòng)的圖層前面加一個(gè)擋板，只有當(dāng)點(diǎn)擊的時(shí)候圖層才從你的這個(gè)圖層下緩緩的滑動(dòng)出來(lái)?，F(xiàn)在開(kāi)始，才正式進(jìn)入到我們今天要制作的滑動(dòng)菜單的制作過(guò)程中。我們先設(shè)置激活滑動(dòng)圖層的動(dòng)作。選擇上展開(kāi)這個(gè)按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊面板中的“

4、＋”在出來(lái)的菜單中選擇[時(shí)間軸——播放時(shí)間軸]DW會(huì)彈出一個(gè)窗體，在上面的下拉菜單中選擇timeline1。然后在行為面板中確認(rèn)事件為onclick好了，到這里，你可以預(yù)覽一下，當(dāng)你點(diǎn)擊上展開(kāi)按鈕時(shí)，你的圖層就會(huì)慢慢的從上而下滑動(dòng)出來(lái)！怎么樣，看到了吧：）我們?cè)俳o圖層添加上一個(gè)簡(jiǎn)單的關(guān)閉動(dòng)作，就是點(diǎn)擊關(guān)閉按鈕后圖層隱藏。選擇上關(guān)閉按鈕，轉(zhuǎn)到行為面板，點(diǎn)面板中的“＋”在出來(lái)的菜單中選擇[顯示隱藏層]，在跳出的窗體中選擇上layer4，然后