190 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi wagnerthomas1,
Try #nav{padding:0;}

Something else I noticed was that you have are trying to activate two menus, you should remove

Quote:
activateMenu('vertnav');


Hope that helps

KasiaOz
Offline
Regular
Last seen: 15 years 12 weeks ago
Joined: 2004-07-27
Posts: 16
Points: 0

Highlighting bars

Hello,

I'm having a conflict between the solution referenced below and my desire to have tags change color dynamically as I roll over them. When I add the desired version of the code below to my css, and have the following

#nav li:hover a{color:#999999;}
#nav li:hover li a{color:white;}
#nav a:hover{
background-color:#000000;
color:#ff9933;
background-image:none;
}

, the orange roll-overs that appear when I currently scroll over the a links, are not visible (atleast in safari and firefox). I am looking for a solution where I can keep the orange roll overs and at the same time get the top level li tag to change color (not background-color) to gray.

Thoughts?
-Kasia

re:
Hi KasiaOz,
With a bit of work you should be able to get it working in most browsers
Code:
#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 Shocked

Hope that helps

persia
Offline
newbie
Last seen: 15 years 8 weeks ago
Joined: 2004-08-26
Posts: 3
Points: 0

menu creates gap in moz, ffox, not in ie

Hi

I've put the menu in a test page at:

http://home.vicnet.net.au/~persia/test/real21.html

The menu seems to be dragging a div down in mozilla & firefox, but not in IE. Any idea what's causing this?

Also, the submenus are slightly over/underlapping, again I can't see why.

Thanks

Persia

persia
Offline
newbie
Last seen: 15 years 8 weeks ago
Joined: 2004-08-26
Posts: 3
Points: 0

menu creates gap in moz, ffox, not in ie

Seem to have fixed this by setting the #nav margin-top to -17px and adding a nbsp; in the div that contains the menu. Is that an unacceptable hack? Smile

wagnerthomas1
Offline
newbie
Last seen: 15 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-08-30
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

Thanks Tony, i didn't knew, that a normal ul-padding is about 40 px. It's working now ...

Speaking of lists (if I shall open another topic, please tell me),

I've already searched for an answer in other topics but didn't find one. I'm trying to usw my own images as bullets in a list (as described in alistapart.com) and it just doesn't work. In mozilla it makes another line, in IE it doesn't even show the elements. I'm really desperate ... it just makes no sense, or does it!?

http://matowa.com/htl/menutest/test.htm

Thanks a lot, again.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi wagnerthomas1,
With lists you will find it easier to position the image as a background-image.
You then use padding to move the text off the image.

Hope that helps

wagnerthomas1
Offline
newbie
Last seen: 15 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-08-30
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

Thanks once again.

I don't understand why all the browsers generate different sizes when i use padding and borders in my css. I mean, it looks different in every browser and i don't find a way to create a #-div with <a> in it which look the same in opera and ie.

What is the reason this (http://www.alistapart.com/d/horizdropdowns/horizontal.htm) looks the same in opera and ie and this (http://www.matowa.com/htl/menutest/test.htm doesn't.

The height is different in every brower. Why that? Is there a way to get them to have the same height? Or is it completely wrong what I'm doing?

I don't know if I'm writing my problem in an understandable way (again -> Austria Wink), but I seem to be extremly dumb.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi wagnerthomas1,
It could be a number of things or a combination of them.
- Line-height, try explicitly setting the line-height.
- Quirks mode, your page is in quirks mode where the other is in standards mode.
- Box model.

Hope that helps

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Light Weight Multi Level Drop Down Menu

Ok I've re-read all the comments attached to this thread and I don't think this has been asked but forgive me if I have missed it.

However my question concerns the accessability of these menus. Whilst it is indeed fine code is it really usable for things like screen readers if used as the only means of navigating a site?

What I mean is as far as I can tell the only way to get the dropdowns to apprear is with the use of my mouse and the hover psudo class, using the keyboard does not seem to work, which is to be expected. As a result I would not be able to get to sub sections in the absence of additional static subsection navigation.

What are your thoughts on such things?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi Briski,
The idea behind these menus was to create a simple menu without the need for javascript or another scripting language.
Really it succeeded, the javascript is only needed for IE and is minimal.

To add keyboard browsing or screen reader support you would need to have all browsers relying on JavaScript and the JavaScript would be far more complicated.

You should really design sites that can be navigated without a dropdown menu and think of it as a bonus for those that can use it.

Hope that helps

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Light Weight Multi Level Drop Down Menu

Yes that confirm what I thought already, Great Laughing out loud

All I need to do now is make our sales team and customers understand that dropdown only is not a nice way to go ](*,)

