« »

'Highlight' your menu links as the mouse moves over them using this CSS powered script! Thanks to CSS, the effect is very customizable, efficient, does not rely on script, and finally, very small in file size. Visible in IE4+, NS6+, Opera 6/Mozilla, and degrades well with the rest. A good illustration of what CSS alone can accomplish.

Label: CSS highlighting, highlighting navigation, highlighting menu, highlighting, CSS Menu Highlight, mouse over, customizable, Opera, Internet Explorer, Netscape

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style>
/*
CSS Menu highlight- By Marc Boussard (marc.boussard@syntegra.fr)
Modified by DD for NS4 compatibility
Visit http://www.dynamicdrive.com for this script
*/

A.menulink {
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #FFFFFF;
}

A.menulink:hover {
border: solid 1px #6100C1;
background-color:#F0E1FF;
}

</style>

Copy All x2

<script>

var ns4class=''
</script>

Copy All x2

<table border="0" width=198>
  <tr>
    <td width="100%" bgcolor="#E6E6E6"><b>Main Menu (CSS)<b></td>
  <tr>
    <td width="100%"><a href="http://JavaScriptBank.com" class="menulink" class=&{ns4class};>
	JavaScriptBank.com</a></td>
  </tr>

  <tr>
    <td width="100%"><a href="http://TrucTuyen.org" class="menulink" class=&{ns4class};>
	TrucTuyen.org</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="http://TrucTuyen.org" class="menulink" class=&{ns4class};>
	Link #</a></td>
  </tr>

  <tr>
    <td width="100%"><a href="http://TrucTuyen.org" class="menulink" class=&{ns4class};>
	Link #</a></td>
  </tr>
</table>