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.

clip_image002

Step1

Open your web page.

Step2

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

clip_image004

Step3

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

  1. id="link" onmouseleave=HideMenu() onmouseenter=ShowMenu()
clip_image006

Step4

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.

clip_image008

Step5

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

  1. <div id="mnuDIV" onmouseleave=HideMenu() onmouseenter=ShowMenu()
  2. style="FILTER:progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin);

step6

set focus on the layer, and put the text. Then set the link to them. Like the following picture showing

clip_image010

Step7

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

  1. <script Language="JavaScript">
  2.  
  3. < !–
  4. function ShowMenu()
  5. {
  6. if (mnuDIV.style.visibility=="hidden")
  7. {
  8. mnuDIV.filters[0].apply();
  9. mnuDIV.style.visibility="visible";
  10. mnuDIV.filters[0].play();
  11. }
  12. }
  13.  
  14. function HideMenu()
  15. {
  16. if(window.event.toElement.id!="mnuDIV" && window.event.toElement.id!="link")
  17. {
  18. mnuDIV.filters[0].stop();
  19. mnuDIV.style.visibility="hidden";
  20. }
  21. }
  22. //–>
  23. </script>

Step8

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:

clip_image012

clip_image014

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?

For help, advice, tips and tricks, challenges, feel free to visit ourDoNotYet forum or Submit your good resource to share.

Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.

Related Posts