JJDude
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2004-09-11
Posts: 7
Points: 0

Need Some help on Drop Down

I have a Drop Down Menu that I created that works perfect in Mozilla, but in IE it goes behind the lower division. How do I correct this?

http://www.fashionace.com/jbwork/menu.html

Thanks,
Jason Bullock

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi JJDude,
Looks like you need to adjust z-index.
http://www.csscreator.com/attributes/properties/z-index

On closer look you have already and it seems to be working.

JJDude
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2004-09-11
Posts: 7
Points: 0

Menu's work, another layout issue

Hey Tony,

Thanks for the information. I have another question maybe you could answer and/or point me to a site that can help.

I am trying to create a lineup of products to be displayed on these pages. I want the container division with the black border/red background. But I want to put divisions for the Product Image and another directly to the right for the Product Description nested inside this container division. How would I go about that? I've tried using Position, Float, and all that stuff but to no avail.

Thanks in advance,
Jason

Mr.Neutron
Offline
newbie
Last seen: 15 years 5 weeks ago
Joined: 2004-09-14
Posts: 3
Points: 0

CSS menu PANIC!!!:( How to Center text in IE??

Hi,
need help plz. I tried out your menu and it´s great. Works nice at any browser, but i got a problem with IE. If i set up

text-align:center; 
(for li, ul), IE browser centers tables, not text. so it looks terrible and doesn´t work. In Firefox, Opera, Mozilla, everything is cool. I tried to center that using <center> tag, but that is not xHTML 4.0 valid:(
Thanks a lot Ondrej (sorry for my english)
:roll:

Mr.Neutron
Offline
newbie
Last seen: 15 years 5 weeks ago
Joined: 2004-09-14
Posts: 3
Points: 0

I got it

Laughing out loud
Finally i solved the problem by writing text-align:center tag into:

#nav a {
    text-decoration:none; 
    display:block;
    padding: 0.1em;  
    margin:0.2em 0 0.2em 0.1em; 
    background-color:#dfdfdf;
    width:10.5em; 
    height:1em;
	text-align:center;
}

But why in there? Don´t understand... But IE does Laughing out loud Finally.Thanx anyway

Mr.Neutron
Offline
newbie
Last seen: 15 years 5 weeks ago
Joined: 2004-09-14
Posts: 3
Points: 0

Position IE vs FireFox??

Hi,
got a problem with an absolute positioning of my css horizontal menu.
with this

Quote:
Z-INDEX: 100; MARGIN-LEFT: 0; WIDTH: 1001px; POSITION: absolute; left: 56px; top: 108;
It works nice at any resolution, but only using IE. In firefox, menu is longer and is not correctly positioned. So, what should i do. Thanks

dandelion
Offline
newbie
Last seen: 15 years 5 weeks ago
Joined: 2004-09-16
Posts: 2
Points: 0

Delay on mouse off?

Great solution. I used this primarily to overcome a problem I had with the content of a JS driven menu still displaying (and being printed) even when it's container block was hidden by a media=print css switch.

But this is quick, easy to edit, and SEO friendly too - bargain!

The only drawback I can see is the inability to incorporate a delay on mouseoff - I have read through this thread and it seems the concensus is that a fully JS driven menu would be required if a delay is really important.

Does anyone have thoughts on a good one? I have tried AllWebMenus, but it has all the drawbacks listed above.

Is there really no feasible way of adding a delay here, even if it meant a bit of a hit on speed etc.?

My gratitude to all those involved in developing this.

blacki
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-09-29
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

Is it possible to modify this menu to get the first two levels displayed horizontally and the third one as drop down ?


>menu1 | menu2 | menu3 | menu4
sub1.1 | sub1.2 | sub 1.3 | sub 1.4
drop 1.1.1|
drop 1.1.2|
drop 1.1.3|
____________________________________
menu1 | >menu2 | menu3 | menu4
sub2.1 | sub2.2 | sub 2.3 | sub 2.4
drop 2.1.1|
drop 2.1.2|
drop 2.1.3|

I hope you know what i mean Wink

btw. sorry for my horrible English Laughing out loud

deepsin
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-09-29
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

Hey I'm having a problem with the vertical list in mozilla/firefox and safari. I use the list on the left side of my site and on the right side there is the rest of the content. I have set "overflow: auto" for the right side content so that it will show scroll bars when neccessary. But the menu's dont show up over the area with overflow.

You can see the site at http://down.qc.edu/qcsports

The site works great in IE6

blacki
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-09-29
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

Whats about the comment mismatch on the end of your stylesheet ?

/* Win IE only \*/ 
* html #nav li{float:left;}  
/* end holly hack */ 
* html ul li a { height: 1%; }

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi blacki,
The comment is started with /* in the top line, then IE5 Mac ignores the topline closing comment because of the backslash \*/.
All other browsers close the top comment and read the next line.
But because the * html at the beginning of the line, it is only read by IE.
Then the next line of comment closes the top comment for IE 5 Mac and just acts as a new comment for other browsers.

So the whole section is thought of as a comment in IE5 Mac, everything else reads it fine but only IE win will act on it.

Hope that helps

blacki
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-09-29
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

thanks Wink but that was not my prob, i'm still searching for my hint to make the menu in first and second level horizontal an in the third one as drop down.

deepsin
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-09-29
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

That second line is only there because i found that it fixes the IE problem where you have to hover over the actual text for it to recognize the mouse over.

So.. any idea how to fix the problem with mozilla/firefox?

bryanzera
Offline
newbie
Last seen: 15 years 1 week ago
Timezone: GMT-8
Joined: 2004-10-12
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

I added the following line to #vertnav ul
border: 1px solid #036;

See it in action at http://dev.bryanzera.net/left_nav/test.html

But the root UL won't take a border. What gives?

dandelion
Offline
newbie
Last seen: 15 years 5 weeks ago
Joined: 2004-09-16
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

Hi

I was wondering whether anyone had tried, or had any thoughts on, a bit of javascript called from each <li> to provide a slight delay on mouseoff, to make the menu a little more friendly?

I love the menu because it's SE friendly, edit friendly, and can be CSS hidden reliably for printing, my only dislike is that if you fall of the edge you lose it, with a half second or so of delay it would be perfect.

bryanzera
Offline
newbie
Last seen: 15 years 1 week ago
Timezone: GMT-8
Joined: 2004-10-12
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

Why won't the vertnav take effect in IE? The CSS and HTML are well formed and without error, but the vertical menu is acting like a horizontal menu in IE.

http://www.fresnobeehive.com/new.html

Also, I figured out why the root UL isn't taking a border. Because #vertnav ul means 'associate these attributes to any unordered list UNDER an object with class vertnav'. So if I add ul.vertnav{...} to the css, I get the ugly, too large border.

k-rad-bob
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2004-11-24
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

i need help with this and i started a thread with all the details here

thanks :]

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 15 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Light Weight Multi Level Drop Down Menu

