free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

DHTML Menu


This script is what I use for the current Cyberschool menu.

Two graphics are required, whose transparent colour should be the same as your page's background:

Top Image



Menu Background

Notice the extra blank section at the top of the Top image?

Its purpose will be explained later.


Paste the code below into the head section of your page:


This goes into the body tag:
And this goes into the body itself:

How It Works


Seven DHTML/CSS effects are used to achieve the animation:
  • visibility - for initially hiding the Top Image
  • filters[0].Apply() - for enabling the revealTrans transition effect
  • filters[0].Play() - for playing the desired transition
  • revealTrans - for revealing the Top Image
  • z-index - for placing the Menu Background layer behind the Top Image
  • position: top and left - for placing the graphics and links in the desired page positions
  • top - for animating the Menu Background vertically downwards

    • Initial Settings

    The Top Image is assigned the ID click, and intially hidden:
    <img id = click src="topimage.jpg" width=150 border=0
    style="position:relative;top:-27px;left:-2px;z-index:2;
    visibility:hidden;filter:revealTrans(duration=2)">
    All links and the Menu Background graphic are placed inside a div container, whose ID is mymenu.

    By placing them all inside the container, they can be animated as a single object.

    The container's initial position is off-screen (-5000px):
    <div id = mymenu style="position:relative;
    top:-5000px;left:-2px;" align=center>
    Relative positioning of the links is set up in the style section at top.


    When the page is loaded, the function move1() is called.

    The revealTrans effect for the Top Image - click - is enabled:
    click.filters[0].Apply()
    The image is made visible:
    click.style.visibility = "visible"
    Transition effect #12 (Particle Dissolve) is selected and played:
    click.filters.revealTrans.transition=12
    click.filters[0].Play()

    Altogether, there are 23 revealTrans effects:


    # Effect # Effect
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12     		Reveal from inside out
    Scroll in from outer parts
    Scroll out from center
    Scroll up from button
    Scroll down from top
    Scroll left to right
    Scroll right to left
    Vertical Blinds left to right
    Horizontal Blinds top to bottom
    Combination of 8 and 9
    Similar to 8
    Particle Dissolve     		13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24     		Scroll in from outer parts
    Scroll out from centre
    Close from both top and bottom
    Open from centre to top and bottom
    Diagonal roll from right to left
    Different angle diagonal roll R > L
    Diagonal roll from left to right
    Number 18: the other way
    Random horizontal lines
    Random vertical lines
    Completely Random
    none


    Next, a setTimeout is used to provide a 1.5 second delay before function move2() is called:
    setTimeout("move2()", 1500)
    The setTimeout allows the transition effect to establish itself fully - it may be deleted if required.


    The function move2() animates the div container, mymenu.

    As mentioned previously, mymenu contains both the Menu Background graphic and the links.

    A counter - j - is used to increment the position of the div container:
    j = - 404

    function move2()
    {
    if (j <= -16)
    {
    mymenu.style.top=++j
    j+= 10
    setTimeout("move2()", 10)
    }
    }
    Initially at a relative top position of -404 (offscreen), the container moves downwards by increments of 10 pixels.

    When it reaches the desired position ( -16 in this example), it stops.


    To make it appear as though the Menu is sliding out of the Top Image, z-index is used.

    The div container has a z-index value of 0 - the default layer of the page.

    But the Top Image has a z-index value of 2, making it the top layer.


    An extra trick is included here: the Top Image graphic is not quite as it appears.

    The top half of it is actually a blank section, whose colour is the same as the page background.

    But since this part of the graphic is at the very top of the screen, the Menu slides in behind it unseen.

    Check the example below, where you can see the effect clearly.


    NOTE:

    The relative position values are tailored for the graphics and links used in this example.
    You may have to experiment with these settings for your own graphics and links.

    Try It Out

    Notice how the Menu Background graphic:
  • slides over the Start and Reset buttons
  • slides behind the Top Image graphic:
    • Also notice the additonal background colour top section of the Top Image graphic:
       


    © 2001 CyberSchool