Light Weight Multi Level Drop Down Menu

Tony, that looks pretty cool.... the "suckerfish" example page link is a Page Not Found(404) Error

BTW have you played around with any XML based menu systems ?

Hi paCkeTroUTer,
Thanks I fixed up the link.
Can you point out a couple of good XML based menu systems.

I have come across a problem using your method on IE6. I have a horizontal navigation list that wraps to form two rows of buttons. A dropdown list from the upper row of buttons is hidden under the second row.

It works fine in Moz1.4

I have tried various 'z-index' values to no avail.

Is there a solution to this problem?

Hi kenrbnsn,
Thanks for pointing it out.
I haven't thought of a solution yet but will be working on it.

Well after hours of trying many different combinations of CSS rules I have finally cracked it.
When the horizontal menu wraps both levels of menu are available.

I'd still like to here from some Mac users if there are any about.
http://www.csscreator.com/menu/multimenu.php

That's a really nice menu! On the platforms where it doesn't work, what does happen? It would be great if the navigation fell out anyway, just as the logical nested lists...

Yes that about what happens although I'm still waiting on someone with a mac to test it out in some browser

The JavaScript is only needed for IE so if any other browser has JavaScript disabled the menu will still work.

If the browser doesn't support CSS at all then it will just see the unordered lists.

If IE has JavaScript disabled it will be stuck with just the top level menu. You could get round this by using JavaScript to write out the css for IE so a plain list would be displayed without css when IE had Javascript disabled.
That's not really a concern for me If you are surfing without JavaScript then you are missing so much anyway a few levels of menu wont be missed
:roll:

I might (fingers crossed) be able to track down a mac user and give it a try. Not sure what browser he uses, though.

Hiya, Mac user here, running OS X.2.8. Sorry to bring bad news, especially as it's my first post here

Safari 1.0 (v85.5)
Horizontal menu. Only the first item in the dropdown is displayed
Vertical menu. Seems to work fine
However, the sidebar on the right starts underneath the main section, but at the correct horizontal position.

MozillaFB (0.7.1 milestone)
Horizontal renders correctly, same problem with the sidebar as above. However, when you mouseover any of the items in the vertical menu, the flow of the page is interrupted. The section entitled 'Files' is shifted up to start in the margin next to 'Javascript'

MacIE (5.2)
Totally breaks the layout of the page, and the menus don't drop down at all.

Camino (0.7 milestone)
Works, although there are problems with the vertical menu as detailed with MozFB (and other gecko browsers, i presume?).

If you want some screenshots, send me a PM and i'll send some over to you

Hi teaboy,
Thanks for the response.
The Vertical menu was fun to create but it's not very usable in anything so I am looking into a redesign for it.

Looks like I have some work on the horizontal one as well.

Thanks again for pointing out the problems.

any way to make this menu hug the top left corner of the browser window? if you take the #nav id property off the ul it does but of course then it starts screwing with other ul's on the page.

Hi brad98,
The easiest way would be to position a containing div around the menu.
Something like position: absolute; top:0; left:0; margin-left:-2em;

Hope that helps

I'm playing with the vertical menu portion of your code..

My version works fine in IE6. In Mozilla, all of the hidden ULs for a particular LI display on hover. In Opera, nothing works. ](*,)

You can see the pages at http://63.247.85.58/~restaura/admin/isok.php?action=update&what=doit

This has been driving me crazy all weekend!

Hi kenrbnsn,
I don't have Opera installed at work so I'll check it out when I get home.
What versions of Opera is causing problems?

Sorry.

Versions: Mozilla 1.4 and Opera 7.23 (just downloaded today)

Hi kenrbnsn,
I think the Opera is caused by lack of available LI space for hover.
Try putting some margin on a elements within vertnav.

 
#vertnav a { 
    margin:0.2em 0 0.2em 0.1em;

the order clockwise from the top, top - right - bottom - left. Right margin is left at 0 so to make it easier to hover onto the menu that pops to the right.

Hope that helps

I decided to go back and re-code the CSS.

I deleted everything dealing with the nav lists and added things back one by one seeing how each affected the display.

I now have everything working on IE6 and Mozilla 1.4

It still doesn't work on Opera 7.23 but I'm not too worried since the person who will be using this page doesn't use Opera.

When I use this in IE6 and mouseover the top-level menu, it seems to shift everything a bit to the right. I haven't been able to figure out how to fix this, any ideas?

Oops, sorry to post again so soon. I'm also having trouble in that when I remove the set width of the #nav li rule the submenus suddenly go into what appears to be an inline display. I'd like to not have all of the li the same width, so was hoping to be able to set the width to auto, but that's not working. Any ideas how to fix this, or should I just manually set the width on each li?

Thanks!

Hi Brendan,
To fix the movement in IE set the position to absolute in #nav ul, which is how I originally had it set. It was changed to relative for when the menu wrapped to another line the bottom level was not accessible.

I don't know of a solution for the width problem if you find anything let us know.

