Compassdesigns.net

Teaching - Web - Sailing

  • Home
  • Services

Joomla CSS Drop Down Menu Tutorial

November 30, 2005 By barrie@compassdesigns.net Leave a Comment

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(” sfhoverb”), “”);
}
}
}
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!

 

Filed Under: Uncategorized

The Skinny

I am an entrepreneur, web consultant, author and educator.

I have been involved in starting a K-12 School District, a Private High School, and three web tech companies. I also wrote one of the original and best selling books on Joomla.

And I like sailing with kids.

Recent Posts

  • Teenager Invents New Type of Hunting Camo Suit
  • A Parent’s Guide to Proficiency Based Learning
  • Proficiency/Competency Based Learning in NGSS Classrooms
  • Hunting Camouflage Website Launched
  • Get More Email Newsletter Signups With These Easy Tips
  • Proficiency Based Learning Resources
  • Social Media Redux
  • How to turn off WordPress Comments if you use Disqus
  • The API was Yesterday. The Tomorrow is iPaaS
  • Left Hook Digital Named Zapier’s First Integration Developer Partner

Top Posts

  • Just another Blog Post by Louis Landry
  • How to set up a Joomla website for a School in under 30 seconds

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

Copyright © 2023 Compass Designs · Musings on Education, Life, Joomla and the Web by Barrie North