在網(wǎng)頁(yè)展示平面有限的情況下，折疊菜單是一個(gè)很不錯(cuò)的選擇。這種菜單在一般情況下是折疊起來(lái)的，只有當(dāng)瀏覽者將鼠標(biāo)移動(dòng)到菜單上時(shí)，菜單才會(huì)滑動(dòng)展開(kāi)。

　　效果說(shuō)明

　　當(dāng)鼠標(biāo)不在菜單上時(shí)，菜單處于折疊狀態(tài)，看起來(lái)是很普通的一個(gè)菜單欄，如圖 18-1 所示。當(dāng)鼠標(biāo)移動(dòng)到菜單欄上時(shí)，該菜單的子菜單就會(huì)慢慢滑動(dòng)展開(kāi)，如圖 18-2 所示。

　　創(chuàng)作思想

　　先在一個(gè)圖層中輸入文字，形成菜單折疊時(shí)的狀態(tài)，再使用圖層展開(kāi)時(shí)間軸動(dòng)畫(huà)來(lái)實(shí)現(xiàn)滑動(dòng)展開(kāi)菜單的效果。

　　操作步驟

　?。?1 ）新建文件并添加層。新建一個(gè)網(wǎng)頁(yè)文件，在網(wǎng)頁(yè)中添加一個(gè)父層（第一級(jí)的層）和一個(gè)子層（第二級(jí)的層），分別設(shè)置兩個(gè)圖層的大小和位置，如圖 18-3 所示。

　?。?2 ）設(shè)置表格和文字。在 layer1 層中插入表格，設(shè)置好表格的高度和背景，然后在表格內(nèi)輸入文字并設(shè)置好文字的格式，如圖 18-4 所示。

　　（ 3 ）設(shè)置 layer2 層。設(shè)置 layer2 層的背景顏色，然后在其上輸入文本并設(shè)置超鏈接，再將 layer2 層添加到時(shí)間軸上，以后便可對(duì) layer2 層進(jìn)行時(shí)間軸動(dòng)畫(huà)操作，如圖 18-5 所示。

　?。?4 ）新建一個(gè)時(shí)間軸 Timeline2 ，然后將 layer2 層添加到新的時(shí)間軸上，如圖 18-6 所示。

　　提示：不同的時(shí)間軸可以實(shí)現(xiàn)對(duì)不同對(duì)象的控制，也可以實(shí)現(xiàn)多個(gè)不同動(dòng)畫(huà)。

　?。?5 ）設(shè)置時(shí)間軸。分別對(duì)時(shí)間軸 Timeline1 的第 1 幀和時(shí)間軸 Timeline2 的第 15 幀進(jìn)行設(shè)置（這里以第 15 幀作為動(dòng)畫(huà)的最后一幀），如圖 18-7 所示。

　　提示：只需要改變時(shí)間軸的關(guān)鍵幀，就可以直接生成動(dòng)畫(huà)效果，本例將時(shí)間軸 Timeline1 第 1 幀中 Layer2 層的高設(shè)置為 0px ，這樣就生成了層慢慢滑出的動(dòng)畫(huà)效果。

　　（ 6 ）添加行為。選擇表格中的第一個(gè)單元格，然后為單元格添加 onMouseOver （鼠標(biāo)移到單元格上面時(shí)）時(shí)的行為到播放時(shí)間軸 Timeline1 ，如圖 18-8 所示。

　?。?7 ）繼續(xù)添加行為。再為該單元格添加 4 個(gè) onMouseOut （鼠標(biāo)移開(kāi)時(shí)）行為，參數(shù)設(shè)置如圖 18-9 所示。

　?。?8 ）添加 2 個(gè)行為。選擇 layer2 層，并分別添加兩個(gè) onMouseOver 和兩個(gè) onMouseOut ，具體操作如圖 18-10 所示。

　?。?9 ）保存網(wǎng)頁(yè)文件，然后在 IE 中進(jìn)行預(yù)覽，本實(shí)例操作完畢。通過(guò)時(shí)間軸上不同對(duì)象在不同時(shí)間的狀態(tài)，再結(jié)合時(shí)間軸的播放、停止和跳轉(zhuǎn)是 Dreamweaver 中實(shí)現(xiàn)動(dòng)畫(huà)效果的最基本方法，讀者可以充分利用這些功能來(lái)實(shí)現(xiàn)更精彩的效果。