Sat, 2005-05-07 20:39
#151
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... 
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";
}
}
}
}
}
Sun, 2005-05-08 12:46
#152
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.
Wed, 2005-05-18 19:05
#153
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?
Mon, 2005-06-13 15:00
#154
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?
Tue, 2005-06-14 02:27
#155
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
Tue, 2005-06-14 15:18
#156
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.
Fri, 2005-07-01 20:50
#157
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 Type<font face="Wingdings 3" size="1"> 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 2</a>
</td></tr>
<tr>
<!-- SUB SUBMENU START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Subitem 3<font face="Wingdings 3" size="1"> 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUB SUBMENU END -->
</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 1 END -->
</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 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"> 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Subitem 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 1</a>
</td></tr>
<tr>
<!-- SUBMENU 3 START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Select Type<font face="Wingdings 3" size="1"> 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 3</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 3 END -->
</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 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 Valves</a>
</td></tr>
<tr>
<!-- SUBMENU 4 START -->
<td class="menuNormal" height="25" width="155" onmouseover="expand(this);"
onmouseout="collapse(this);">Select Type<font face="Wingdings 3" size="1"> 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type 2</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type 3</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type 4</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type 5</a>
</td></tr>
</table>
</div>
</td>
<!-- SUBMENU 4 END -->
</tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type A</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Type 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 Office</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">1 Contact</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">2 Contact</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">3 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 1</a>
</td></tr>
<tr><td class="menuNormal" height="25">
<a href="page.asp" class="menuitem">Item 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;}
Thu, 2005-07-07 13:23
#158
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.
Fri, 2005-07-08 16:23
#159
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
Fri, 2005-08-12 19:26
#160
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
Sun, 2005-08-14 22:01
#161
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
Sat, 2005-10-01 02:45
#162
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
Sat, 2005-10-01 07:37
#163
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
Sat, 2005-10-01 09:31
#164
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.
Sun, 2005-10-02 01:24
#165
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;
}
}
Sun, 2005-10-02 10:19
#166
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.
Mon, 2005-10-03 00:51
#167
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
Sat, 2005-10-08 00:57
#168
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
Sun, 2005-10-09 20:16
#169
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).
Thu, 2005-10-13 13:42
#170
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.
Thu, 2005-10-13 20:46
#171
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.
Thu, 2005-10-13 21:37
#172
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;
}
Thu, 2005-10-27 12:16
#173
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...
Thu, 2005-10-27 12:21
#174
Light Weight Multi Level Drop Down Menu
Forgot to mention that the "shifting to right" problem happens only in IE. Thanx!
Thu, 2006-03-02 00:37
#175
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.
Tue, 2006-03-14 17:31
#176
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.
Tue, 2006-03-14 18:42
#177
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?
Tue, 2006-03-14 19:02
#178
Here's a Screen Shot Comparison of IE7 and Firefox
This is the firefox screenshot. Next is the IE7
Tue, 2006-03-14 19:04
#179
IE7 screenshot.
Here is the IE7. You can see what the drop menu does and how it drops behind the div below.
Tue, 2006-03-14 19:05
#180
sorry, it didn't post
Second try on the screenshot.
Wed, 2006-03-15 10:43
#181
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.
Wed, 2006-03-15 21:03
#182
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:
Sun, 2006-04-30 08:09
#183
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
Tue, 2006-05-09 19:13
#184
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!
Sun, 2006-05-14 05:10
#185
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 
Thu, 2006-05-18 18:03
#186
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:
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
Fri, 2006-05-19 07:39
#187
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.
Thu, 2006-06-22 19:26
#188
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?
Thu, 2007-11-29 13:58
#190
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.
- « first
- ‹ previous
- 1
- 2
- 3
- 4