Question

I somehow found this webpage and was absolutely stunned by the navigation bar. http://www.webdesignerwall.com

When you put your mouse over “Home”, “About” or “Jobs” menu options, you get that awesome rollover effect in the brown field above. I like that very much and had a similar idea, but being an amateur, I can’t really say what type of programming is that. I would say it uses Ajax or JavaScript per se, but I’d like some of you to explain it to me, or even share some similar examples.

Thank you

Answer 1

This is done by CSS. It places an extra <span> into every <a> link element. With CSS <span>s are hidden and positioned correctly above the menu elements (absolute). When one of the link is hovered the new style applies to the correct <span> which makes it visible.

HTML

<ul id="nav"> 
  <li id="nav-home"><a href="/>Home<span></span></a></li> 
  <li id="nav-about"><a href="/about/">About<span></span></a></li> 
  <li id="nav-jobs"><a href="/jobs/">Jobs<span></span></a></li> 
</ul> 

CSS

#nav span {
 display: none;      /* hidden by default */
 position: absolute;
}

#nav a:hover span {  /* link:hover */
 display: block;     /* makes one of them visible */
}

#nav-home span {
 background: url(images/home-over.gif) no-repeat;
 width: 168px;   /* each has it's own image */
 height: 29px;   /* dimensions */
 top: -30px;     /* and coordinates */
 left: 35px;
}

#nav-about span {
 background: url(images/about-over.gif) no-repeat;
 width: 157px;
 height: 36px;
 top: -36px;
 left: 90px;
}
/* ... */