MiniDoc: Creating a CSS Drop-down Menu

Forum rules
Please submit all new Tips and Tricks to: http://docs.joomla.org/Category:Tips_and_tricks
Locked
User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Post by compass » Wed Nov 30, 2005 10:41 pm

Creating a CSS Drop down Menu


OK, if you have read my SEO FAQ, 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 one,  a drop down menu.

A few people (OK, one) wondered how I got 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/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  ;D.

Code: Select all

#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;
}
.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.

Code: Select all

<script type="text/javascript"><!--//--><![CDATA[//><!--

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);

//--><!]]></script>

Hopefully, follow this and Bob’s your Uncle you should have clean valid drop downs for your menu. Enjoy!
Last edited by Tonie on Fri Sep 28, 2007 7:06 pm, edited 1 time in total.
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

hypertexture
Joomla! Apprentice
Joomla! Apprentice
Posts: 36
Joined: Wed Oct 03, 2007 1:09 pm
Location: Jersey, Channel Islands
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by hypertexture » Wed Oct 03, 2007 1:24 pm

am just experimenting with an accessible joomla template utilising the extended suckerfish menu and noticed a couple of ommissions/errors in ya post when starting out afresh..

to get your css to work, the class suffix of the anchors needs to be defined in the menu.ini file, changing it from '-suckerfish-horizontal' to 'mainnav' in order to get the 'mainlevelmainnav' classes..

also, you have listed the 'mainlevelmainnav' class as an id in your css so the hashes need to be changed to full stops to get your css to work propa.. i haven't got that far, but i presume that this will also impinge on the javascript which is using 'getelementbyid' (javascript ain't my strong point tho so i may be wrong about that)..

luv ya work over at compassdesigns btw :)

---------------------------------------------------------------------------

http://hypertexture.net/

hypertexture
Joomla! Apprentice
Joomla! Apprentice
Posts: 36
Joined: Wed Oct 03, 2007 1:09 pm
Location: Jersey, Channel Islands
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by hypertexture » Wed Oct 03, 2007 2:48 pm

also, the float:left; attribute on .mainlevelmainnav,.mainlevelmainnav ul seems to cause problems in internet explorer 7 whereby the menu is offset to the right of the parent li.. removing this float attribute and adding it to the immediate parent div (.menumainnav) seems to sort it :)

imbert
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Oct 23, 2007 12:53 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by imbert » Tue Oct 23, 2007 1:29 am

I too have the problem with the sub-menus being offset one item to the right (in IE7), but moving the "float: left" entry didn't seem to help. Everything else seems to be working fine (I didn't have to change the selectors  to full-stops from # signs), but this issue is causing me much frustration.

Any ideas?
Imbert

freetemplate
Joomla! Apprentice
Joomla! Apprentice
Posts: 41
Joined: Sun Nov 18, 2007 9:49 pm
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by freetemplate » Wed Nov 28, 2007 10:06 am

thanks for this css drop down menu Tutorials! this help me more!
http://joomlatp.com :free joomla templates,free joomla themes,free joomla 1.5 templates

User avatar
gewre
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Sat Feb 11, 2006 8:13 am
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by gewre » Fri Dec 07, 2007 7:13 am

Great Post
Nice thinking

Thank you!

User avatar
LukeDouglas
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 212
Joined: Sat Dec 08, 2007 8:23 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by LukeDouglas » Tue Dec 11, 2007 8:43 pm

compass,

You made an excellent post but I've encountered a problem and have provided details here.

I have copied 'verbatim' your css into mainnav.css, uploaded into the css folder and added this line to the index.php page.

Code: Select all

<link href="templates/citydealer/css/mainnav.css" rel="stylesheet" type="text/css"/>
I have copied 'verbatim' your javascript code into mainnav.js, uploaded into the javascript folder and added this line to the index.php page.

Code: Select all

<link href="templates/citydealer/javascript/mainnav.js"  type="text/javascript">
I've added this to my index.php file where I want the menu to appear.

