Cross Fading Navigation with DHTML

First, we might need an area to contain main navigation. We’ll call it navRowMain, and place our top level items within:


<div id=”navRowMain”> 
 <a href=”/” onMouseOver=”swapNav( 1 );”>Acme Inc.</a> |
 <a href=”/services/” onMouseOver=”swapNav( 2 );”>Products & Services</a> |
 <a href=”/success/” onMouseOver=”swapNav( 3 );”>Success Stories</a>
</div>



You’ll notice that each item is a link. This is to allow for browsers incapable of handling the DHTML, perhaps on a PDA. This way, they still have the option of navigating to the default page for each section, which should provide hard links to where they want to go. You also see the call to the swapNav( # ) function for each onMouseOver event, but before we get into that, let’s build our sub-level navigation.


<div id="navRowSub">
  <span id="nav1" class="subNav">
    <a href=”/”>home</a> |
    <a href=”/company.aspx”>about the company</a> |
    <a href=”/locations.aspx”>locations</a> |
    <a href=”/contact.aspx”>contact</a>
  </span> 
  <span id="nav2" class="subNav">
    <a href=”/products.aspx”>products</a> |
    <a href=”/services/business.aspx”>business services</a> |
    <a href=”/services/residential.aspx”>residential services</a>
  </span> 
  <span id="nav3" class="subNav">
    <a href=”/success/”>recent</a> |
    <a href=”/success/archives.aspx”>archived</a>
  </span>
</div>



So, all of our items are in place, but before we jump into the code, we must first set the CSS styles. You can define whatever styles you need to; just make sure you include the following:


<style type="text/css">
<!--
  .subNav {
    display:none;
  }
 
  #navRowSub {
    height: 12px;
    filter: alpha( opacity = 100 );
    -moz-opacity:1;
  }
-->
</style>



Firstly, this tells each of our sub-level items to not display, because we’ve defined class="subNav" for each of them. Secondly, it defines the initial opacity of the whole block, which is essential to our modifying it. Unlike many styles, you can not modify the opacity filter on an object unless it has a defined initial value.

NOTE  You also have to set the height property, otherwise the script refuses to work in IE for some reason.