滑動菜單的制作

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

2、風格。3在頁面上插入一個長500pix的表格（這里說明：插入表格的目的是為了控制層在不同分辨率下保持相對的位置不變，如果你的頁面之前沒有做相關設置，那么這一部你可能要費點功夫整理一下你的頁面結構）。4將光標置入表格內，點擊菜單[插入——層]插入一個長500高20的圖層，并命名為layer1。5然后再將光標置入圖層layer1，點擊菜單[插入——層]再插入一個長500高130的圖層layer2；并將layer2的屬性中左邊距和上邊距都設置

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

4、＋”在出來的菜單中選擇[時間軸——播放時間軸]DW會彈出一個窗體，在上面的下拉菜單中選擇timeline1。然后在行為面板中確認事件為onclick好了，到這里，你可以預覽一下，當你點擊上展開按鈕時，你的圖層就會慢慢的從上而下滑動出來！怎么樣，看到了吧：）我們再給圖層添加上一個簡單的關閉動作，就是點擊關閉按鈕后圖層隱藏。選擇上關閉按鈕，轉到行為面板，點面板中的“＋”在出來的菜單中選擇[顯示隱藏層]，在跳出的窗體中選擇上layer4，然后