3 level horizontal dropdown menu system

[gilly]

I want to have a 3 level navigation system - I have implemented a few of my own, but have just discovered they dont work properly, and the sm2 code that drives it all is making my head hurt! They have come into issues when a 4th menu item is added to the 2nd level (weird!).

I have tried implementing Multiflex 5 so that I can grab the code and use it in my own template, but this doesnt seem to work. The first level (the normal menu you can see) works fine. Then the 2nd level (the dropdown works ok). When you add a 3rd level (should come out from the side of 2nd level) is when it runs into dramas.

Here is my site with the Multiflex 5 template installed http://mvchiro.com.au/index.php . if you rollover the 'Newsletters' menu item you can see the dropdowns. The structure is meant to go like this:

Newsletters
- N 2-1
  - N 2-1-1
  - N 2-1-2
  - N 2-1-3
  - N 2-1-4
- N 2-2
  - N 2-2-1
  - N 2-2-2
- N 2-3
  - N 2-3-1
- N 2-4
  - N 2-4-1

Is Multiflex 5 designed to be able to run a 3 level horizontal dropdown, or is it only a 2 level? If its only a 2 level, are there any other templates that run a 3 level?

This needs to work in IE6 as well as being pure css (or almost).

If anyone can point me in the right direction here, that would be great.

[gilly]

anybody able to help out here?

[ruebenwurzel]

Hello,

this has to do with the fact that the code for multiflex maskes no different between second, third and fourth level. In css is as far as i know only the second level defined. Normally you can define in css adduitional sublevels by adding the classes like "ul ul li" or "ul ul ul li" .... but due to the IE6 fixes in the menue code there are issues with the outputed ul code, so i think it is not possible to style it with css.

Solution:
1.) Read our docu about menus, especially the parameters for SM2
2.) Search the internet for sample code of multilevel dropdown menüs
3.) Try to integrate another dropdown menu wich works better with multilevel (look at AllCss2 template)

Matthias

[gilly]

Thanks Matthias.

I dont have any issues with css - it was the sm2 stuff that was doing my head in with all the tags for IE6 needed using the multiflex method for 3 levels.

Anyways, I have scrapped that method and gone for the method used in AllCss2 as you recommended. It all works perfectly now and seems reliable. I just needed to modify the css which was pretty easy (its quite neat).

Thanks again!

[Innocence]

Hi gilly !
I need the same you solved, could you tell me how you did ?

I´m using multiflex-3 template based...

Thanks in advance !
Pablo.-

[gilly]

Hi gilly !
I need the same you solved, could you tell me how you did ?

I´m using multiflex-3 template based...

Thanks in advance !
Pablo.-

have a look at the allcss2 template. Grab the hovers.htc file, and use the navigation css in screen.css. Then grab the sm2 code from the index.php file - put all this into your multiflex style template replacing the old stuff and you should be good to go from there. Obviously you will need to make changes to the css to make it match with your own style.

[Innocence]

have a look at the allcss2 template. Grab the hovers.htc file, and use the navigation css in screen.css. Then grab the sm2 code from the index.php file - put all this into your multiflex style template replacing the old stuff and you should be good to go from there. Obviously you will need to make changes to the css to make it match with your own style.

It workeeeeed !!!!!!!!!!!!!!!!
Thanks so much ! I go alone from now on ! hehe

Will show you the final result when it´s finished. Thank you again !
Pablo.-

[sky writer]

Hello Pablo,

I am using multiflex 3 and would like to implement this three level menu, but I don't understand how it is described here.

Would you be willing to describe in detail how you took code from allcss2 and put it in multiflex 3?

I already have a manipulated show_menu2, so I don't really want to mess that up if possible.

Where did you put the screen.css code?  In layout_setup.css?  And did you use all the code of just part?

I appreciate any help you can provide.

Cheers!

[vasy]

Also really need this. Would be great that somebody that knows the coding could fix a Multiflex-3 template with multiple dropdown system.

If now that i really need some more help. I tried moving the sm2 code, but i'm not sure on how much to copy etc.

Hope somebody could help. Maybe somebody even have a index and css file that that have already edited that they can send to me.

[dadio]

I ran to the same problem. I have a 4 level menu that did work propery. I used AllCSS2 showmenu2 call and I took the ALLCSS2 CSS and modified it so the look would be Multiflex-3.

Here is the ShowMenu2 call you need to put in the index.php file

Code: [Select]

<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, &#39;<ul id="header_menu" class="menu">&#39;); ?><br />
         
Here is the MUltiflex-3 css now in the layout_setup.css for the nav2 navigation level section that controls the dropdowns (BTW, you could also get the css from the website baker site itself http://www.websitebaker2.org/en/home.php by looking at the source file of the web page and looking at the css that controls the dropdowns on the WB site itself.):

Code: [Select]

/*Drop-down menu*/

.header-bottom {width: auto;display:block;clear:both;}


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}

/* Header menu */
//#header_menu {position: absolute; margin-left: 20px;background:#555;}
//#header_menu li {line-height: normal;}
//ul#header_menu  {z-index: 10; clear: both;}

