Light Weight Multi Level Drop Down Menu

Thaks Tony for your answer
But is doesn't work
Now the menu doesn't appear anymore with IE.
I'll see tomorrow if I can play with your code...
If you have an idea, I will be pleased to try it.
Tx one more time.

In fact there was an error in the for loop, I've replaced "var s=0" bu s=0 and the script was running.
Now the problem is that all the sub-menu appear when a open the first level !
Any other suggestion ?

Beautiful! It all works now! Thanks!

Works in IE6, NN7.1, Mozilla 5, and Safari 1.2.1 -- thanks again!

-- Margrit

I have been able to get my vertical menu working properly but I cant figure out how to adjust the width of each group of items, since I don't need all items to be the same length. The labels for some groups of subitems will be only certain lengths; example 4 numbers for the year. So i guess the best way would be if there is a way to not specify the width and have it only as big as needed. Is this possible without a lot of extra coding?

My second question is there a way to move the whole menu over to left and top sides of the window? Right now it's approximately 20px from the top and maybe 60px from the left side...

My code is the same as the demo besides a few styles on the css and number of subitems etc... but if you would rather see my code just let me know

Hi Eric,
It would be possible but a little tricky.
You would need to set the width for each different level ul and also set the position of the next level. Something like this should get you started.

 
#vertnav ul {  
	padding:0; 
	margin:0; 
	list-style: none; 
    width:12em; 
   z-index:99; 
   overflow:visible; 
   position:absolute;  
   background-color:#DFDFDF;     
} 
#vertnav ul ul { width:5em;} 
#vertnav ul ul ul{ width:10em;} 
 
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{ 
    display:none;  
    position:absolute;  
    top:0;  
    left:12em; 
} 
#vertnav ul ul {left:5em;} 
#vertnav ul ul ul{left:10em;} 

These values are not correct you will have to play around and work the rest out yourself.
Other things such as the width of the links will also have to be adjusted.

Hope that helps

Tony
Thanks very much for getting back to me, I have it working nicely now....

Annii

I'm trying to make a small change to your great menuing system to allow the submenus to be varying widths. I did this simply by attaching an ID to the <UL> of the submenu. It works great in Moz, but has the effect in IE of seperating the main level menu when the submenu appears. It is easier to see than it is to describe. Take a look at:

http://www.bhsboosters.org/multimenu.html

As you mouse over the main menu you will see that the 2nd and 4th submenus have different widths. When using IE, mousing over these options causes the top level menu to split apart by the exact same width as the submenu.

Any ideas on what the heck I'm doing wrong here?

Thanks!

regarding my previous post to problems using this script with overlib, I finally found this answer from the overlib mailing list:

"Jesse,

This is due to IE handling onmouseover and onmousemove events somewhat
differently than Netscape and Opera7. In your:

activateMenu = function(nav) {...}

you simply need to change the line:

