Uncle Jim's Web Designs

Hovering Menus without images
Author: Dynamic Drive


Other Sources: JavaScripts Office Tips Design Sets On Line Games Home Page

SCRIPT INSTALLATION:
COPY - Insert Between Head Tags: <HEAD></HEAD>

COPY - Insert Inside Body: <BODY></BODY>


Instructions for using this script:

Configuring the menu:

The above code illustrates what must be done to transform your menu links into a hover-up bar. Firstly, create a DIV with the following codes inside of it:

div style="background-color:#f5deb5;width:80%;height:23px;padding-top:5px" onMouseover="over_effect(event,'outset','#FFE271')" onMouseout="over_effect(event,'solid','#f5deb5')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')"

Then, add span tags inside this DIV to create the individual menu links.

The CSS code "class='menuitems'" causes the SPAN in question to actually receive the hover effect. Remove this CSS code to disable the effect for it. Make sure you replace the LINKS and DESCRIPTIONS with your own.




Close This Window