MiniDoc: Creating a CSS Drop-down Menu

Casey Lee · Post by **Casey Lee** » Wed Nov 30, 2005 10:46 pm

Discussion thread for the FAQ: MiniDoc located at http://forum.joomla.org/index.php/topic,22023.0.html

BRILLIANT!!!

Thanks so much...cntrl+D this one for sure.

boesh · Post by **boesh** » Wed Nov 30, 2005 10:53 pm

Thanks a lot !!

Waseem Sadiq · Post by **Waseem Sadiq** » Wed Nov 30, 2005 10:59 pm

Excellent Les!!

Thank you so much for explaining this in detail.

This thread's a keeper

Waseem Sadiq · Post by **Waseem Sadiq** » Wed Nov 30, 2005 11:50 pm

For the life of me I just can't get this to work

compass · Post by **compass** » Thu Dec 01, 2005 12:57 am

$:-\$
Its not the easiest of CSS. Got a link and maybe I can help...

Waseem Sadiq · Post by **Waseem Sadiq** » Thu Dec 01, 2005 1:00 am

I've been doing it locally on my WAMP install,

It just won't work

compass · Post by **compass** » Thu Dec 01, 2005 1:08 am

ahh, I made a typo. The suffixes should be mainnav not mainmenu. Was that it?

Waseem Sadiq · Post by **Waseem Sadiq** » Thu Dec 01, 2005 2:58 am

Dunno Compass I'll try it

Can you also just explain where #twocols and #leftcol go in the index.php file?

Waseem Sadiq · Post by **Waseem Sadiq** » Thu Dec 01, 2005 3:21 am

wahay!! I got it working

I forgot to add the menu suffix in the module admin

mosey · Post by **mosey** » Thu Dec 01, 2005 3:32 am

I feel so lucky to have stumbled upon this via the Turnstiles thread in Site Showcase. Thank you very much compass! I did read your SEF/SEO article with interest - and was feeling quite put-down yesterday as it seemed the available menu options (apart from Extended Menu) appeared to go towards a direction *away* from your article. This really does turn things around!

Is it possible for the admin to pin this topic at all please?

Waseem Sadiq · Post by **Waseem Sadiq** » Thu Dec 01, 2005 3:56 am

I just made this a transparent drop down menu

de · Post by de » Thu Dec 01, 2005 6:40 am

Just came along this and recognized that with version 0.3.2 I also made patTemplates available where one is the suckerfish in either horizontal or vertical. The patTemplate file does not really differ from what "Tree List" would otherwise render... but there is also a CSS and the JavaScript provided... the menu.ini also automagically overwrites the extend and class-suffix parameter so that when it is integrated in a template there should not be much to do beside just installing the module... maybe that makes things easier?
Mine is based on http://www.alistapart.com/articles/dropdowns/ (made it support 3 levels by myself... recognized the followup article too late)... the CSS got a bit longer because I realized some weirdness with my IE (at least in Wine)... See them live there: http://de.siteof.de/extended-menu-templates.html
maybe that helps and let me know if there are any issues (I don't have all browsers available).

guilliam · Post by **guilliam** » Thu Dec 01, 2005 8:11 am

will check thru later.. added in the "to do list".

thanks for putting this up.

- g

kenmcd · Post by **kenmcd** » Fri Dec 02, 2005 12:23 am

Compass,

I pinned this and have changed the title to reflect that this is a MiniDoc.

I ran the CSS code through the TopStyle StyleSweeper to make it easier to read.
Would you like to replace the code in the first post with this? (or some variant)

Code: Select all

 
 
#twocols{
	z-index: 20; /*the columns that gets dropped down over yours might be different*/
}

#leftcol{
	z-index: 10; /*the columns that gets dropped down over yours might be different*/
}

.moduletablemainnav{
	position: absolute; /* I have absolutely positioned the module, you might have a different scheme*/
	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: #FF9900;
	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: #3366FF;
	border: #0000CC 1px solid;
	margin: 0;
}

#mainlevelmainnav li li{
	width: 11em;
}

#mainlevelmainnav li ul a{
	width: 11em;
	color: #FFFFFF;
	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: url(../images/soccerball.gif) #003399 98% 50% no-repeat;
}