lis[i].onmouseover=function() {

to:

lis[i].onmousemove=function() {

and it should work without flicker for all of the supported
browsers."

anyhow if this gives anybody else fits as it did me, then there's the answer!

I have came up with a solution to allow varying widths for each level of menu items. I know a few people who are trying to get this to work so he is my code.

Your CCS needs to have these settings...

Replace

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul
{
	display:none; 
	position:absolute; 
	top:0; 
	left:170px;
}

With this

#vertnav ul
{
	display:none; 
	position:absolute; 
	top:0; 
	left:150px;
}

#vertnav ul ul
{
	display:none; 
	position:absolute; 
	top:0; 
	left:150px;
}

#vertnav ul ul ul
{
	display:none; 
	position:absolute; 
	top:0; 
	left:200px;
}

add addition groups for each sublevel and adjust the width's to meet you needs.

Now for the Html code...

<UL ID="vertnav">	
	<LI><A HREF="Page 1.html" STYLE="WIDTH:150;">First Level</A>
		<UL>
			<LI><A HREF="Page 1.1.html" STYLE="WIDTH:150;">Second Level</A>
				<UL>
					<LI><A HREF="Page 1.1.1.html" STYLE="WIDTH:200;">Third Level</A>
						<UL>
							<LI><A HREF="Page 1.1.1.1.html" STYLE="WIDTH:50;">Fourth Level</A></LI>			
						</UL>					
					</LI>
				</UL>
			</LI>
		</UL>
	</LI>
</UL>

obviously customize to match your css for width's and change links etc. Well I hope this helps someone out who is trying to do this. I have only tested this in IE 6.0 but i cant see why it wouldn't work in any others.

So I have implemented the menu system but I changed it's aesthetics and I am having trouble getting it to look right.

Here is the site I am woring on:

http://208.185.249.226

Here are my issues:

- It looks good but I would like it to butt up against the left edge of my containing box. I would also like the navigation to stretch across to the other side.

- In trying to get the drop down menus to be the same width as the top level box I got close for IE 6 but it is like a pixel or two short. Any ideas on how I can get it to line up?

- In IE6 the box surrounding the last item in each drop down is incomplete in the bottom right hand corner. Any ideas why and how I can fix it?

- The whole thing looks pretty bad in Firefox. Box height and hover state looks like the bottom padding isn't the same as the top. In the drop downs the right border doesn't show up completely and the height is also messed up.

Any help in getting to look right is greatly appreciated.

Thanks in advance!

Bloome

I used a different method that can be accessed at the same address. What do you think?

bloome

Hi Bloom,
Looks good in Firefox,
In IE6 its a bit jerky (very technical word) on hover.
In Opera 7.22 the second level is not accessible, too far right.

I will be updating the Light Weigth Multi Level Menu some time in the future to try and simplify the CSS so that it's easier to add your own style and to improve accessibility when JavaScript is disabled in IE. Mind you its not easy to disable JavaScript in IE so I don't think that is a big issue.
Unfortunately I am a bit snowed under at the moment so it won't be soon.

Hey Tony, nice topic, very timely.

I've just built a vertical menu on this structure. However, some of the submenus go too far down the page, and in some resolutions for some readers, the bottom options are right off the screen

Any quick pointers as to how one can change it so that the submenus do not start immediately to the right and adjacent to the parent <li> / <ul>?

I'm guessing a negative value on a "top" parameter somewhere, right? I can get the submenu back up the page with this sort of thing

#vertnav ul {
display:none;
position:absolute;
width: 85px;
left: 85px;
top: -10px;
}

... but it's not that useful, because it applies to all submenus, even the short ones, so a really big offset like 120px will break some submenus (put them way up the page, far from the parent).

Do I need to set styles per top level ul, with custom ul top values?

Hi mamba,
You could try using bottom:0; and removing top, but that may just give you the same problem in the opposite direction.

If the menu is fixed you could give classes to the ul's that need extra care and position them specifically, you may need to use !important to give the class enough weight.

Hope that helps

Thanks, Tony. You're right, the bottom:0 just gives me the same problem going up

I'll go the special class route.

Comment: Previously, I used to use "allwebmenus" ( www.likno.com ) to make this menu. It looked identical with that software, plus a few bells and whistles (e.g. little arrowheads to indicate which items had submenus).

However, there was a noticeable delay as the page loaded (had to pull 25Kb of javascript off the server, + do a bit of javascript computing), and search engines could never spider my site properly (links hidden in dense javascript).

This CSS solution is FAST, small and search engine friendly.

I used the method from this site:

http://www.digital-halide.com/cssmenu/multi/

My example is here:

http://208.185.249.226/

I was wondering if anyone knew if it was possible to make the dropdown boxes fully clickable and not just the words in them?

bloome

I seem to be having some problems with the vertical CSS navigation code. My menu works but I would like the menu to start out collapsed, and with the colored background for the buttons. I have uploaded the html document with the sample menu to this location:
http://www3.telus.net/css_navigation.htm
Any help you can give me would be much appreciated.

Mike,

Mike,

404 error

bloome

Hi bloome,
To get the li clickable you would need to add an onclick event to the li.
the easy way to do that would be just hard code it into your li, something like<li onclick="location.href=\"where.html\""><a href="where.html">where</a></li>

Hope that helps

Sorry I forgot a part of the url. This one should work.

I seem to be having some problems with the vertical CSS navigation code. My menu works but I would like the menu to start out collapsed, and with the colored background for the buttons. I have uploaded the html document with the sample menu to this location:
http://www3.telus.net/sharimik/css_navigation.htm
Any help you can give me would be much appreciated.

Mike,

I think I have figured out most of the hioghlighting problems for the CSS navigation menu system. I would like the menu to start out collapsed. If anyone has any ideas how this is done your help would be very much appreciated.

menu location:
http://www3.telus.net/sharimik/css_navigation.htm

Tony: Thank you for Light weight navigation menu article and this forum. I have learned a lot! And yet, there is still so much more to learn! Thank you all for helping this newbie out.

Mike,

Hi mwareman,
You need to set the inner levels to display none.
#nav li ul{display:none;}
then set them to display when hovering over the li above.
#nav li:hover ul{display:block;}

Hope that helps

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

I just faced the same problem with IE6 too. As I don't know much nothing about javascript I asked one friend to help to insert z-indexes by javascript but he was helpless too. Here is my case:
http://zone.ee/uutma/css_menu/
Take a look at the Item 1.2.1
Thanks in advance for the great menu solution

Hi Uutma,
you have set the width of the li's to 12em and are positioning the next level on top with margin-left set to 9em.
Try changing the margin-left to 12em in

#nav ul ul, #nav ul ul ul{ 
    display:none;  
    position:absolute;  
    margin-top: -1em;  
    margin-left: 12em; 
}

