Return to Main Menudzigns by ShivSpacer




Explanation


If you have checked out the "Slide a Menu" Example then, you will find this script very similar. In here, there are basically two tricks that one has to be little particular about - & if you can't get these right on the first attempt, try again :) :)

  1. There are altogether three elements to position.
    • The actual table with a row of links to other pages. Just remember to specify the Font Size of 'A' tags in pixels through style sheet specifications.
    • Then position the Left & Right Images - leaving just enough gap between the two such that at least one complete Link name is visible. The 'DIV' should have a higher 'z-index' than the Menu Table - just to ensure the Images stay over the Menu Table.
    • And finally, start the Body Content (What yu are reading now) leaving sufficient space on top of the page for the above two. In this example, all I have done is used THREE Line breaks!
  2. The second factor you have to decide about is HOW far to the LEFT & to the RIGHT should the scrollable Menu be allowed to move. It's important to restrict the movement, other wise they'll keep moving to indefinite position so long you have your mouse over one of the Arrows! And How fa that would really depend on two points:
    • Size of the two Images
    • Total length of the Menu Table
    Once you have determined these, the rest is easy. Just change the Scrol Stop values in the script. It goes like this:

    function slideRight() {
    if ((block1.active)&&(block1.xpos>-212)){
    block1.xpos -= 4
    block1.left = block1.xpos
    setTimeout("slideRight()",2)
    }
    }


    What it does is, it doesn't allow the Menu table to move beyond '-212' out of left - this was worked out considering the table length being set to 400 pixels wide & each <TD> width at 100 pixels with default left position at 100 left.

    Likewise, the SlideLeft position has been fixed. Take a look at the source code & you'll be able to figure this out.
The script obviously gets activated only when the mouse is over one of the arrows. TRY IT!

Just a couple of comments:
  1. Put all the DIV tags right at the bottom of the page as I have done here. Some browsers prefer it that way :) :)
  2. I have used 'mapped' images - you need not! Link directly to the images if you wish
It's all yours, as usual - if you want it BUT do not remove the DISCLAIMER.

Copyright DBS © 1998-2003. All Rights Reserved
Terms of UseContact MeGuest BookDownload