Compass Designs .net

Want a lean CSS drop down menu in Joomla 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?

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.

Now, just make sure you have the z-indexes set up properly, also remember to have a z-index, the element needs some sort of positioning, if not absolute then relative.

Last but not least you need to add the JavaScript for IE into the head of the Joomla 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!

Comments (18)

Show/hide comments

Vashek said:

... I have Joomla Multilanguage that includes preinstaled Joom!fish Extended Menu Deprecated use of Mambelfish. Request URL : /index.php?option=com_content

June 17, 2006

wildie said:

using drop menu with vertical layout. I am trying to implement this dropdown method in a vertical menu. I have succeeded in making it work but want the subsiquent dropdown to open to the right of the main menu. I have come unstuck here. ???

August 02, 2006

Rudi said:

Can\'t get it to work? Hi I tried to follow your exmaple, but can't get it to work? I published the menu in the top position (other menu's did appear here, so the position is in my temaplte) Then I have: Menu Class Suffix mainnav Module Class Suffix mainnav Menu Name topmenu Source Type Menu Menu Style Tree List Expand Menu Yes Element Id No Enable Menu Template No Yet, the menu doesn't appear. I can see the Title, "Extended Menu" in my site, but that's it

August 07, 2006

Barrie North said:

Support Link Please read this discussion for support on this technique http://forum.joomla.org/index....825.0.html

August 07, 2006

tulemon said:

Won\'t work in IE Hi, I Can't get the menu to work correctly in IE, but it does work in Firefox. Whenever I mouseover the menu items in IE they switch from Horizontal to vertical? Any ideas why? here is the link: http://rightwork.merrigantech.com/index.php Thanks for any insight that anyone can provide.

August 08, 2006

g-lo said:

... Hi Barrie, I've taken the extended menu thing and combined it with image-sprites ... I'm sure you don't approve but ahh well, the client pays the bills right. My trouble is... of course.... Interwebs Exploder. I do not think my implementation of image sprites screwed it up but, my drop downs don't work in I.E. I have the JS copied and fit to the menu. But no go. I would have commented to the support forum but I was getting a "server busy" error. Please drop a hint when you get a chance.

March 20, 2007

Kitty said:

... Very vague instructions... Where do I put the suckerfish code in the template_css.css or do I link it into the index.php file? I have turned on Extended Menu only and expanded it but nothing happens and the submenu items get listed horizontally not vertically under as a submenu. Could you clarify some of these instructions please.

April 07, 2007

alhead said:

... does Joomla1.5 output menus with LI's in a way that avoids installing extended_menu?

July 31, 2007

zam said:

... Thanks! Works great!

August 07, 2007

tbianco said:

... I'm using 1.5 and the sub menu items only render to the browser to be styled on the section/category/article that the menu item belongs to. So if I had a top level item of services with several sub items, they would only show up when I'm in the services section. They aren't showing up on any other pages outside of that section.

August 25, 2007

Shankaranand Das said:

... I need to know how can I create a series to linked pages in Joomla. For example, I have one page designed in static content and linked with one of the menu item. But this page should have some links that will carry me to other page and in that page some links to carry me further on other page with lots of downlaodable stuff with lots of Hyperlinks. Thanks a lot. Shankar.

October 21, 2007 | url

Theo Sitther said:

... I am having trouble getting this to work in IE. Works great in Firefox and Safari. But, in IE the menu drops down only if you click on the parent item and then scroll over it again. Very strange. Any suggestions or fixes?

May 22, 2008 | url

SoftDux said:

... Hi This is a great Joomla tutorial, thanx How do I get the "Spacer" to appear in between the menu's?

June 05, 2008

Goldy said:

... Hi I can understand where I put the CSS code. And where is the Z-index and the JavaScript code where do I put that I have the JA Mesolite template installed and I have installed the module successfully but I don’t get the code.

September 23, 2008

Goldy said:

... Help will be great if some one tell me where do I put the CSS code and the other code that they said put in and also where is the Z Index. please help me out here thanks,

September 23, 2008

ritarita said:

... Hai all, For the last two weeks i m trying to get a mouse over horizontal sub menus like this site.(or virtuemart.com site).but i don have any idea till now.is there any special modules to do this?please help! thanks in advance.

October 15, 2008

jarnail said:

... It is seems to good and I am tring to do this from last 2 days. It will be great helpful if somebody explain exact location of CSS and JS to be placed. urgent hrlp need...........

October 21, 2008

pictureperfectne said:

... It would be helpful to show the template index page to see where you're putting the id's and classes

December 22, 2008 | url

Show/hide comment form