Code: Select all

		
<!-- class="moduletablemainnav" - don't use unless you have to -->
  <table width="810" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr><td> <span class="mainlevelmainnav">
            <?php mosLoadModules ( 'user9' ); ?>
          </span></td>
    </tr>
  </table>
I didn't include the class moduletablemainnav in the table tag as it would require repositioning changes but if need be, I can insert an image to force the height of the top level menu navigation row and change the exact positioning to place it.

Here is the top part of the Extended Menu module:

Image

and the main part of the bottom options

Image

Here is how it appears after the changes:

Image

It is appearing expanded and I did setup the module following your instructions:
Menu style: Tree List
Expand Menu: Yes

I'm not concerned with formatting, coloring, exact positioning of the menu.  I'm only concerned why the entire expanded menu is shown instead of just the top row with the cascading options appearing once one of the top nav links is hovered over.

Can you determine what I have done wrong? 

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by compass » Wed Dec 12, 2007 2:14 am

hmmmm

One thing is make sure you are using FF, as it correctly renders without the js, so that will remove that problem.

If it still does it in FF, the problem is the CSS is not correctly hiding the submenus
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

User avatar
LukeDouglas
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 212
Joined: Sat Dec 08, 2007 8:23 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by LukeDouglas » Wed Dec 12, 2007 4:58 am

Compass,

Firefox 2.0.0.11

I left IE as my personal choice about 18 months ago.

But I do test all my pages in both as IE is still the dominant browser. MS is still a bulldog of a company as it can force it's view on a lot of people and disregard those who try to set standards for everyone to go by including the 'real' inventor of the internet.

herixylo
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Dec 13, 2007 6:28 am
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by herixylo » Thu Dec 13, 2007 6:33 am

I think is' s great.

cheza247
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Oct 18, 2007 5:04 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by cheza247 » Mon Dec 17, 2007 1:11 pm

Thanks compass - this is a great tutorial - really helped me out. Just couldn't work out how to implement a drop down with the extended menu module before reading this.

It hasn't all been plain sailing though - I have a problem with the menu actually dropping downward. The idea is to have the top level items across the top of the page with the menus dropping down vertically underneath each one over the top of other content when you mouse over. At the moment, the submenu items display horizontally underneath the top level item.

I'm not great with CSS (as you've probably guessed) but I have a feeling this may be something to do with my template layout and z-indexes.

Any wise words would be much appreciated - if you need links, code etc.. let me know.

Thanks

adamantoi
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Mon Dec 24, 2007 11:48 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by adamantoi » Thu Dec 27, 2007 9:52 am

can someone please make a summary how to setup all those settings that work correctly. following from 1st page untill now just make my headache worst.  ???

mikxy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Sun Dec 16, 2007 3:37 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by mikxy » Sun Jan 06, 2008 12:27 am

can anyone help me with ja wezen template, I just want to put samo drop down menu but I don't know how I am a beginner
can anyone help me pleeeeassseeee :(

schonkton
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Fri Mar 23, 2007 2:00 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by schonkton » Fri Jan 18, 2008 11:41 am

This is brilliant. Thankyou.

Is it possible to show the sublevel links horizontal or inline rather than vertically?

Many thanks again.

xtc944
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Fri Jan 11, 2008 3:33 am
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by xtc944 » Sat Jan 19, 2008 8:34 am

LukeDouglas wrote: compass,

You made an excellent post but I've encountered a problem and have provided details here.

I have copied 'verbatim' your css into mainnav.css, uploaded into the css folder and added this line to the index.php page.

Code: Select all

<link href="templates/citydealer/css/mainnav.css" rel="stylesheet" type="text/css"/>
I have copied 'verbatim' your javascript code into mainnav.js, uploaded into the javascript folder and added this line to the index.php page.

Code: Select all

<link href="templates/citydealer/javascript/mainnav.js"  type="text/javascript">
I've added this to my index.php file where I want the menu to appear.

Code: Select all

		
<!-- class="moduletablemainnav" - don't use unless you have to -->
  <table width="810" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr><td> <span class="mainlevelmainnav">
            <?php mosLoadModules ( 'user9' ); ?>
          </span></td>
    </tr>
  </table>
I didn't include the class moduletablemainnav in the table tag as it would require repositioning changes but if need be, I can insert an image to force the height of the top level menu navigation row and change the exact positioning to place it.

Here is the top part of the Extended Menu module:

Image

and the main part of the bottom options

Image

Here is how it appears after the changes:

Image

It is appearing expanded and I did setup the module following your instructions:
Menu style: Tree List
Expand Menu: Yes

I'm not concerned with formatting, coloring, exact positioning of the menu.  I'm only concerned why the entire expanded menu is shown instead of just the top row with the cascading options appearing once one of the top nav links is hovered over.

Can you determine what I have done wrong? 
Great ,,,Thank You

almarjin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 128
Joined: Thu Nov 29, 2007 9:02 am
Location: Port Lux
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by almarjin » Wed Jan 23, 2008 2:05 pm

Hi Compass,

I'm having problem in my drop down menu. The sub menus appear into one direction only.

The menu is positioned in the middle of the page. Please Visit the link to see.
http://websolutions.worldpartner.com/logposetravel/

Thanks.

here are the codes.
I used mainlevel as ID because I inspect the site using firebug then I've found that the ID of links is that.

#mainlevel {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 0px solid #ff0000;
}



