Viewing posts for topic: "CSS". View all posts.

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.

Comments (0)   Posted on September 22, 2009 3:08:41 PM EDT by David Hammond