Navigate

Menu Rollover Effect using blend Transition

Bookmark with

StumbleUpon

del.icio.us

Digg it

Furl

Spurl

ma.gnolia

Yahoo MyWeb

Windows Live

Introduction

This guide shows you how to add a transition effect to the rollover menu we created in Menu Rollover with CSS. You will need to read that tutorial if you need to understand how to build the menu because we will only post the code here without an explanation.

Tested in IE6 Icon

As this code uses filters, it is of course IE only at the moment :-(

Menu Code

The menu we are going to add the transition effect to was created with a HTML list using CSS to control the presentation to achieve the rollover look. The result of that tutorial is shown below.

To add the transition effect we need to add three components:

The transition filter
A javascript snippet
Link events to activate the transition

Transition Filter

The transition filter is a short line of CSS which we place into the overall link styles which we specified in Step 4 of the Menu Rollover guide:

#list-menu a {
display: block;
width:110px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none;
filter:blendTrans(duration=0.5);

Javascript Function

Place the following javascript function into the <head> of your document (or in an external linked javascript file).

Activating the rollover

We then need to activate the transition effect when someone mouseovers the links. We do this using the onmouseover and onmouseout events which we place into each link in the menu.

<div id="list-menu">
<ul>
<li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Home</a></li>
<li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Products</a></li>
<li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Services</a></li>
<li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Solutions</a></li>
<li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Support</a></li>
<li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Contact</a></li>
</ul>
</div>

This results in the following:

Note: Although these filters currently only work in IE your menu will still display just as normal in other browsers so at least 85%* of your visitors will be able to view this effect.

For more IE CSS Filters...

Go to the HTML List version...

Go to the Tables version...

*Source: BrowserNews.