Joomla CSS Drop Down Menu Tutorial

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.

#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 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 (13)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:

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:

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:

Please read this discussion for support on this technique
http://forum.joomla.org/index....825.0.html
August 07, 2006

tulemon said:

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

How do I get the "Spacer" to appear in between the menu's?
June 05, 2008

Write comment
You must be logged in to a comment. Please register if you do not have an account yet.

busy
Last Updated ( Tuesday, 30 May 2006 15:26 )
 

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:

Find more posts tagged with...

Get Joomla Tips by RSS or Email


Register or login for free downloads



Joomla 1.5 Book

Get the "have to have book" about Joomla 1.5 from Amazon and free access to the companion site, joomlabook.com.

Who's Here

We have 161 guests and 2 members online

Stuff I Recommend


WysiwygPro is available for Joomla. Completely automatic installation. It helps you produce W3C valid content and makes inserting images a snap. We recommend it, in fact we use it ourselves! www.wysiwygpro.com