Want a lean CSS drop down menu in Joomla? Meet the suckerfish!

OK, if you have read my SEO guide, you might have noticed I am biased a little against flash and JavaScript. I like to emphasize W3C valid code and lean pages, neither of which is helped by these two approaches. “But what about menus?” I hear you ask, don’t they need one of these two?
Well, there are a number of techniques you can use with CSS to get more visually attractive menus, all of them use unordered lists (bulleted lists to you and me) to create the menu. Let’s look at a few, we’ll start with a drop down menu.



A few people (OK, one) wondered how I got Joomla to have a drop down menu on a recent site;

www.thrutheturnstiles.co.uk

The menu is what has been coined “suckerfish” (don’t ask me why), its pure CSS, very lean, hack free and just as 12 lines of JavaScript to bail out Microdoze IE.

You can see a demo here:
www.htmldog.com/articles/suckerfish/dropdowns/example/

You can find guides to how the thing works at a couple of sites:
www.htmldog.com/articles/suckerfish/dropdowns
www.alistapart.com/articles/dropdowns

Now, you might have noticed that you need your menu outputted as a good clean list. Well it just so happens that there is a module out there to do this, and we’ll need it. Its called extended_menu, you can find it here:
de.siteof.de/detree/extended-menu.html

So, grab the module and install. Now let’s set it up. It’s easiest if you give it a menu and module class suffix. I used “mainnav” (you’ll see in the CSS below). A couple of other settings you will need:
Menu style: Tree List
Expand Menu: Yes

So put the menu where you want it, then to the CSS. This is a little tricky, it took me some trial and error to get the effects I wanted, but you can just skip that part and use mine J.



Last but not least you need to add
the JavaScript for IE into the head of the template index.php (or a js file),
it doesn’t like the :hover.



Hopefully, follow this and Bob’s your Uncle you should have clean valid drop downs for your menu. Enjoy!