彈出菜單在網(wǎng)頁(yè)制作中是一種非常常用的菜單方式,這種菜單不但制作簡(jiǎn)單,而且效果也很好。
效果說(shuō)明
本實(shí)例所要完成的效果是當(dāng)鼠標(biāo)移動(dòng)到文字上時(shí),就會(huì)彈出一個(gè)漂亮的菜單,如圖17-1和圖17-2所示。
創(chuàng)作思想
本實(shí)例首先在網(wǎng)頁(yè)中輸入一行文字,并對(duì)文字做一個(gè)特殊的超鏈接,然后利用dreamweavermx2004自帶的行為制作彈出菜單。
操作步驟
(1)輸入文字并設(shè)置超鏈接。在網(wǎng)頁(yè)中輸入文字,因?yàn)閱为?dú)的文本文字是無(wú)法添加行為的,按照dreamweaver中的約定,將文字的超鏈接設(shè)置為“javascript:;”才能夠添加行為。所以將文字的超鏈接設(shè)為“javascript:;”,并執(zhí)行【顯示彈出式菜單】行為,如圖17-3所示。
(2)設(shè)置菜單項(xiàng)和子菜單項(xiàng),并為菜單設(shè)置超鏈接,然后安排好各個(gè)菜單的次序,如圖17-4所示。
(3)設(shè)置頁(yè)面元素。將菜單設(shè)置為垂直菜單,并分別設(shè)置菜單的字體、字號(hào)、對(duì)齊方式、一般狀態(tài)和鼠標(biāo)滑過(guò)時(shí)的狀態(tài),如圖17-5所示。
(4)設(shè)置【高級(jí)】標(biāo)簽。在【高級(jí)】標(biāo)簽選項(xiàng)中設(shè)置菜單的延遲時(shí)間,以及是否顯示菜單邊框。然后設(shè)置邊框的寬度、顏色、陰影、高亮,如圖17-6所示。
注意:【菜單延遲】中時(shí)間的單位是毫秒(ms),1000毫秒等于1秒,在設(shè)置時(shí)注意換算。
(5)設(shè)置的x軸和y軸參數(shù)。在【位置】標(biāo)簽選項(xiàng)中設(shè)置彈出菜單的x軸和y軸參數(shù),這兩個(gè)參數(shù)表示彈出菜單左上角到網(wǎng)頁(yè)左上角的距離,如圖17-7所示。
(6)保存網(wǎng)頁(yè)文件,然后在瀏覽器中打開(kāi)該網(wǎng)頁(yè),將鼠標(biāo)光標(biāo)移動(dòng)到文字上方時(shí)即可看到有菜單彈出,本實(shí)例操作完畢。通過(guò)dreamweaver,可以快速制作出以往只能用復(fù)雜代碼才能實(shí)現(xiàn)的彈出菜單,這樣可以實(shí)現(xiàn)復(fù)雜菜單的彈出和收縮,方便使用又能讓頁(yè)面美觀、整潔。