Hope that helps

Thank you Tony.
Sorry, that I didn't mention it before ... this margin-left change was intentional.

#nav ul ul, #nav ul ul ul{ 
    display:none;  
    position:absolute;  
    margin-top: -1em;  
    margin-left: 9em; 
}

I'd really like to save some viewport space there and to ease the mouse movement by laying submenus on top of parents. Maybe this can be done by cascading some selectors or ... adding that z-index adding cycle to this javascript?

Edit: Or by making the script to display them in different order? Would it be the "nail in coffin" against simplicity?

Hi Uutma,
In the JavaScript file where you have the onmouseover and onmouseout functions add this.lastChild.style.zIndex="10"; changing to whatever z-index you need.
That should fix IE.
Then too fix the other browsers, in the css file change the first z-index in #nav ul to a lower number and where you have

add z-index:99;

Hope that helps

Hi

With regards to the compatibility on MAC IE5.2 perhaps this link helps:
http://www.macedition.com/cb/ie5macbugs/index.html

Great menu. However a wish list I would add is:
A barebones commented version. (no borders, background and such like)
An ability for auto sizing on the menu items. Typically I'd really like it to expand/shrink with the content or force to be as wide as the widest element in that set.
MAC IE5.2 support. Sorry, I don't have a MAC just need to support this platform.

I am going to read this thread more fully to see if the auto sizing is already in here. I have played with setting the widths to less and setting overflow. I had partial success when I combined this with nowrap on the blank space.

I'll plough on and let you know if I suss it out. Excellent menu. I have to wonder if the same thing is possible without the LI tags and replacing UL with DIV's. I had done previous menus like this setting the A tags to display as block but mucked up the cross browser support somewhere along the line. If only IE supported :hover on other items other than A, all would be well.

Thank you for your work so far please keep it coming I am learning a lot.

MattyUK

Hi Tony

In terms of seeking auto widths: I had had some sucess with the following code. I'll post it here for consideration and comments.

CSS CODE

div#menu div#navwrap {
	border: 1px solid #FF0000;
	position: absolute;
	z-index: 99;
	margin-left: 110px;
}
#nav {
	list-style: none;
}
#nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 12em;
	z-index: 99;
	position: relative;
	overflow: visible;
}
#nav li {
	margin: 0;
	position: relative;
	float: left;
/*I removed this line, Matt.	width: 12em;*/
	background-color: #DFDFDF;
	border: solid 1px #CECECE;
	border-bottom: none;
	display: block;
	height: auto;
}
#nav a {
	text-decoration: none;
	display: block;
	padding: 0.1em;
	margin: 0.2em 0 0.2em 0.1em;
	background-color: #DFDFDF;
	height: 1em;
	white-space: nowrap;/* Added to force no wrapping on links, Matt*/
}
#nav a:hover {
    background-color: #0099CC;
    color: #FFFFFF;
    background-image: none;
}
#nav ul {
    display: none;
}
/*all see this */
#nav ul ul, #nav ul ul ul {
    display: none;
    position: absolute;
    margin-top: -1.8em;
