Joomla CSS Drop Down Menu Tutorial

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?

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.

#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
#mainleveltopnav li{
display:inline;
list-style-type:none;
padding-right:5px;
}
a.mainleveltopnav,a.mainleveltopnav:link,
a.mainleveltopnav:visited{
color:#f90;
}
.moduletablemainnav{ /* I have absolutely positioned the module, you might have a different scheme*/
position:absolute;
top:187px;
left:20px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

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.

<script type="text/javascript"
sfHover = function() {
var sfEls = document.getElementById("mainlevelmainnav")
.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--

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

 

Comments (18)add comment

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. smilies/wink.gif

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 smilies/smiley.gif

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

Write comment
This content has been locked. You can no longer post any comments.

busy
Last Updated on Tuesday, 30 May 2006 10:26
 

Get News, Tips and Coupons by Email

Did you enjoy this Compass Design blog post/tutorial?

Then sign up for regular monthly newsletter. I'll send you great tips on Joomla, email only offers and news from the Joomlasphere.

Email: First Name:

 

Register or login for free downloads

Get Joomla Tips by RSS or Email

 

Joomla 1.5 BookGet the Joomla 1.5 Book

Get the #1 best-selling about Joomla 1.5 from Amazon and free access to the companion site, joomlabook.com.

 

Latest Comments

Get a Joomla 1.5 Website

Need Joomla 1.5 Hosting?
Get a turnkey Joomla 1.5 website with full service support and education.

-->