Good info.

knassygroll · Post by **knassygroll** » Sun Dec 18, 2005 12:28 pm

Hi, Firstly this tutorial looks cool, exactly what I need. I'm looking to use dropdowns on my site however don't want to use transmenu or tiagra.

I've installed the extend-menu module no problems. And changed those couple of settings.

This is where I kind of get lost... When you say 'So put the menu where you want it' do you mean in terms of a location on a template? Or is this referring to a file somewhere?

I've put the css in template_css and the js in the header of the index.php. The menu appears fine but I'm unsure of how to add the sub levels.

My questions are pretty noobish I know but I've read through the posted links and I can work it out. I'd appreciate If someone could break it down for me.

If someone can help me get it working then I'll do a complete idiots guide thats broken down in to painfully small steps that some people like I need.

Cheers.

compass · Post by **compass** » Sun Dec 18, 2005 1:30 pm

Do you have a link?

I don't think the CSS on this currently extends to submenus. Its doable though. Go check out the original suckerfish link I posted and I thinks its there.

knassygroll · Post by **knassygroll** » Mon Dec 19, 2005 3:56 am

Sorry I dont have a link I'm developing the site locally.

I guess what I really dont understand what to do is how to add items to the dropdown menu. The menu (mainmenu in my case appears as css and now id like to add some dropdown items but havent a clue what to do.

That is unless I'm thinking about this in the wrong terms :S

compass · Post by **compass** » Mon Dec 19, 2005 4:33 am

Have you dont this bit?

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

de · Post by de » Mon Dec 19, 2005 8:08 am

knassygroll wrote: I guess what I really dont understand what to do is how to add items to the dropdown menu. The menu (mainmenu in my case appears as css and now id like to add some dropdown items but havent a clue what to do.

Just create sub menu items like you would in any other case... not anything special for drop-downs (this is just a matter of appearance)... you can use the parent of each menu item for this (but you will find a few threads with people asking the question "how to create sub menu items" (or sub menues) as well).

TheSaint · Post by **TheSaint** » Mon Dec 19, 2005 8:55 pm

Two other handy menu options are:

http://www.swonline.biz/
http://www.menu4mambo.com/

Both offer free and paid options.

Casey Lee · Post by **Casey Lee** » Tue Dec 20, 2005 4:52 am

I've always liked using SWmenu as well. It offers some really robust options for menus BUT I have never been able to get them to validate.

knassygroll · Post by **knassygroll** » Tue Dec 20, 2005 12:26 pm

Hey thanks for those other couple of options. Gave Lxmenu a try and it seems to work no problems at all.

I stilll havent given up on the suckerfish though. One problem I had is I didnt know where to add the submenu items. Is it correct to think I just do this through joomlas menu manager? ie just hook up a new menu item to a parent item? If this is the case I hope ill be able to get it working. Time will tell though...

Waseem Sadiq · Post by **Waseem Sadiq** » Tue Dec 20, 2005 12:31 pm

knassygroll wrote: Hey thanks for those other couple of options. Gave Lxmenu a try and it seems to work no problems at all.

I stilll havent given up on the suckerfish though. One problem I had is I didnt know where to add the submenu items. Is it correct to think I just do this through joomlas menu manager? ie just hook up a new menu item to a parent item? If this is the case I hope ill be able to get it working. Time will tell though...

Hey knassygroll,

that's EXACTLY how the submenu items work - just set them iup in your joomla menu manager

knassygroll · Post by **knassygroll** » Tue Dec 20, 2005 1:32 pm

Ahhh, such an obvious thing but for the life of me it took a good hr or two of chin stroking to make that connection. Menu works now, having a few probs with positioning but I'll hopefully ice them myself.

Thanks to all again!

knassygroll · Post by **knassygroll** » Tue Dec 20, 2005 6:11 pm

Anyone have any ideas where the dots next to the first letters of each menu item are coming from? They have nothing to do with list-style in the css (I dont think) but I cant work out their origin. As you can aslo see they disappear under the hover color but also appear on the submenu items.

MrMoney · Post by **MrMoney** » Fri Dec 23, 2005 2:02 pm

Hi,
I was wondering if someone could lend me a hand in this.
I have implemented Suckerfish dropdowns before without trouble, but not in Joomla. I am having a problem where the drop-down list is hidden behind the containing element. I have tried z-indexes all over the place, but cannot seem to solve the problem.
Here is my basic layout:

html > body > div#bodyBox > div#body > div#topBox > div#top > div.moduletablemainnav > ul#mainlevelmainnav

I cant seem to get it to hover over the #top or #topBox, and instead is stuck contained therein. Through my attempts I have been able to get it so that that box stretches to provide extra room for the drop down, or there is always a scroll bar attached.

Any ideas?

Thanks
MikeM

tonyl09 · Post by **tonyl09** » Fri Dec 23, 2005 8:36 pm

I am running into a similar problem as MrMoney described. You can see what is happening at: http://tiny url.com/bn8kj

The dropdowns are falling below the content area below. Could that be an issue of code order?

Thanks -- Tony

mgroot · Post by **mgroot** » Sun Dec 25, 2005 9:47 pm

I'd say it's more likely an issue of the z-index. Have you tried changing them in the CSS?

I myself got the menu working fine, now I am trying to figure out how to style the menus once they've dropped down

tonyl09 · Post by **tonyl09** » Mon Dec 26, 2005 3:38 pm

I think that the z-index is OK,

I set the containing DIV to be z-index 1000. The styles are:

Code: Select all

/* containing div  */
#buttons {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align:left; /* added to get IE to go left??  */
	z-index:1000;
}

/* Styling for menu  */
#mainlevel-sh,#mainlevel-sh ul{
	float: left;
	list-style: none;
	line-height: 1em;
	background: #446883;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

#mainlevel-sh a{
	display: block;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	padding: 0.3em 15px 0.3em 15px;
}

