DHTML menu with unique fade-in fade-out effect
  • This DHTML enhances the visual impact of your website with a great fade-in-fade-out animation.
  • No matter whether you prefer textlinks, imagemaps or buttons this menu-solution allows you to customize its design just as you like it.
  • Crossbrowser. Netscape users will see no fade-effect.
    Run the script
  • Wait until the page has been loaded.
  • Click on a menubar-link on top of the page to see the fade-effect.
  • Click on 'mainmenu' inside the submenu (righthand, bottom) to come back to the toplevel-menu.
    Configuration
  • Download the script as ZIP-file, extract the testimages and the HTML-file and save them into the same folder.
  • Open the HTML-file, go the head-section of the HTML-file and configure the position of the menu.
  • Now go to the body-section of the HTML-file and customize the content of your toplevel-menu and your submenus. Let's first have a look at the toplevel-menu right below the <body>-tag:

    <script>
    if (document.all) {
     document.write('<DIV ID="toplevelmenu"
    style="position:absolute;filter:alpha(opacity=100);visibility:hidden">')
    }
    else {
     document.write('<DIV ID="toplevelmenu" style="position:absolute;visibility:hidden">')
     document.close()
    }
    </script>
    <IMG SRC="navfadertoplevel.gif" USEMAP="#navfadertoplevel" BORDER=0>
    <MAP NAME="navfadertoplevel">
     <AREA SHAPE=RECT COORDS="16,17,110,39" HREF="javascript:opennow('submenuscripts')">
     <AREA SHAPE=RECT COORDS="115,18,206,39" HREF="javascript:opennow('submenumoney')">
     <AREA SHAPE=RECT COORDS="212,19,303,38" HREF="javascript:opennow('submenulinks')">
     <AREA SHAPE=RECT COORDS="308,20,400,39" HREF="javascript:opennow('submenufree')">
    </MAP>
    </DIV>
  • Do not touch the red part! It contains an important additional script.
  • The blue part and the black part belong to you. The black part is the content of the toplevel-menu and its links. In this sample we have used an imagemap. You can also use textlinks or buttons. It doesn't matter. Just take care that you add opennow('name_of_your_submenu') to each of your toplevel-links!!!

  • Now let's look at one of the submenus. Again we used imagemaps. You guess it: you can use textlinks or buttons as well. As you see our submenus have the same shapes and dimensions as the toplevel-menu. Now let's dive into the code:

    <DIV ID="submenuscripts" style="position:absolute;visibility:hidden">
    <IMG SRC="submenuscript.gif" USEMAP="#script" BORDER=0>
    <MAP NAME="script">
      <AREA SHAPE=RECT COORDS="343,39,413,54" HREF="javascript:closenow()">
      <AREA SHAPE=RECT COORDS="14,12,324,43" HREF="one_of_your_submenu_urls"
    TARGET="_blank">
    </MAP>
    </DIV>
  • The green part is the id (name) of our submenu-sample. You may choose any name. Just take care that you use the very same name inside the toplevel-menu HREF="javascript:opennow('submenuscripts')
  • The red part is very important. It calls the function that brings you back to the toplevel-menu.
  • The blue part belongs to you. It contains the URLs of your links.
  • Now is almost done. Last not least delete the div-block with the id "deletethisblock". This is the block that contains the instructions. This block will not be needed. Have fun!

    Go to SpeedScripts and download tons of free funscripts.