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



BRILLIANT!!!

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

Thanks a lot !!

Excellent Les!!

Thank you so much for explaining this in detail.

This thread's a keeper

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

Its not the easiest of CSS. Got a link and maybe I can help...

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

It just won't work

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

Dunno Compass I'll try it

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

wahay!! I got it working

I forgot to add the menu suffix in the module admin 

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?

I just made this a transparent drop down menu

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

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

thanks for putting this up.

- g

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.

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.

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.

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

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

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

Two other handy menu options are:

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

Both offer free and paid options.

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.

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...

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

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!

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.

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

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

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

Thanks -- Tony

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 

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

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