I recently finished a redesign project, and there were some interesting challenges that came up that I thought I would write about.
To start off, there were the menus. The site has an obligatory drop-down menu at the top, and a similarly styled menu on the left. Here's a look at the drop-down menu:
As you can see the items in the menu have a little caret on the left, they turn a darker gray on mouseover, and certain items (members-only ones) have a special star icon on the right. There are also submenus with the same style. I'm not going to talk about the specific javascript implementation that I used for the drop-down (I used a slightly modified version of the jQuery plugin jdMenu to get it done -- http://jdsharp.us/jQuery/plugins/jdMenu/), but will instead address how the styles are implemented, which was a bit trickier than you might think.
The html for the menu is a simple nested unordered list:
<ul>
<li><a href=[url]>20 Clubs</a></li>
<li><a href=[url] class=star>Build-PAC Contributors</a>
<ul>
<li><a href=[url] class=star>BUILD-PAC Fundraising</a></li>
... etc ...
</ul>
</li>
... etc ...
</ul>
Nice and clean and accessible. But the style has to be pixel perfect too, of course.
When I got the menu from the designer, the caret and the star were implemented with a single background image. That made sense to some extent. You can only have one background image per element. And I can't use the <li> for one of the background images because the only elements that supports the hover is the <a> tag. And I needed to use the a:hover css selector to make the items turn dark gray on mouseover.
Fine. But that really makes things a bit complicated and inflexible. What if I need to adjust the width of the menus (which did indeed happen several times during the redesign)? I would then need to recreate those background images with the correct width. I know just enough Photoshop to do that kind of thing, but it's really annoying.
Finally it occurred to me that there's really no reason that the <a> tag is the only one that can do a hover. With javascript, I could capture the hover for any element. What is more, jQuery made this very easy to do. I added this to my page:
$("td.leftnav ul li").hover(function(){
$(this).addClass("hover")
},function(){
$(this).removeClass("hover")
})
(Okay that bit of code applied to my left navigation menu. jdMenu actually took care of this for my top nav by adding a "jdm_hover" class.)
So with that little bit of code, I was free to set the caret as the background of the <li>, and set the star as the background of the <a>, and let the hover of the <li> take care of the background color change. And when I inevitably got that call to change the width of the menus, it was a simple change in the stylesheet.