#mainlevel ul {
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#mainlevel a {
  float: left;
  vertical-align: middle;
  font-family: Trebuchet MS,verdana;
  font-size: 12px;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  /* height: 31px; */
  line-height: 22px; 
  width: auto;
  border: 0px solid #ff0000;
}

#mainlevel a:hover {
  text-decoration: none;
  color: #e1dcaf;
  /* height: 31px; */
}

#mainlevel li {
  float: left;
  margin: 0px;
  padding: 0px;
}

#mainlevel li ul {
  position:absolute;
  left:-999em;
  width: 125px;
  margin:0px;
  padding:0px;
  color: #000000;
  line-height: 14px;
  /* background: #b9b950; */
  background: #a0b40f;
}

#mainlevel li li {
  width: 125px;
  margin: 0px;
  padding: 0px;
}

/* submenu normal inner background */
/* eto yung pag-hover mo sa main menu, lalabas yung submenus na dropdown */
#mainlevel li ul a {
  position: relative;
  top: 0px;
  left: 0px;
  background: #a0b40f;
  text-align: left;
  text-indent: 10px;
  /* margin-left:10px; */
  padding: 0px;
  padding-top: 4px;
  padding-bottom: 4px;
  height: 17px;
  line-height: 17px;
  width: 125px;
}

/* hover properties ng submenu */

#mainlevel li ul a:hover {
  height: 17px;
  line-height: 17px;
  color: #327828;
}

#mainlevel li:hover ul ul,#mainlevel li:hover ul ul ul,#mainlevel li.sfhover ul ul,#mainlevel li.sfhover ul ul ul
{
  left:-999em;
  line-height: 14px;
  padding-bottom: 0px;
}

/* submenu normal outer background - ito ang submenu */

#mainlevel li:hover ul,#mainlevel li li:hover ul,#mainlevel li li li:hover ul,#mainlevelv li.sfhover ul,#mainlevel li li.sfhover ul,#mainlevel li li li.sfhover ul {
  /* position: absolute; */
  margin: 0px;
  padding: 0px;
  width: 125px;
  border: 1px solid #fafafa;
  z-index: 6000;
  left: 85px;
  width: 125px;
  top: 32px;
}

/* submenu hover outer background - eto yung pag hover mo sa submenu */

#mainlevel li li:hover,#mainlevel li li.sfhover {
  margin: 0px;
  padding: 0px;
  width: 125px;
  height: 25px;
  line-height: 25px;
}

Thanks Again

critchy
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Feb 01, 2008 9:18 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by critchy » Thu Feb 07, 2008 12:19 am

Hi all great stuff... Just one thing.

I am using a template called JA Rochea and it magically creates the main nav menus at the top of the site from the main menu listings that are actually situated on the left hand side of the template.

So my question is, I am a novice to this. I have managed ot get the menus on another site I ran as a demo to for the menus and ext_menu worked fine on that site but gets no results on this problem as the area I need to publish the menu to does not really exist as a module in teh back end of Joomla...

