Dreamweaver 8.0 Tutorial—How To Create The Menu Showing Effect

The menu spread effect is very common in the web page. When you view web pages and the mouse are on the menu, the menu list will show automatically. When the mouse leaves, the menu list is not showed. This effect can make your web page clear. Especially, when the web site is used for governments, colleges, and big companies, the effect is more common. How can we mater this common effect? Now follow me step by step.



Open your web page.


Select the text “front page”. Put “#” into the link textbox in the prosperities inspector, creating a blank link. Like the following picture showing:



Select the text “front page”, put the following codes into the right position. The codes are like this:

id=”link” onmouseleave=HideMenu() onmouseenter=ShowMenu()



Select the [insert]-[form]-[layer] command, inserting a layer. Set its properties in the properties inspector. Set its ID as mmuDIV, length as 18, and width as 71,and height as 46, and top as 159. then set its color as gold.



Select the layer, put the following codes in to the right position. The codes are like this:



Put the following codes into the section between <body> and </body>.


Save the document and preview the effect. The left picture is the effect of mouse leaving. And the right picture is the effect of mouse on. As the following picture showing:



Now the special effect of showing the menu is OK. let us look back it. firstly, we give the text a link and create a layer to show the lists. Then we write some codes to carry out the mouseleave and mouseon function. Have you mastered it?

Leave a Reply

Your email address will not be published. Required fields are marked *