.nav2 {white-space:nowrap /*IE hack*/; float:left; width:900px; border:none; background:rgb(225,225,225) url(./img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/

.nav2 ul {
list-style-type:none;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}

/* Root Level Link Formatting */
.nav2 ul li a:hover, .nav2 li a:focus {background-color:rgb(210,210,210); text-decoration:none;}
.nav2 li a:active, .nav2 ul li a.active {background-color:rgb(210,210,210); text-decoration:none;}

/* Current page Customisations*/
.nav2 li.menu-current a {background: #000; color: #fff; border-bottom: 1px solid #000;}
.nav2 li.menu-current a {font-weight: bold;}

/* 2nd Child menu */
.nav2 .menu li ul {position: absolute; width: 10em; margin: 0; display: none; text-transform: none; border: none; font-size: 100%;}
.nav2 .menu li ul li {width: 10.5em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: auto;}
.nav2 .menu li ul a {width: 10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}

/* 2nd Child link hover */
.nav2 .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
.nav2 .menu li:hover ul, .nav2 .menu li a:focus ul, .nav2 .menu li.subMenu ul {display: none;}
.nav2 .menu li ul ul { display: block;}
.nav2 .menu li:hover ul ul, .nav2 .menu li.subMenu ul ul {display: none;}
.nav2 .menu li:hover ul, .nav2 .menu li li:hover ul, .nav2 .menu li.subMenu ul, .nav2 .menu li li.subMenu ul {display: block;}


/* 3rd Child Menu Appreances */
.nav2 .menu li ul li ul li a { width: 10em; height:auto; line-height:1.3em; margin-left:0; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}

/* Positioning the Pop-out Drops */
.nav2 li {position: relative;}

.nav2 ul ul ul {
position: absolute;
top: 1px;
left: 119%;
}
I hope this helps someone else in the future.

[oeh]

Sorry did not do it for me dough.
The space between the first and the next level gets to large (to much to the right)
and the first menu (to the left) gets a black background.

I've tried to figure it out, but with no luck.

[MissyW]

I ran to the same problem. I have a 4 level menu that did work propery. I used AllCSS2 showmenu2 call and I took the ALLCSS2 CSS and modified it so the look would be Multiflex-3.

Here is the ShowMenu2 call you need to put in the index.php file

Code: [Select]

<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, &#39;<ul id="header_menu" class="menu">&#39;); ?><br />
          
Here is the MUltiflex-3 css now in the layout_setup.css for the nav2 navigation level section that controls the dropdowns (BTW, you could also get the css from the website baker site itself http://www.websitebaker2.org/en/home.php by looking at the source file of the web page and looking at the css that controls the dropdowns on the WB site itself.):

Code: [Select]

/*Drop-down menu*/

.header-bottom {width: auto;display:block;clear:both;}


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}

/* Header menu */
//#header_menu {position: absolute; margin-left: 20px;background:#555;}
//#header_menu li {line-height: normal;}
//ul#header_menu  {z-index: 10; clear: both;}

.nav2 {white-space:nowrap /*IE hack*/; float:left; width:900px; border:none; background:rgb(225,225,225) url(./img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/

.nav2 ul {
list-style-type:none;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}

/* Root Level Link Formatting */
.nav2 ul li a:hover, .nav2 li a:focus {background-color:rgb(210,210,210); text-decoration:none;}
.nav2 li a:active, .nav2 ul li a.active {background-color:rgb(210,210,210); text-decoration:none;}

/* Current page Customisations*/
.nav2 li.menu-current a {background: #000; color: #fff; border-bottom: 1px solid #000;}
.nav2 li.menu-current a {font-weight: bold;}

/* 2nd Child menu */
.nav2 .menu li ul {position: absolute; width: 10em; margin: 0; display: none; text-transform: none; border: none; font-size: 100%;}
.nav2 .menu li ul li {width: 10.5em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: auto;}
.nav2 .menu li ul a {width: 10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}

/* 2nd Child link hover */
.nav2 .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
.nav2 .menu li:hover ul, .nav2 .menu li a:focus ul, .nav2 .menu li.subMenu ul {display: none;}
.nav2 .menu li ul ul { display: block;}
.nav2 .menu li:hover ul ul, .nav2 .menu li.subMenu ul ul {display: none;}
.nav2 .menu li:hover ul, .nav2 .menu li li:hover ul, .nav2 .menu li.subMenu ul, .nav2 .menu li li.subMenu ul {display: block;}


/* 3rd Child Menu Appreances */
.nav2 .menu li ul li ul li a { width: 10em; height:auto; line-height:1.3em; margin-left:0; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}

/* Positioning the Pop-out Drops */
.nav2 li {position: relative;}

.nav2 ul ul ul {
position: absolute;
top: 1px;
left: 119%;
}
I hope this helps someone else in the future.

Brilliant!!  
Don't know if you are still around, Dadio, but THANKS SO MUCH    I was tearing my hair out over this, but your code did it for me.  I had a little trouble working out how much of the old show_menu2 code to replace in my Multiflex-3 index.php, but once I worked that out, your code fixed all my IE & SM2 nightmares! I only have a single level dropdown menu, so don't know whether this code works for multiple levels, but at least it gets the dropdown menu working in IE for one level!!!

Just wish someone would fix the Multiflex-3 template so the pulldown menu works in IE.  There have been 24,265 downloads of the template, so the mind boggles at how many people have had this problem.

Much gratitude.

[svsanchez]

Hello Community, I just browsed the templates site and couldn't find a template that still uses tables with the horizontal menu with dropdowns, they are all table-less css templates and I just can't figure out css, is there a table template that I could use?

[fischstäbchenbrenner]

Why do you want tables for the menue? I Think its much easier to use CSS.

[svsanchez]

Hello fish, I do not want to use tables on the menu, I just need the rest of the template to use tables, like the ROUND template!