Hey guys, I used a combo of the Suckfish version and the version from this site. I cant get it to work in Opera because the rollovers appear in the upper left corner. Anyone figre that out yet?

You can check it out at www.flchost.com

Thanks

Hi SuprSpy79,
Try adding position:relative; to #menu ul.

Hope that helps.

I keep getting a javascript error in IE6 on WinXP. The dropdowns work, but it gives me an "Object required" error that seems to translate to this line:
if (document.all && document.getElementById(nav).currentStyle) {

I don't know why - it's a dead-set copy and paste... anyone else had this trouble???

Nice work.

Any idea of how to get form elements such as <select> not to show through the menu in IE?

Hi,

Great menu! I have used this in one of my websites and it works a treat.
I like the minimal use of javascript, too.

I have a question, though.

How do I get the vertical menu to appear to the far left of the screen? On all of my pages it seems to be shifted about 5% (not exact) out from the left and I cannot find what controls this setting.

cheers,
adrian

Hi guy's,
Mza,
Select boxes and some other form elements don't are handled differently by browsers then most other elements. They don't follow the normal z-index layering structure. I don't know of a way around it apart from moving either the menu or select elements out of the way.

Public,
Have you tried playing around with the left margin on the top level ul.

Hope that helps

I am completing a redesign of my major account's site.

Here is the old site: http://www.restaurantserenade.com/
Here is the new site: http://63.247.85.58/~restaura/new/index.php (click on the logo to get to the rest of the site)

I need feedback of the look and feel, how it looks and performs in older browsers, how it looks on platforms other than Windows (MAC, Linux).

The new site uses the techniques discussed in this thread for the left hand menus.

I know the site doesn't perform well on Netscape 4.7 and I had a person contact me who uses a mac G4 with Internet Explorer, 5.1 and said it looked horrible.

The content is still being worked on.

Thanks in advance.

Hello,

I just read about the multilevel menu. It's an excellent menu, but I have a little problem with it. Some elements of a submenu hide under some elements of the parent menu. Have you got any idea how to solve this problem ? I tried for hours to set z-indexes but it didn't work.

Thanks

Hi kenrbnsn,
possibly your friend doesn't like purple
I don't have a mac to test with but I do mention on the page that it fails in IE5.2 on Mac, so I can only assume the menu also fails in IE5.1 on mac.

Hi horatiu,
Can you post a link to the page so we can have a look.
Also which browsers are causing the problems.

Is it possible to have a different height of block than the topmenu in the submenus?
I couldn't figure out how to achieve this

Thx for your help

Hi LeFonk,
I'm not sure I understand your question but I'll have a go anyway.
If you give the li a class then you should be able to change the height of a specific list item.

  .bigone{height:100px !important; background-color:red !important;}

<li class="bigone"><a ... 

Mark the style !important if they are having no effect.

Hope that helps

i'm afraid that in IE it doesn't work...
if you put a bigger size than the top menu, it seems to work (ie. height: 50px;)
but if you put a smaller size, which is what i'm trying to get, like height: 15px, it doesn't.
the #nav a { height:1em;} is the one that is kept....

if anyone has a solution....

thx

Hi LeFonk,
Give that LI a class as I mentioned before and set the height and line-height of the "a" within that class

li.small{height:10px;} 
    li.small a{height:10px; line-height:10px;}

Hope that helps

it seems to work but there's still something i can't understand
could you please have a look here
http://home4funk.mp3.free.fr/dropdown/index.html

my test menu is there

the first submenus height is working with the new class i put, but there's a space between each item of the submenus i can't figure out where it comes from.

just see the source of the page, everything is there (no external css or js file)

Thx

Hi LeFonk
After

#nav li a {
	background-image: url(img/fd_nav.gif);
	line-height: 30px;
	height: 30px;
}

add

#nav li  li a {
	line-height: 20px;
	height: 20px;
}

and adjust the values as needed.

Hope that helps

RockyShark wrote:

I don't know why - it's a dead-set copy and paste... anyone else had this trouble???

I had same problem.

Comment out the last line. The bottom part of the script seems to pass the var if left without a comment it simple calls once with the "nav" id used and once again with the "vertnav" id used.

Look at this segment of code:
window.onload= function(){
/* pass the function the id of the top level UL */
activateMenu('nav');
activateMenu('vertnav');
}

If using nav menu change to:

If using vertnav menu change to:

Well I think I am right in the above, it does work for me.

MattyUK

Hi MattyUK,
Your correct, only one of those lines is needed depending on your choice of menu.
Since my example has two menus I left them both in.

I will have to revise the wording of the example to make it clearer.

Hi, I'm working on implementing the vertical menu.
I notice that even in the example given at http://www.csscreator.com/menu/multimenu.php
when you hover over the first level menu item, what appears to be a white line appears.
even if I match the background colour to the menu color (to try to hide the line) the menu items on the first level appear to "jump" when you hover over them. Hovering down the menu is slightly less obvious than if you hover up the menu for some reason.
the second level menu is fine though.
How can I get rid of this?

