190 replies [Last post]
paks
paks's picture
Offline
newbie
Sweden
Last seen: 14 years 24 weeks ago
Sweden
Joined: 2005-05-07
Posts: 1
Points: 0

Problem with IE and a 3rd submenu (possibly the 2nd as well)

Hello,
I've got a bit of a problem with my horizontal menu-coding and IE...
I'm trying to add a 3rd submenu to one of the menu-options but even the 2nd one gets placed wrong.
All the other menu-options are working so I'm guessing it got something to do with the javascript.
Probably that you should add another check-up for a 3rd submenu... but I don't know how... Shock

Under the menu-option "FACTS" the submenu's are position correctly, but under "SERIES"; the 1st submenu padding is off, the 2nd (& possibly 3rd) submenu's position is off and their also positioned under the main menu.
The 3rd submenu is under:
SERIES - SERIES I-L - Inuyasha

I would be eternally grateful for some help, my web design project is due in 3 days...

Tested on these browser: IE6, Mozilla1.3?,Netscape7 and it's in IE the problem occurs.

//paks

the javascript is currently like this:

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";
				}
			}
		}
	}
}

Damean
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2005-05-08
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

Hi I was wondering if its possible to have the font color change as well as the backgroundcolor, for the previously selected menu?

I have been struggeling with this for some time and cant seem to archeive this effect.

b00k
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2005-05-18
Posts: 4
Points: 0

Vertical menu

Hi,
Im having problems with my vertical menu in IE, everything is fine in Mozilla, but theres no menu poping out with IE.
Do you have any suggestions?

Thanx

edit: Here's the URL: http://server.by012.net/~planide/menu4.php

2nd edit:
Okay, i've got it working allready, but now i've got another problem. In IE, there seems to be 1px space between the different submenu's. In Mozilla, there is no space. How can I remove it?

jonnyd226
Offline
newbie
Boston
Last seen: 14 years 19 weeks ago
Boston
Joined: 2005-06-13
Posts: 8
Points: 0

Light Weight Multi Level Drop Down Menu

Hi,

I was editing some of the css file to match my site colors, and in playing around with it, I was able to get the levels to stay colored when the mouse is over the next level. I took the

#vertnav a:hover, #vertnav li:hover {
#vertnav ul li a:hover, #vertnav ul li:hover {

and split them up so that in Firefox it will display the top level in grey highlight and the item that is hovered over on the next menu in green.

however, when I try to create the same effect in IE, it doesn't work.

anyone know of anyway to do this?

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

Light Weight Multi Level Drop Down Menu

Hi jonnyd226,
IE doesn't support hover on li or any elements apart from links.
So anything with li:hover infront of it will be ignored by IE.

Damean,
That may answer part of your question about color changing on hover.

You may have to look at changing className.

Hope that helps

jonnyd226
Offline
newbie
Boston
Last seen: 14 years 19 weeks ago
Boston
Joined: 2005-06-13
Posts: 8
Points: 0

Light Weight Multi Level Drop Down Menu

Yes, I was aware of that in IE. I actually googled it and found a way around it. Here is the link to the site

He talks about HTCs, and I implemented it with my menu in my IE specific style sheet and now the hovers work.

The guy who wrote the script is a life saver. Hope this helps others.

kfiorentino01
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2005-07-01
Posts: 2
Points: 0

Menus work in IE and in FF they are messy at best!

When menu is displayed in FF, unless user does mouseover mouseoff in 'perfect sequence' the menus don't always disappear. Works GREAT in IE.....any ideas.

Here's html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http//www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>index sample</title>
<link rel="stylesheet" href="menu.css">
<script language="javascript" src="menu.js"></script>
</head>
<body>
<p>
<div align="left">
<table width="600" class="navbar" align="center">
<tr>
<td class="IMGmenuNormal" height="40" width="115" onmouseover="expand(this);" onmouseout="collapse(this);">
<p>
<a href="page1.htm">
<img border="0" src="images/nav1.gif" width="77" height="32" alt="NAV 1"></a></p>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr>