blacki wrote:
Is it possible to modify this menu to get the first two levels displayed horizontally and the third one as drop down ?


>menu1 | menu2 | menu3 | menu4
sub1.1 | sub1.2 | sub 1.3 | sub 1.4
drop 1.1.1|
drop 1.1.2|
drop 1.1.3|
____________________________________
menu1 | >menu2 | menu3 | menu4
sub2.1 | sub2.2 | sub 2.3 | sub 2.4
drop 2.1.1|
drop 2.1.2|
drop 2.1.3|

I hope you know what i mean Wink

btw. sorry for my horrible English Laughing out loud

Blacki did you ever figure this out? I'm trying to do the same thing minus the third set of menus (the drop downs). I was thinking it should be as simple as adding a 'display: inline;' but I'm not sure where.

Update: Managed to find a few at Dynamic Drive, though not purely CSS/Javascript nor are they exactly what we are looking for:
http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm
http://www.dynamicdrive.com/dynamicindex1/jimmenu/example3.htm

"What I had, I gave today. What I saved, I lost forever."

kaoskid
Offline
newbie
Last seen: 14 years 46 weeks ago
Joined: 2004-12-05
Posts: 1
Points: 0

Re: overlib issues / IE flicker

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

lis[i].onmousemove=function() {

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

Dude, you just saved my life! Everything was working great until I loaded on the main page and the flickerfest began. I had to register just to thank you for the post.

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 15 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Light Weight Multi Level Drop Down Menu

I just reread through all the posts, and it looked like people came up with ways to get various width menus to work for the vertical menus.

I'm trying to implement a horizontal menu that has various widths for the submenus. But I keep running into various problems. The furthest I've gotten so far is that it'll work in IE, but it won't work in FireFox, it'll lose the drop down format of the submenu. Instead of going down, it'll go across and overlay on top of each other.

Any ideas? Please see attached image.

#holdm{
	position: absolute;
	border: none;
	margin: 0px;
	top: 150px;
	left: 10px;
	z-index: 100;
	height: 20px;
	width: 740px;
	background: url(../../images/menu/menu_background.gif) repeat-x;
}