Thanks

Anniii
PS love the menu

Hi annii,
Sorry for the slow response.
Adding float:left; to #vertnav li, stops the gap in IE6.
I have only tested it in Firefox and IE6.
When I get time I will test it a little more and add it to the demo page.

Hope that helps

(I've been waiting for the same reply as annii) -- I tried adding float:left; to #vertnav li and instead of fixing the problem, it caused my first-level menu items to flow across the page instead of lining up vertically on the left.

--memcinto

Hi memcinto,
Which browsers are you having problems with?
Heres what I have in multimenuvert.css

#vertnav{list-style: none;} 
 
#vertnav ul {  
	padding:0; 
	margin:0; 
	list-style: none; 
    width:12em; 
   z-index:99; 
   overflow:visible; 
   position:absolute;  
   background-color:#DFDFDF; 
    
} 
 
#vertnav li {  
	position: relative;  
	width: 12em; 
    background-color:#DFDFDF; 
    border:solid 1px #CECECE; 
    border-bottom:none; 
   display:block; 
   height:1.5em; /*auto */ 
   margin:0; 
   float:left; /*fixes a gap in IE when hover is over a li with a next level*/ 
} 
 
#vertnav a { 
    text-decoration:none;  
    display:block; 
    padding: 0.1em;   
    margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */ 
    background-color:#DFDFDF; 
    width:11.5em; /*helps IE with hover */ 
    height:1em; 
} 
#vertnav a:hover{ 
    background-color:#0099CC;  
    color:#FFFFFF; 
} 
 
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{ 
    display:none;  
    position:absolute;  
    top:0;  
    left:12em; 
} 
 
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{ 
    display:none;  
} 
 
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{ 
    display:block; 
} 
 
li>ul {  
	top: auto; 
	left: auto; 
}

I just tried it out in Opera 7.2 the vertmenu stoped working so back to the drawing board.

Ok since the problem only seems to occur in IE we could use the Holly hack from www.positioniseverything.net to target just IE

 
/* Win IE only \*/ 
* html #vertnav li{float:left;} 
/* end holly hack */ 

Let me know if you still have troubles with it.

Hi, thanks for your prompt response to my messages. I'm still having the same problem with the Holly hack, that is the main menu items flow from left to right across the page instead of lining up vertically on the left:

without the Holly hack: http://eebweb.arizona.edu/testing/vertical2.htm

with the Holly hack: http://eebweb.arizona.edu/testing/vertical.htm

I am using IE version 6.0.2800 SP1. I also have some screen shots in case the behavior doesn't appear for you:

http://eebweb.arizona.edu/testing/screenshots.htm

Thanks!!!

-- Margrit[/img]

Hi memcinto,
If you resize the window you can get to a point where the li's line up correctly.
So we need to restrict the width of the main container.
Try setting the width of the top ul eg:#vertnav{width:12em;}

Hope that helps

Hi everybody
I'm trying to make a multiple level menu with the wonderful solution proposed here. My problem is that the nested list that I must use (generate by a cms in php) has a very little difference with the one's used here.
He re is my list format :

<ul> 
  <li>About 
    <ul> 
      <li>test</li> 
    </ul> 
    <ul> 
      <li>text2 
        <ul> 
          <li>First Post</li>
          <li>test2</li> 
        </ul> 
      </li> 
   </ul> 
  </li> 
  <li>Home</li> 
</ul>

The problem is that with IE5 or 6, the fist "test" doesn't appear !
That because the <ul> tag is closed and then reopen for the rest of the list... With Firefox all is ok, but with IE...
Is there a solution by changing something in the javascript ? Because I can't achieve to change my nested list format
If someone has a solution, it would be much appreciated...
Tx

Hi ninjadelanuit,
Currently the menu only targets one UL within a LI.
Try changing

To

 
 /* assign the function to the LI */ 
             	lis[i].onmouseover=function() {	 
 
                /* display the inner menu */ 
                  var uls= this.getElementsByTagName("UL"); 
                  for(Var s=0; s< uls.length; s++){                   
                       uls[s].style.display="block"; 
                   } 
                } 
                lis[i].onmouseout=function() {                        
                   var uls= this.getElementsByTagName("UL"); 
                   for(Var s=0; s< uls.length; s++){                   
                       uls[s].style.display="none"; 
                    } 
                }

I haven't tested this out.

Hope it works.

Trying to implement this solution for a vertical menu.. when I mouse over the various links that activate the submenus, i get a 'flicker' in IE.. the various solutions proposed to solve this generally seem to be be based on using images for backgrounds, which I am not doing.. any Idea why my code in particular might be 'flickering'? when I view the demo it works great using the same browser.. any suggestions would be appreciated.

well, no sooner than I posted it did I figure it out.. I was running overlib as well which apparently has a 'clear' function that was making the div disappear..

Hi jhodges,
Glad you found the solution.