<!-- SUBMENU 1 START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Select&nbsp;Type<font face="Wingdings 3" size="1">&nbsp;u</font>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;2</a>
</td></tr>
<tr>

<!-- SUB SUBMENU START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Subitem&nbsp;3<font face="Wingdings 3" size="1">&nbsp;u</font>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUB SUBMENU END -->

</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 1 END -->

</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;3</a>
</td></tr>
<tr>

<!-- SUBMENU 2 START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Item 4<font face="Wingdings 3" size="1">&nbsp;u</font> <div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem&nbsp;5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 2 END -->

</tr>
</table>
</div>
</td>
<!-- MENU 1 END -->

<!-- MENU 2 START -->
<td class="IMGmenuNormal" height="40" width="115" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p><a href="page2.htm"><img border="0" src="images/nav2.gif" width="77" height="32"></a></p>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;1</a>
</td></tr>
<tr>

<!-- SUBMENU 3 START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Select&nbsp;Type<font face="Wingdings 3" size="1">&nbsp;u</font>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;3</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 3 END -->

</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;4</a>
</td></tr>
</table>
</div>
</td>
<!-- MENU 2 END -->

<!-- MENU 3 START -->
<td class="IMGmenuNormal" height="40" width="115" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p><a href="page3.htm"><img border="0" src="images/nav3.gif" width="77" height="32"></a></p>
<div class="menuNormal" width="155">
<table width="155" class="menu">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;4</a>
</td></tr>
</table>
</div>
</td>
<!-- MENU 3 END -->

<!-- MENU 4 START -->
<td class="IMGmenuNormal" height="40" width="115" onmouseover="expand(this);"
onmouseout="collapse(this);">

<p><img border="0" src="images/nav4.gif" width="77" height="32"></p>
<div class="menuNormal" width="155">
<table width="155" class="menu">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Check&nbsp;Valves</a>
</td></tr>
<tr>

<!-- SUBMENU 4 START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Select&nbsp;Type<font face="Wingdings 3" size="1">&nbsp;u</font>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 4 END -->

</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;A</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type&nbsp;B</a>
</td></tr>
</table>
</div>
</td>
<!-- MENU 4 END -->

<!-- MENU 5 START -->
<td class="IMGmenuNormal" height="40" width="115" onmouseover="expand(this);"
onmouseout="collapse(this);"><p>
<img border="0" src="images/nav5.gif" width="77" height="32"></p>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Contact&nbsp;Office</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">1&nbsp;Contact</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">2&nbsp;Contact</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">3&nbsp;Contact</a>
</td></tr>
</table>
</div>
</td>
<!-- MENU 5 END -->

<!-- MENU 6 START -->
<td class="IMGmenuNormal" height="40" width="115" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p><a href="page6.htm"><img border="0" src="images/nav6.gif" width="77" height="32"></a></p>
<div class="menuNormal" width="155">
<table width="155" class="menu">
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item&nbsp;2</a>
</td></tr>
</table>
</div>
</td>
<!-- MENU 6 END -->

<!-- MENU 7 START -->
<td class="IMGmenuNormal" height="40" width="90">
<p><a href="index.htm"><img border="0" src="images/nav7.gif" width="77" height="32"></a></p>
</td>
<!--MENU 7 END-->

</tr>
</table>
</div>
<!-- MAIN MENU END --->

<div align="center">
<p></p>
</div>

</body>
</html>

++++++++++++++++++++++++++++++
Here's css

BODY
{font-family verdana, tahoma, arial, sans-serif;
font-size 10pt;
margin 0px;
margin-left 3px;
margin-right 3px;
padding 0px;}

P
{padding-top 10px;
margin 0px;}

H1
{font-size 12pt;
font-weight bold;
padding-top 15px;
margin 0;}

table.navbar
{font-size 8pt;
margin 0px;
padding 0px;
border 0px;
font-weight bold;}

table.menu
{font-size 8pt;
margin 0px;
padding 0px;
font-weight bold;
background-color rgb(132,0,0);}

td.IMGmenuNormal
{padding 0px;
font-weight bold;
color white;
vertical-align top;
align left;
background-color transparent;}