Can somebody help me please! in any way as I am at the end of my ideas!

kurtp
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Sun Nov 18, 2007 3:48 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by kurtp » Thu Feb 07, 2008 6:20 am

Drop down menus are great.

Is there any chance that drop down menus might appear as a module, mambot or another plugin?

I am fairly new to Joomla and definately not comfortable with CSS, but accessing this functionality in the backoffice would be fantastic.

Might this be part of 1.5 templates? 

Your help would be appreciated.

Kurt

kkeomony
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Wed Jan 09, 2008 6:35 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by kkeomony » Fri Feb 08, 2008 12:59 pm

Dear all,

I've tried this out, and i could only make it work on the left side, but when i chose position "top" instead of "left" , I don't see any thing. I would like to show it in the Topmenu. What should i do? Please tell me the options i should choose when i create the mainnav in module!

I am using joomla 1.5.


Thank you,

Keomony

Daerils
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Mon Feb 11, 2008 2:17 pm
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Daerils » Mon Feb 11, 2008 4:43 pm

CSS drop-down's work fine in my Firefox + Web Developer ext. (for debugging) setup, but seem to be slightly buggy in IE 7.
I suspect this is related to how IE determines cursor position vs. element position, but that's just a guess.

AndyB
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Dec 21, 2005 8:18 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by AndyB » Fri Feb 15, 2008 8:50 pm

Is it possible to make the menu appear vertically down the side of the page?

ctdesign87
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Wed Jan 03, 2007 6:35 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by ctdesign87 » Mon Feb 18, 2008 5:16 am

Take a look at this:
http://www.redmeetsblue.com.au/rmbclien ... &Itemid=61
Just wanted to know why the submenu for the 'Home' button isn't dis/appearing on mouse out/on rollover?

The link to my menu CSS is
http://www.redmeetsblue.com.au/rmbclien ... s/menu.css

The link to my menu js is
http://www.redmeetsblue.com.au/rmbclien ... js/menu.js
Graphic & Website Design
Red Meets Blue Design Branding Agency
http://www.redmeetsblue.com.au

kkeomony
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Wed Jan 09, 2008 6:35 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by kkeomony » Mon Feb 18, 2008 1:29 pm

Dear all,

Finally, I could make the drop down menu for the top menu with some changes on CSS file. But in IE is sth else. even I separate the css in to two, one for FF and another one for IE. But I still can't get the right thing. I am using IE6. Who has any idea how to deal with this problem?


I am wondering whether we can use Ajax for this drop down menu. For example, when a menu is clicked, the content of that menu will be displayed in the page without reloading the whole page.
Can we do that in Joomla?


Keomony

User avatar
mgltacoma
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 144
Joined: Mon Jul 23, 2007 5:04 pm
Location: Hawaii

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by mgltacoma » Mon Feb 18, 2008 8:55 pm

I installed extended menu and added css code to my template.css file and added few lines of code to my template index.php. Why am I getting this funny bullet marks in front of my menu items?
Please help me to get rid off those.
You do not have the required permissions to view the files attached to this post.

Jak
Joomla! Fledgling
Joomla! Fledgling
Posts: 0
Joined: Tue Feb 26, 2008 4:10 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Jak » Tue Feb 26, 2008 4:50 pm

Seriously. Was this menu only created to work in FF and Safari? In IE7 theres a bug that pushes the dropdown to the right, IE6 doesnt even open. I just cant get it to work in IE, I know its a broken browser but its the dominant one.



Hupertexture wrote:

"also, the float:left; attribute on .mainlevelmainnav,.mainlevelmainnav ul seems to cause problems in internet explorer 7 whereby the menu is offset to the right of the parent li.. removing this float attribute and adding it to the immediate parent div (.menumainnav) seems to sort it"


This does not help. And where is this div class located "parent div (.menumainnav)", I dont see it anywhere in this menu's CSS ? I heard the author of this thing also made a alot of mistakes in CSS.


Locked

Return to “Tips & Tricks - Moving”