#nav{list-style: none;}

#nav ul {
	padding: 0;
	margin:0;
	list-style: none;
	width:100px;
	z-index:99;
	position:relative;
	overflow:visible;
   }

#nav li.toplevel{margin-top:-11px; width:100px;}

 /* Win IE only \*/
* html #nav li.toplevel{margin-top:0px; width: 100px;} 
/* end holly hack */
	
#nav li {
	position: relative;
	float: right;
	width: 100px;
	background-color: #DFDFDF;
	display: block;
	height: auto;
}
 
#nav a {
	display:block;
	padding:0px;  
	margin:0px;
	width: 100px;
	background-color:#DFDFDF;
	text-decoration: none;
}

#nav a:hover{
	color: #FFFFFF;
}

#nav li ul {
	position: absolute;
	margin: 0px;
	padding: 5px;
	width: 200px;
}

#nav li li a {
	display: block;
	font-weight: normal;
	text-align: center;
	color: #333333;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	margin: 0px;
	padding: 5px;
	background-color: #DFDFDF;
	width: 200px;
}

#nav li li a:hover {
	display: block;
	background-color: #333333;
}

#nav ul{
    display:none;   
}

/*all see this */
#nav ul ul, #nav ul ul ul{
    display:none; 
    position:absolute; 
    margin-top:-36px; 
    margin-left:-100px;
}

/* 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;
}

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 15 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Light Weight Multi Level Drop Down Menu

Ugh n/m.

I added another class

#nav li li {
float: none;
}

And that solved it, though it added some spaces here and there, and I had to redo the values for my margins. Regardless... my code is getting a little sloppy. Crying

"What I had, I gave today. What I saved, I lost forever."

maz
Offline
newbie
Last seen: 14 years 44 weeks ago
Timezone: GMT-8
Joined: 2004-12-14
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

Thank you finally a menu hover that works in mac ie 5.2

Why do you say it doesn't? Is it my css is different? I don't use floats.

sw
Offline
newbie
Last seen: 14 years 44 weeks ago
Joined: 2004-12-20
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

I want to use this menu inside of a table cell and have it drop over another cell, Is it possible? If i just include it in the cell it will just make the cell larger and not go over top...for obvious reasons. I dont know how i can make it go over another cell. I tried to put it inside of a div and give it an absolute value but it doesnt appear on the same place in IE as it does in Firefox. Anyone have any ideas for me?

Thanks in advance

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi maz,
I don't have a mac to test on and initially had reports that the menu didn't work in IE% Mac. It may do now as it has evolved slightly over time, unfortunately I don't have the time or motivation to do any more with it at the moment.

Hi sw,
You would need to position the menu absolutely then it will sit above and ignore the table.

Hi dcdomain,
Keep up the good work. Cool

trakinas
Offline
newbie
Juiz de Fora, Brazil
Last seen: 14 years 33 weeks ago
Juiz de Fora, Brazil
Timezone: GMT-3
Joined: 2005-03-02
Posts: 10
Points: 0

Adding clear: both

Hello,

I don´t know if someone else has commented about it before, but I had to add a new line at the end of the menu.css (the vertical one).

Quote:

/* Win IE only \*/
* html #nav li {
float: left;
clear: both;
}

/* end holly hack */

Without this line, explorer was aligning all the menu itens at left, listing them. With "clear:both;" it listed the menu correctly.

: )

If it´s necessary, I can post a screenshot.

cheers!

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Horizontal Menu in IE6