td.menuNormal
{padding 0px;
font-weight bold;
color white;
vertical-align top;
align left;
background-color transparent;}

td.menuHover
{padding 0px;
color rgb(0,0,0);
vertical-align top;
font-weight bold;
align left;
background-color white;}

div.menuNormal
{display none;
position static;}

div.menuHover
{border 2px solid rgb(0,0,0);
background-color transparent;
display inline;
position absolute;}

a.menuitemlink
{text-decoration none;
color rgb(255,255,255);
/*font-weight bold;*/
background-color transparent;
display block;}

a.menuitemvisited
{text-decoration none;
color pink;
font-weight bold;
background-color transparent;
display block;}

a.menuitemhover
{text-decoration none;
color rgb(0,0,0);
font-weight bold;
background-color white;
display block;}

a.menuitemactive
{text-decoration none;
color blue;
font-weight bold;
background-color white;
display block;}

AdinE
Offline
newbie
Welland, Ontario, Cananda
Last seen: 14 years 15 weeks ago
Welland, Ontario, Cananda
Joined: 2005-07-07
Posts: 1
Points: 0

Menu Moves Objects Bellow

I like your menu, but when I tried to use it on one of my pages, it shifts everything bellow it down when the submenus are shown.

Please let me know.

Thanks.

kfiorentino01
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2005-07-01
Posts: 2
Points: 0

AdinE

Try putting a <div align="center"> after the end of the menu HTML. I also have all my pages within tables for easier formatting and there is no movement when dropdown is displayed in IE nor FF.

Hope this helps
kf

TiNiB
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-01-17
Posts: 23
Points: 0

Light Weight Multi Level Drop Down Menu

Hi, great menu.

One thing is that it works well in FF and Opera but in IE the drop downs push all the content below it downwards. Any ideas?

Heres the page:

http://www.binitbharadia.co.uk/bk/
http://www.binitbharadia.co.uk/bk/index_files/styles.css

Many Thanks

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

Light Weight Multi Level Drop Down Menu

To stop the menu pushing other content around, you need to position it or it's container absolutely.

Hope that helps

Eightone
Eightone's picture
Offline
newbie
Last seen: 12 years 33 weeks ago
Joined: 2005-10-01
Posts: 4
Points: 0

Light Weight Multi Level Drop Down Menu

hey this really rocks

I only have one problem, in that some of my menu options are too long for the width of the menu option, and instead of making the particular box taller, it cuts the text. Is there a way I can set it to make just the ones that are too long high enough to fit two lines but to leave the others at the same height - unfortunately I can't just cut the text as it will be needed.

* I just realised it works in IE but Firefox and Mozilla both cut the text back to one line.

2 other small questions, is it possible to make the text vertically middle aligned within the box?

And is it at all possible to use an image for the top tier of the menu

Thanks very much
Let me know if you need me to post an example

Eightone
Eightone's picture
Offline
newbie
Last seen: 12 years 33 weeks ago
Joined: 2005-10-01
Posts: 4
Points: 0

Light Weight Multi Level Drop Down Menu

Damean wrote:
Hi I was wondering if its possible to have the font color change as well as the backgroundcolor, for the previously selected menu?

I have been struggeling with this for some time and cant seem to archeive this effect.

you just need to put an extra line in
#nav a

color: rgb(255,255,255)

you can use the rgb value, hex value or colour name
hope that helps, the example I have shown is for white

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Light Weight Multi Level Drop Down Menu

Eightone are you using fixed height on the box ? how is overflow set up to be handled ? if using fixed height try removing it.

Question 2:
text should centre itself in it's line box distributing the extra space evenly above and bellow, try adjusting your line-height property to match the box and you should be able to centre it.

Question 3:
It should be possible to use an image.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Eightone
Eightone's picture
Offline
newbie
Last seen: 12 years 33 weeks ago
Joined: 2005-10-01
Posts: 4
Points: 0

Light Weight Multi Level Drop Down Menu

Hi
Ok I'm not 100% sure - from what I can tell it should be automatic height and not fixed. I am a bit of a beginner with CSS I am ok with the basics but this is more complicated than anything I have done before so please bear with me :oops: hehe

