New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+

3-State highlight menu effect

 Author: Dynamic Drive

Description: This is a 3 state menu effect, applicable to any table. The table cell in question "hovers up" when the mouse moves over it, and depresses when down. A snap to install, your table links will never be the same in IE4+ and NS6! 

Demo:

Main Menu


Directions Developer's View

Step 1: Insert the following script into the <head> section of your page:

Select All

Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu:

Select All

Configuring the menu

The code of Step 2 illustrates what must be done to a standard table to have the effect applied to its cells. Firstly, have present the onMouse...code inside the <table> tag itself, as follows:

<table onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">

Secondly and finally, for each of the table cells (<td>) that you wish the effect to be added to, add the class=... code inside it:

<td class="menulines">.......</a>

Viola!