I seem to have a problem implementing the Horizontal Menu (http://www.csscreator.com/menu/multimenu.php) in IE6.
In the 4 catagories shown on my page only the last one to the right (menu4)works in IE6. They all work in Opera, Netscape, Firefox and Konqueror.
The source: [/url]http://dszady.com/windex.html
The jscript: [/url]http://dszady.com/menu.js
The container etc: [/url]http://dszady.com/index.css
The menu CSS: [/url]http://dszady.com/menu.css

I changed the width on this line to accomadate Opera 80% to 100%
#holdm{position:absolute; top:105px; left:-40px; z-index:100; width:100%;}

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Light Weight Multi Level Menu

Clearing up my previous post: I have 4 catagories on the horizontal menu on this page below and menu4 to the extreme right is the only one that works in IE6 XP sp2:

The XHTML and CSS validates
http://dszady.com/windex.html

and this is my jscript file:
http://dszady.com/menu.js

Sorry if things weren't a little clearer before.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Light Weight Multi Level Drop Down Menu

Daszady, What you have seems pretty close to the sucker fish example

I took your ul#nav content and dropped it into the ul#nav on my copy of the suckerfish page. I increased the width on a couple of elements and the whole menu works fine in IE - see here. It may be easiest for you to do something similar and then restyle the rest of your page as you like.

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Light Weight Multi Level Drop Down Menu

Chris..S wrote:
Daszady, What you have seems pretty close to the sucker fish example

I took your ul#nav content and dropped it into the ul#nav on my copy of the suckerfish page. I increased the width on a couple of elements and the whole menu works fine in IE - see here. It may be easiest for you to do something similar and then restyle the rest of your page as you like.


Aw! Thank you! Something I can work with. I hate holding up a whole site over something that is important, not entirely necessary, but a person want's very much.
Thank you again,
Daryl A. Szady

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi daszady,
In your JavaScript file you seem to have to window.onload calls.

Quote:
window.onload= function(){
/* pass the function the id of the top level UL */
/* remove one, when only using one menu */
activateMenu('nav');

}
window.onload= function(){
activateMenu('nav'); //you only need one of these for each menu
}

Remove one of them so you only have one call to activateMenu
window.onload= function(){ 
    activateMenu('nav'); //you only need one of these for each menu 
}

Hope that helps

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Light Weight Multi Level Drop Down Menu

Still doing it. Menu #4 only. The only time it really works is having one column. Smile

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Light Weight Multi Level Drop Down Menu

Well. After driving myself crazy Tony. The problem is IE 6.0.2900.2180.xpsp...
Update version: SP2.
It won't even open the examples on the horizontal or vertical menus on the prototype page. I can't believe that no one else has had this problem (yet).
The examples work on firefox1.0, Opera 7.54 and Netscape 7.2(Linux)
The Suckerfish pages work. There has to be a jscript workaround for this IE demon.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi daszady,
I have fixed the problem locally, it was to do with having too many window.onload scripts and the order of the files.
The example probably stopped working when I added the User Preference Script to the site not so long ago.
Unfortunately I am working on a style generator for the menu that is about 80% done so I will upload the fix once that is completed.
Should be in the next couple of days if all goes well.
Until then IE users will not see the example menu working Sad

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Light Weight Multi Level Drop Down Menu

kenrbnsn wrote:
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. Sad

Is there a solution to this problem?
I was able to use this line in Oprah.
#holdm{position:absolute; top:115px; left:-40px;z-index:100; width:105%;}
Notice the width. I haven't any idea what would happen if you use 100% of screen space.

daszady
Offline
newbie
Last seen: 11 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-01-28
Posts: 9
Points: 0

Light Weight Multi Level Drop Down Menu

I have 5 dropdowns on the horizontal menu that work just fine in every browser I have except won't drop down from the 1st from the left in..... IE6 XP SP2. So I'm using the one to the far left for the Home page, par convention. I just find it annoying. IE that is. I'll figure it out.
IE7.... <sigh>
Appreciate your work and efforts Tony. This is the most informative and comprehesive site I use.

bpat1434
bpat1434's picture
Offline
Enthusiast
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

Light Weight Multi Level Drop Down Menu

Hey guys. I'm having a problem with the horizontal nav-menu. I have the vertical version working perfectly. I'm glad I found the tut. But when I try and implement the horizontal part, it doesn't work. Some help is needed.

Here's the basics of it. The full code can be seen in action here:
Winfield V.F.D. Website
Looking at my code, you can see that I want a sub-menu under "Main --> Carnival". But it doesn't show up in IE or Firefox.

JavaScript Source
CSS Code
HTML Navigation Code

Any help would be appreciated.

~Brett

~Brett

jez300
Offline
newbie
Last seen: 14 years 28 weeks ago
Joined: 2005-04-10
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

Firefox with horizontal menus.

All works fine except text is truncated instead of wrapping.

Any fix for this?

yunny0426
Offline
newbie
Last seen: 14 years 27 weeks ago
Joined: 2005-04-12
Posts: 3
Points: 0

Padding:0; in IE

Hi,

I had the same problem with wagnerthomas1 and yes, 'padding:0;' fixed the problem promptly however it didn't fix the padding in IE.

Do you have any ideas how to fix this?

Thanks so much and the menu is just awesome.
yun.

Tony wrote:
Hi wagnerthomas1,
Try #nav{padding:0;}

Something else I noticed was that you have are trying to activate two menus, you should remove
Quote:
activateMenu('vertnav');


Hope that helps

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Light Weight Multi Level Drop Down Menu

Hi bpat1434,
The next level of menu is getting hidden under the rest of the previous level.
Try removing the li's after the Carnival section to see what I mean.

Hope that helps