/*I removed this line, Matt.    margin-left: 12em;*/
}
/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul {
    margin-top: -1.4em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
    display: none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul {
    display: block;
}
li>ul {
	top: auto;
	left: auto;
}
/*I added this rule to target the drop down LI's since I could see them displaying lined up horizontally, Matt.*/
#nav li ul li {
	clear: both; /*Added to force new line for LI's*/
}

XHTML CODE

<div id="navwrap">
<ul id="nav">
 <li>Sunfishes
  <ul>
  <li><a href="">Blackbanded sunfish</a></li>
  <li><a href="">Shadow bass</a></li>
  <li><a href="">Ozark bass</a></li>
  <li><a href="">White crappie</a></li>
  </ul>
 </li>
 <li>Grunts
  <ul>
  <li><a href="">Smallmouth grunt</a></li>
  <li><a href="">Burrito</a></li>
  <li><a href="">Pigfish</a></li>
  </ul>
 </li>
 <li>Remoras
  <ul>
  <li><a href="">Whalesucker</a></li>
  <li><a href="">Marlinsucker</a></li>
  <li><a href="">Ceylonese remora</a></li>
  <li><a href="">Spearfish remora</a></li>
  <li><a href="">Slender suckerfish</a></li>
  </ul>
 </li>
</ul>
</div>

JS CODE

activateMenu = function(nav) {
    /* currentStyle restricts the Javascript to IE only */
	if (document.all && document.getElementById(nav).currentStyle) {  
        var navroot = document.getElementById(nav);
        /* Get all the list items within the menu */
        var lis=navroot.getElementsByTagName("LI");  
        for (i=0; i<lis.length; i++) {
           /* If the LI has another menu level */
            if(lis[i].lastChild.tagName=="UL"){
                /* assign the function to the LI */
             	lis[i].onmouseover=function() {	
                   /* display the inner menu */
                   this.lastChild.style.display="block";
                }
                lis[i].onmouseout=function() {
                   this.lastChild.style.display="none";
                }
            }
        }
    }
}
window.onload= function(){
    /* pass the function the id of the top level UL */
    /* remove one, when only using one menu */
    activateMenu('nav');
/*    activateMenu('vertnav');*/
}