#mainlevel-sh li{
	float: left;
	border-right: 1px solid #afafaf;
	padding-left: 0;
}

#mainlevel-sh li ul{
	position: absolute;
	left: -999em;
	height: auto;
	width: 140px;
	font-weight: normal;
	background-color: #e6efe7;
	border: 0px solid #afafaf;  
	margin: 0;
	padding-left: 0;
}

#mainlevel-sh li li{
	width: 140px;
	border: 0;
	background-color: #e6efe7;
}

#mainlevel-sh li ul a{
	width: 140px;
	color: #446883;
	background-color: #e6efe7;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: normal;
	border: 1px solid #afafaf;
}

#mainlevel-sh li:hover ul ul,#mainlevel-sh li:hover ul ul ul,#mainlevel-sh li.sfhover ul ul,#mainlevel-sh li.sfhover ul ul ul{
	left: -999em;
}

#mainlevel-sh li:hover ul,#mainlevel-sh li li:hover ul,#mainlevel-sh li li li:hover ul,#mainlevel-sh li.sfhover ul,#mainlevel-sh li li.sfhover ul,#mainlevel-sh li li li.sfhover ul{
	left: auto;
	z-index: 6000;
	background-color: #829aac;
}

#mainlevel-sh li li:hover,#mainlevel-sh li li.sfhover{
	background-color: #d1ddd3;
}

The container below I made z-index 1, with its two columns z-index 2 and 3.

I did find that Opera works OK, but still not IE or FireFox???

Thanks -- Tony

htsolutions · Post by **htsolutions** » Tue Dec 27, 2005 3:40 pm

OK I have implemented the suckerfish menus on our site. This is an excellent menu system for us. However, under FF everything is running just as it should. In IE I can't even get the submenu to drop down.

Site: http://www.homtechsol.com
Problem: Menu "Home Division" & "Technical Division" have sub menus that don't drop down under IE.

If anyone has an idea I appreciate it.

Update 12-28-05: Food For Thought While I was trying to discover what was wrong in IE I figured out what was happening. I was trying to use the example for two instances of suckerfish menus on my page. That meant that two HTML elements with the same name (mainlevelmainnav) were being used. So that is an error on my part since the Javascript (getElementByID) only finds the first instance of an HTML element. My goal (maybe I can get some help) is to make an update so that you can reuse the same CSS code with mutiple instances of a suckerfish menu on a web page for IE. According to w3.org you are suppose to use unique IDs (Behavior is not defined if more than one element has this id).

Thanks
ht-solutions