Spread the Word

Site Feed



Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Monday, September 11, 2006

Horizontal Suckerfish and More CSS Menu Resources

I blogged back in June about my efforts to enhance WebLens with CSS-based dropdown menus that were standards compliant and which work across all browsers, including the persnickety Internet Explorer. In a post on creating dropdowns that work in IE, I summarized the three approaches I had found. I chose the very popular Suckerfish solution for WebLens, and it has been a great success.

In building the menu system recently for a site about a popular Canadian television personality, I wanted to modify the Suckerfish code to display the sub-menus horizontally in a row instead of stacked one below another as seen on WebLens. Google queries on this didn't lead to much, except a few help requests posted to webmaster forums, so I puzzled it out myself.

You can see the result of this tweak at the site mentioned above, and the code is available here for your use, should you want to play with it. I'm pretty happy with it; the only failing has been my inability to figure out how to align the sub-menus with the left edge of the top menu containing DIV, instead of the individual list items. No amount of fiddling around with positioning seemed to solve this.

In trying to troubleshoot this challenge, I never did find a fix, but I came across more helpful CSS menu resources, including some great articles:

Had I seen the ListApart Hybrid CSS Dropdowns article earlier, I might have chosen that technique instead of struggling to modify the Suckerfish code myself. Oh well. Live and learn :-)

I can't wrap this up without mention of a couple of CSS and/or DHTML menu generators (free and/or for fee) for those not inclined to hand code. Check these out:

Hope you find these resources useful. Enjoy!

4 comments:

Anonymous said...

Nice article! Good 'ol suckerfish dropdowns... I can't live without them!

Pam said...

Thanks Vernon. Me neither :-)

Mechanical Marksy said...

ahh you're a legend.

I've been racking my brains about this for the past couple of hours.

Pretty hard to search for this result.

thanks a lot!

Pam said...

Thanks Marsky. Yes, I never did find exactly what I was looking for.