here is my code for #nav, I havn't really changed much from the css creator apart from the text colour

#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;
width: 12em;
background-color:rgb(12,71,147);
border:solid 1px rgb(23,82,164);
display:block;
height:auto;
}

#nav ul li{ border-width:1px 1px 0 0;}

#nav ul ul li{ border-width:1px 1px 0 1px;}

#nav ul ul li:last-child{border-bottom:1px solid rgb(23,82,164);}

#nav a
{
text-decoration:none;
display:block;
padding: 0.1em;
margin:0.2em 0 0.2em 0.1em;
width:11.5em;
height:1em;
color: white;
}

#nav a:hover, #nav li:hover
{
background-color:rgb(12,82,195);
}

#nav ul li:hover, #nav ul li a:hover
{
background-color:rgb(12,82,195);
}

#nav ul
{
display:none;
}

/*all see this */
#nav ul ul
{
display:none;
position:absolute;
margin-top:-1.8em;
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, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul
{
display:none;
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul
{
display:block;
}

li>ul
{
top: auto;
left: auto;
}
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Light Weight Multi Level Drop Down Menu

Try changing the following rules:

#nav a {
     text-decoration:none;
     display:block;
     padding: 0.1em;
     margin:0.2em 0 0.2em 0.1em;
     width:11.5em;
     height:auto; <<<<<<<<
}

and 

/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
     margin-top:-1.7em;
}

That should let extended text wrap.
Be careful though and check things cross browser.
I would work on a copy and have a good play with the rules to get an understanding of how it works it is a quite tricky bit of CSS initially.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Eightone
Eightone's picture
Offline
newbie
Last seen: 12 years 33 weeks ago
Joined: 2005-10-01
Posts: 4
Points: 0

Light Weight Multi Level Drop Down Menu

Great, cheers mate that worked out ok and it looks much better.

Thanks a lot for your help

jj_magenta
Offline
newbie
Brisbane, Australia
Last seen: 12 years 37 weeks ago
Brisbane, Australia
Joined: 2004-10-20
Posts: 10
Points: 0

Last-child Problem in IE

Tony, this is a great menu! Thank you very much for providing the code.

Just one thing: when I look at the vertical menu in your multimenu page in IE, it seems to have the same problem as I have got in my copy of the menu - the last-child border-bottom of the list items is not showing. Works fine in Firefox.

I have searched the list, but can't see this having been noted before, but wondered if it is a problem in anyone else's browser, and is there a fix, apart from putting a bottom-border on all the list items

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 9 years 51 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

Light Weight Multi Level Drop Down Menu

I haven't read all 12 pages of this, but the Multi level Nav maker DOES work in Safari 2x (it says it doesn't work in Safari 1x).

born in the 20th century

SuprSpy79
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-12-15
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

How can I get red if the hover on the top level and keep it on the submenus? Also I need to butt the submenus up against the graphics.

http://www.andrewscottraia.com/test/vonage.php
http://www.andrewscottraia.com/test/vonage.css
http://www.andrewscottraia.com/test/menu.js

Thanks in advance.

EDIT: I moved the menus over and removed the links from the top level, but that trick only worked in IE, im still getting the hover in FF.

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

Light Weight Multi Level Drop Down Menu

Hi jj_magenta,
Unfortunately the pseudo class, last-child is not supported by IE6, hopefully IE7 will have better support.
Do you want to replace the top image with a red background image and have the whole of the sub menu show a red background?

Hi jimhere,
Thanks for letting us know about Safari.

SuprSpy79
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-12-15
Posts: 3
Points: 0

Light Weight Multi Level Drop Down Menu

Fixed it

changed

Quote:

#vertnav li:hover,#vertnav a:hover{
background-color: #FFCC66;

}

to

Quote:

#vertnav li ul li a:hover{
background-color: #FFCC66;


}

aRabbit
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2005-10-27
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

It's really helpful to read the topic.