Problems:
1> The top level items move/jump to the right when the drop downs are expanded. I would perhaps set their display to hidden but haven't had time to explore this and fear the layer would obscure links underneath it.
2> Opera Oddness. This occurred BEFORE I made any additions but attempted to tidy the white space in the CSS file. I put a space before every { so “a:hover{“ became “a:hover {“ I removed trailing tabs and white space at the end of lines. Strange and I have no idea which tidy up amend broke it for Opera. Tested on opera 7.23 build 3227 Win XP. I renders as a vertical menu not a horizontal one.

Tested OK on:
IE6.0 WinXP
Netscape 7.0 WinXP
Mozilla Firefox 0.9 WinXP

Not OK on:
Opera 7.23 WinXP

I would really appreciate any feedback or changes that might help us overcome the problems above or better ways of achieving the same goals.

MattyUK

Hi MattyUK,
I'm a bit bogged down with other stuff at the moment, but am keen to have a look when I can.
If you have an example page available I would love to have a quick look otherwise I will have to wait till I get a coffee break.

Hi Tony + all others

This is as far as I have got.

http://www.realworldweb.co.uk/crossbrowsermenu/

MattyUK

matty,

This may be a bit late in the day to bring up (you may well be aware of it already!) but reading your comments vis-a-vis wishing that IE supported :hover on any tag through JS there is a workaround using an .htc file to link events to the :hover psuedo class. the MS JScript finds all instances of the hover event and translates them to mouesovers it is accessed in the body tag using the behaviour property this link explains its workings better than I can,

http://www.xs4all.nl/~peterned/csshover.html

I've used it and it seems to work without a hitch, very simple to install and use (now I can assign :hover to any selector )only real drawback is requires JS to be active in browser, but hay, most users I know wouldn't have a clue how to turn it off.
Just thought it may be of interest?

Hugo.

Great link thanks.

hey Tony
Using this .HTC file I suspect may be easier than using the current JS and might afford more flexibility on designing/tweaking the rest of the menu's for different presentations/styles.

MattyUK

I have a problem, both in IE and Netscape: The menu works fine, open, closes, everything.

But when it opens , it pushes the next div (all the text on the page)
downwards on IE, to the left in NEtscape, instead fo opening over it.

What I did wrong?

Hi ffergil,
I think somewhere a few pages back a similar problem was posted.
The solution should be to contain the menu in a div that is absolutely positioned.

Hope that helps

I´ve written you about the horizontal menu not working for me in ie. It moves the next div, actually the page) down when opening. I´ve recived a message (31k) from pcss, as spam, and I deleted it. If it was yours, plese send it to me again.. I´m sorry.

To make a it workable, this menu still need to have the following down:

- Different width for different level of menu, especially the top horizonal menu items (MattyUK's example doesn't work well especially when there are more level of menu)

- Delay, say 300ms, to show popup after mouse roll over the menu item or mouse out of the menu item. So it will improve usability a lot.

Looks pure CSS cannot handle it. Worse, it seems need to break the semantic - <ul> into pieces...

Any clue?

Hi ffergil,
Did you try my suggestion of placing the menu in a absolutely positioned div.

Hi nkw1,
It really depends on your definition of workable.
For me the menu works fine as is, it's purpose was to be a simple light weight menu.

MattyUK's example worked fine for one level which is most likely all he needed.

The idea was to keep it as simple as possible and not bloat it out with JavaScript.
As it is the JavaScript is only needed for IE due to their lack of support for hover on elements other then "A". Other then IE it is a pure CSS menu.

There are other menus that should do what you want but they will require much more javascript.

Hello All,
I have a question regarding implementation of the horizontal menu. An example of my efforts can be found at [url]http://www.newspacearchitects.com/index.html [/url]

I was wondering if there was any way for a top level <li> to stay highlighted while users hover over submenu contents?

Thanks for your help!
-Kasia

Added a delay to this that will cause the menu to delay hiding for a heartbeat, but to do it logically?

Thought I'd ask before I changed it myself

Hi LotusGeek,
You would really need to use a different menu to add a time delay.
This menu only uses JavaScript to work in IE, Other browsers rely only on CSS.
You would have to use JavaScript for all browsers to add the time delay.

Hi KasiaOz,
With a bit of work you should be able to get it working in most browsers

#nav li:hover a{background-color:green;} 
#nav li:hover li a{background-color:black;}

It's not so easy to do it for IE

Hope that helps

I cant get the horizontal menu to work on IE 6 sp1 on windows 2000 i get it to work on firefox any ideas, cause it gives a javasrcript error on ie6 any reasons why :roll:

okay i got it to drop down but in ie6 my combo boxes on the page flash around every when i mouse over the menu options :?:

Hi Ready2Rumble,
Form elements don't like having anything on top of them.
You would be best to set form elements that interfere with the menu to visibility:hidden when the menu is active and visible when the mouse is not on the menu.

Hope that helps

how do you change the set up of the widths on the top level of the menu without changing the bottom submenu widths

Hi Ready2Rumble,
You could try setting the top li width via

#nav li {width:10em;}
/*then override that for the lower levels with */
#nav li li {width:12em;}

Hope that helps

great changes with ease another question can you change the submenu colors in the css file? so they are seperate colors top level darker background and the sub level a lighter background color.

aha i have manged to change the colors by playing around i dig your menu its supa cool

Hi

I'm finding that submenu items that pop out to the right of dropdowns in the horizontal menu are slightly overlapping and underlapping their "parent". Strangely, the first item goes over and the second goes under.

Any thoughts?

Ta

Persia

Hi persia,
You need to provide some more info, a link would be a good start.
Also what browser are you using?

I just read the whole thread and hoped somebody would have the same problem as i have.

I have used the same HTML as in the article and changed some layout-stuff and implemented it in a test-file. I just do not understand why there is an about 30 px margin between the body and the <ul>-menu. Also, i couldn't change it via "left:0px". The only sucessful solution was to put the ul in a div and set the x-position of the div at -30, but thats not really satisfying. The other functions are ok ...

http://www.matowa.at/htl/menutest

Don't worry about the language, I'm from Austira.

Any suggestions? Thanks a lot![/url]