Ingredients: sprites, unorderdered lists, Mootools knowledge.
Cooking time: 1 hr
Result:
Can be seen on our website – Rborn Web development – mouse-over the top menu.

Preparation of the Mootools glowing menu

The menu is a list containing an A tag for each menu item. We are using sprites and text-indent:-5000px for accessibility purposes. The trick is that we use the image positioned top for LI and bottom for A HREF

Step 1: cook the HTML code

<ul id="mainnav">
<li><a href="/">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="/blog/">news</a></li>
<li><a href="#">contact</a></li>
</ul>

Step 2: add the CSS code

li.home {background:url("../img/home.png") top left;}
li.home a {width:29px;background:url("../img/home.png") bottom left;}

This is the positioning of the background image I was talking about earlier.
Now the magic of the glowing is made with few lines of code using MooTools.

Step 3: spice with MooTools code

$('mainnav').getElements('li a').each( function(item){
    if ( !item.hasClass('clicked') ) {
        item.setStyle('opacity',0.01).addEvent('mouseenter', function() {        
this.fade(1)}).addEvent('mouseleave',function(){this.fade(0.01)});
}
})

The code is triggered either on domready event, or put inside a script tag just before the body ends so have the dom loaded and ready to be accessed by javascript.

Basically all we are doing is to get all the A tags inside the menu, set the opacity to 0.01 because if you set it to 0 MooTools will add display:none to the style and the links won’t be visible anymore.

Further we play with the fade method to increase the opacity to 1 or decrease back to 0.01 on the mouseenter and mouseleave event.

We also check if the menu is active or not – we are on the menu page or not –  verifying if the item has a class ‘clicked’, set by the backend. If the item contains this class we simply leave it alone and the item is ‘on’ all the time.

That’s it. Let me know your thoughts.

Check the Spanish version of this post:
Cómo hacer un menú brillante con MooTools en 3 pasos