Here is my problem: I used the help from suckerfish for my menu. It works fine individually in all browsers well at least in IE, Opera and Firefox. But after I put the menu into a page with graphsics, text, tables, cells, the sub menu and sub-sub menu all shift to right very much,3rd level is not even connected to the 2rd level.

Is it because the menu is placed within a fixed cell? I didn't use CSS for the page layout. I use traditional table...

aRabbit
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2005-10-27
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

Forgot to mention that the "shifting to right" problem happens only in IE. Thanx!

Designed For Access
Offline
newbie
Mackay, Queensland, Australia
Last seen: 13 years 33 weeks ago
Mackay, Queensland, Australia
Timezone: GMT+10
Joined: 2006-03-02
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

Tony wrote:
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


But for those people who are vision impaired or have some other disability, JavaScript is useless, especially as this code only uses onmouseover and not onfocus, this means anyone who can't use a mouse cannot access the dropdown items.

The best solution in this case is to make sure that the page that you are taken to from the top menu level has link information to the other pages that are in the second level of the menu. This way everyone can access each of your pages.

Just my 2 cents worth, but it should be reasonable to allow access to everyone, regardless of how they choose to/need to use the Internet.

udfd71
Offline
newbie
Texas
Last seen: 13 years 31 weeks ago
Texas
Joined: 2006-03-14
Posts: 5
Points: 0

Testing in IE7 Beta 2

Hi, I am doing some testing of the menu in IE7 beta 2 and the menu is pushed to the top of the wrapping div and the drop menus display behind other divs even with a high z-index.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Light Weight Multi Level Drop Down Menu

Excellent stuff, it's good to have this tested in IE7.

Any chance of a screenshot, for those who don't have the beta installed?

Verschwindende wrote:
  • CSS doesn't make pies

udfd71
Offline
newbie
Texas
Last seen: 13 years 31 weeks ago
Texas
Joined: 2006-03-14
Posts: 5
Points: 0

Here's a Screen Shot Comparison of IE7 and Firefox

This is the firefox screenshot. Next is the IE7

udfd71
Offline
newbie
Texas
Last seen: 13 years 31 weeks ago
Texas
Joined: 2006-03-14
Posts: 5
Points: 0

IE7 screenshot.

Here is the IE7. You can see what the drop menu does and how it drops behind the div below.

udfd71
Offline
newbie
Texas
Last seen: 13 years 31 weeks ago
Texas
Joined: 2006-03-14
Posts: 5
Points: 0

sorry, it didn't post

Second try on the screenshot.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Light Weight Multi Level Drop Down Menu

It looks like a z-index issue, although I can't be sure as I don't know what IE7 breaks. Try playing round with Z-index on the submenus, see if it works.

Verschwindende wrote:
  • CSS doesn't make pies

udfd71
Offline
newbie
Texas
Last seen: 13 years 31 weeks ago
Texas
Joined: 2006-03-14
Posts: 5
Points: 0

not working in IE6

Ok I am testing in IE6 and I can't get the menus to show. Anyone have a solution?

check it here:

http://www.udfddesign.com/rc/guests/index.html

Es
Offline
newbie
Last seen: 13 years 25 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

Re: not working in IE6

udfd71 wrote:
Ok I am testing in IE6 and I can't get the menus to show. Anyone have a solution?

I have the same problem. The submenus show but they remain empty. no text is showing.
http://www.esthermols.net/clients/clearwood/index.html

Anyone?

Edit: Post being dealt/ has beendealt with on another thread; Hugo

statichiss
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+5
Joined: 2006-04-26
Posts: 1
Points: 0

LWML Menu -- Javascript Question

I have implemented the Light Weight Multi Level Menu (vertical style) on an intranet project I am working on. I added a couple of lines to the javascript so that it makes each of the subfolders a specific CSS class (class=folder in my example). I then assign a background image to that class in my CSS. I am doing this so that each of the LIs that contain a submenu will have a different background than the regular menu items. (In my case, each of the menu items that has a submenu has a little arrow image to indicate there is more stuff under it.)

Here is my commented JavaScript. . . . . .

<script language="javascript">

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 A CLASS TO GIVE IT A FOLDER ICON */
lis[i].className="folder";

/* assign the function to the LI */
lis[i].onmousemove=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('vertnav');
}

</script>

. . . . .and here is the line of CSS that inserts the arrow image. . . .

.folder {
background="#f0f0f0 url('../../images/sub.gif') right no-repeat"
}

The problem is that this only works in IE. I tried changing the initial IF check against currentStyle, which the code comments seem to indicates restricts the script to IE, but no luck.

Is there any way to make what I am doing work in Firefox as well as IE?

Thanks much!

deliwasista
Offline
newbie
Last seen: 13 years 32 weeks ago
Joined: 2006-03-13
Posts: 4
Points: 0

arrrrgh. Want this menu! cant get it working..

Hi there, ok im a newbie but im a keen newbie. I want upgrade to this lovely menu but am having trouble getting it to work. Im using IE7 and when I add more than one item in level one (eg four items) it starts to stack them next to each other in sets of two even tho its using vertnav css ...

like this

level one item | level one item
level one item | level one item

the navigation is sitting in a div
<div style="width:300px; float:left ">

any ideas??
really want to use this!!
thanks in advance Smile

narva99
Offline
Regular
Last seen: 12 years 4 weeks ago
Timezone: GMT-7
Joined: 2006-05-02
Posts: 21
Points: 0

Light Weight Multi Level Drop Down Menu

I see that this thread hasn't been visited for some time, but I hope this can get resolved . . . anyway, I have adapted the horizontal menu created by the generator in the following page:

www.mdot5.com/shearer

I do have one menu item that wraps over one line (under the Portfolio heading). In IE 7/PC it's fine, but in FF 1.0.7/PC the two menus that come down will push the other content down and away from the menu.

I saw the 'Update' at the bottom of that page regarding the possibility of problems when menu items wrap, which also said the following code was included in the CSS file generated:
#holdm{position:absolute; top:150px; left:20px; z-index:100; width:80%;}

However, I didn't see this in the code created when I clicked on 'Generate Styles'. I've tried on my own to experiment with z-index settings, but I haven't been successful.

Any comments out there on:
(a) why this line of code didn't appear in the CSS; and/or
(b) what I might be missing in my code?

Thanks in advance,

Michael in Calgary

narva99
Offline
Regular
Last seen: 12 years 4 weeks ago
Timezone: GMT-7
Joined: 2006-05-02
Posts: 21
Points: 0

Got it going - but how about on Mac?

Regarding my previous post, I've spent a lot of time going through the first 6-7 pages of this thread, played around with absolute positioning, and now my pages renders just fine in IE 6 and 7 and FF 1.0.7 (all on PC).

If, however, anyone has some comments of Mac appearance, please reply.

Thanks to Tony and the other Gurus for this menu and your support.

littleginsu
Offline
newbie
Last seen: 13 years 17 weeks ago
Joined: 2006-06-22
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

It is possible to have a horizontal CSS menu that when you click on one of the links on the parent menu, another horizontal menu appears under it and then the links on this menu have drop-down menus?

sandra nair
Offline
newbie
India
Last seen: 11 years 52 weeks ago
India
Joined: 2007-09-22
Posts: 10
Points: 0

Flickeing

This comment has been moved here.

geWatkins
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-11-15
Posts: 1
Points: 0

z-index not working in ie6 or ie7

i had trouble making pop-out menu overlay existing photo - it worked fine in firefox -- but in ie would go under photo. i played around with assigning different z-index to photo and menu -- the only option that ie would recognize was z-index of -1 for photo, and z-index of 9 for menu. (i used csshover.htc for ie) but in firefox, photo was invisible. so added the following hack in the style


body{behavior: url(csshover.htc) }
#photo-3 { z-index:-1; }

:
:

/* position of the pop-out sub-menu */
li {
position:relative;
padding:6px;
padding-left:4px; /* moves maim menu words only to the left */
z-index:9;
}
:
don't ask me how it works, it just does. i tried to put the 'style type'
line outside thei [IF IE] but that did not work.
to check this out go to http://poeticphotodesign.com/gallery.html
hope this helps someon.

geWebWoman.