Hey guys...this should be an easy fix but I haven't found a way to do it.

If you go to http://pearl.supplychain.com in Internet Explorer 6 you will notice none of the menus drop down or "expand"..

Here is the JS file I'm using:

http://www.chazcast.com/nice_menus.js

Also, if you run the site under IE6 you will notice in the bottom left hand corner you get a syntax error on line 6.

Any help is appreciated.

Thanks

Comments

hello12345’s picture

Wow this is weird....

If I don't even use a JS file, the menu still comes up. So obviously the probably lies somewhere else. Does anyone have a hunch about this?

dwees’s picture

Hey there,

I tried going to your server page, but it didn't load in time for IE to recognize it for me. Is it possible to put a static version of that page up somewhere else for us to peek at?

Dave

hello12345’s picture

Sure no problem Dave..

http://www.chazcast.com/error.jpg

After I doube click the little error sign in the bottom left of IE6 that error message is shown.

As far as the menu's..

When you hover over them (the parents) none of them drop down.

Everything however works on IE7 and FF

Thanks

hello12345’s picture

sorry about the double post

dwees’s picture

Hi there,

I found at least 1 issue.

What you have included is a patch file instead of the actual JS. Since I don't see jQuery.js being used by your site, I would take all of the lines that start with a - ( a minus sign ) and copy them into a new file, save it as nice_menus.js and rename the original file to nice_menus.js.patch.

Remove all of the - from the beginning of the lines of the new file, resave it, and upload it to your web server to the modules/nice_menus/ directory.

Also, because of an issue with IE7 and these menus, you want to include an additional bit in your theme template file. Copy the following to the HEAD (right after your current style tags but before the </head> tag).

<![endif]-->
<!--[if IE]>
<style type="text/css">
	#nice-menu-1 li:hover{
    position: static;
	}
</style>
<![endif]-->

Dave

hello12345’s picture

Thanks Dave for the info.

I updated the nice_menus.js file and still no expansion of the drop down menu in IE6. I actually renamed nice_menus.js to something else disabling it and the menu still looked the same. I'm thinking the problem lies within CSS?

I added the extra code you posted in the template, and it gave no change to IE6 however in IE7, all of the menu items now expand under the first menu item.

Are there any files or code you guys would like to see from my site to assist you further?

Thanks

hello12345’s picture

Here are some files you may find helpful:

Nice Menu CSS
http://www.chazcast.com/nice_menus.css

Nice Menu Module
http://www.chazcast.com/nice_menus.module

Thanks

dwees’s picture

IE 6 is terrible at CSS. As a matter of fact, the normal CSS to make these menus work just doesn't in IE 6 or lower. The JS is there FOR IE 6 or less. The CSS works for IE7 (with the extra edition I pointed out).

If the JS isn't working, then we need to figure out why, because it is necessary to make these menus work.

Dave

hello12345’s picture

Hey Dave,

Where would I look first to see why the JS isn't working?

Mike

dwees’s picture

Just re-add the JS to your page and I will see if I can work out why its not working.

Also, instead of the nice-menus.js, try this js instead.

	<!--[if lte IE 7]>
	<script type="text/javascript">
	sfHover = function() {
		var sfEls = document.getElementById("nav").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp("sfhover"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
	</script>
	<![endif]-->

but try changing the document.getElementById("nav") to document.getElementById("nice-menu-1"). Also, can you post the CSS you are using for these menus?

hello12345’s picture

I have changed nice_menus.js to what you and posted and I readded the JS to the website.

Here are the files:

Website: http://pearl.supplychain.com

My Nice Menus CSS: http://www.chazcast.com/nice_menus.css

My Nice Menus JS: http://www.chazcast.com/nice_menus.js

Hope that helps.

Thanks

dwees’s picture

What I'll do when I get home is dig out all of the code that worked for my site, and see if I can give it to you in one batch, along with some instructions for implementing it.

Dave

hello12345’s picture

That would be great.

Thanks

dwees’s picture

Okay here's what we did, we are not using the nice_menus.module at all.

In our style.css page we included the following:

/**
 * CSS dropdown menu inspired by Son of Suckerfish...
 * http://www.htmldog.com/articles/suckerfish/dropdowns/
 * http://www.alistapart.com/articles/horizdropdowns
 */
#nav ul.menu { /* top level ul */
  padding: 0px 0px 0px 0px;
  margin: 0;
  margin-top: 0px;
  list-style: none;
  height: 1.8em;
  background-color: #DF790B;
  display: block;
  float: right;
  z-index: 100;
} 

#nav a {
  padding: 0 8px;
  margin: 0;
  line-height: 1.8em;
  color: white;
  background-color: #DF790B;
  text-decoration: none;
  display: block;
  border-left: 1px solid #EBB042;
  border-right: 1px solid #EBB042;
  border-bottom: 1px solid #EBB042;
}

#nav a:hover {
  color: white;
  background-color: #EBB042;
  text-decoration: underline;
}

#nav a.active {
  text-decoration: none;
  background-color: #00069C;
}

#nav li {
  display: inline;
  float: left;
  margin: 0;
  padding: 0;
  /*width: 10em;/* fixed width works better, but looks ugly */
}

/* second-level lists */

#nav ul.menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#nav li ul {
  position: absolute;
  width: 13.8em; 
  left: -999em; /* to hide menu because display: none isn't read by screen readers */
}

#nav li li {
  float: left;
  width: 13.8em;
}

#nav li ul a {
  padding: 0em 8px 0em 1em;
  width: 13em;
  line-height: 1.8em;
  color: white;
  background-color: #DF790B;
  border-bottom: 1px solid #EBB042;
}

#nav li ul a:hover {
  color: white;
  background-color: #EBB042;
}

#nav li ul ul {
  margin: -1.3em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
}

/* end of the menu stuff */

where #nav is replaced with the id of the div where your menu is to be placed. Note that positional CSS above is important, but the color/background color/font is not. You can change these to suit your site.

In your page.tpl.php file include the following in the head tag of your page.

<!-- We only want to include the JS for IE, not browsers capable of doing everything in css --> 
<!--[if lte IE 7]>
<script type="text/javascript">
sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover=function() {
             this.className+=" sfhover";
          }
          sfEls[i].onmouseout=function() {
             this.className=this.className.replace(new RegExp("sfhover"), "");
          }
     }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#nav li:hover{
  position: static;
}
</style>
<![endif]-->

where again you replace the nav id with your menu's div id.

Hope this helps.

hello12345’s picture

Hmmm...I added that code to style.css and also added the page.tpl code and still a no go on the drop down in IE6. How can I be certain that the website isn't using nice_menus.module anymore?

Here is the website with the latest changes: http://pearl.supplychain.com

Does the code look right to you?

Thanks

dwees’s picture

I'll wait until another time of day when your site isn't taking a zillion years to load.

:)

Dave

hello12345’s picture

Sorry about that...it's actually a production server I work off of. It's working right now though for me.

Mike

hello12345’s picture

Hey Dave,

Just wanted to see if you had any luck going to my site to see what the problem could be with the menus..

Mike

hello12345’s picture

Update:

I disabled nice_menus.css and I now see a drop down menu that expands in IE6...however, its position is below where the old nice menu was called #navbuttons on the template.

Am i doing this right? It seems like we need to use the nice menus module for the actual buttons and names but also use the code you gave me for the actual CSS..

hello12345’s picture

Using your code and disabling the odd nice_menu.css code, I have the menu dropping down in IE6. Thanks Dave for your time!

I had to add the following code in style.css to position the menu correctly:

.block-nice_menus h2 {
  display: none;
}

Mike

dwees’s picture

Glad I could help, sorry I didn't get a chance to actually visit your site to see that it was working, the link you provided never seemed to work for me.

Anyway, all's well that ends well.

Dave

hello12345’s picture

Hey Dave,

There's one other issue now that I'm having. The menu bar looks fine on the homepage...but on the secondary pages the bar is layered behind another block. Is there a way to bring the menu to the front to overlap the block? I'm almost positive z-index:100 is in the code you gave me..

Mike

hello12345’s picture

Does anyone know how to prevent the drop down menu from doing this:

http://www.chazcast.com/menu.jpg

Basically, when you click on a menu button and then happen to hover over the other menus they stick together.

But this only happens if you first click a menu button and then hover over another button.

hello12345’s picture

Just fixed it n/m

hello12345’s picture

Hey Dave, have you tried your code with Firefox? I just checked firefox with that code, and the menus do not expand. Are there additional statements for FF that need to be in the head?

Mike

dwees’s picture

It works fine in Firefox, but in the CSS I gave you, you need to replace every instance of #nav with #whatever-id your menu is in.

Dave

hello12345’s picture

Yeah that's odd. I made sure everything has been changed to #navbuttons (the div # i use)...

I'll have to look into it...I know FF handles CSS better so it's weird that it's not displaying right for FF.

Mike

hello12345’s picture

Hey guys can you take a look at my menu on FF and let me know why it's displaying like that?

http://pearl.supplychain.com

Thanks

hello12345’s picture

bump

dwees’s picture

Try these changes:

In style.css change all instances of 'navbuttons' to 'nice-menu-1', and in your page.tpl.php file, change:

<style type="text/css">
#nav li:hover{
  position: static;
}
</style>

to

<style type="text/css">
#nice-menu-1 li:hover{
  position: static;
}
</style>
hello12345’s picture

Thanks...you are the man.

adewinne’s picture

Just a small change needed when using the default output format of

#nav li ul ul {
  margin: -1.3em 0 0 14em;
}

Change to:

#nav li ul.menu ul {
  margin: -1.3em 0 0 14em;
}

This will make you sub-sub menus fly out to the right side of the sub-menu, rather than below the sub-menu.

nlink’s picture

I installed nice menu on drupal 5.x installation, however it does not expands beyond first level in IE6. Any ideas?

dwees’s picture

This explains how to do nice menus with out the Nicemenus module. My suggestion is to check through the comments above and see if you can adjust your theme.

Dave

Cashmerejm’s picture

Ok friends. I've read all of your comments and heres my question. I havent really got involved with the "nice menu" but am looking for a fix for my suckerfish dropdowns. I have it working like a charm in firefox and safari. But when checking on IE6 the drop down doesnt expand, which is what led me to this site. i used this js code:

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i #nav li:hover{ position: static; }

THEN I ADDED THIS PORTION OF CSS TO MY CSS FILE:

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

because i already had the other part of the navigation above these lines but biult to my specs. The code i applied did make the drop down expand but i have lost my hover bg color and am not sure how to fix that. Remember this is only in IE. heres is the link to the site im building. please let me know if you need anything else.

http://www.zealousstudio.com/northgate/

PLEASE HELP!!!!!

In preview it looks like its cutting off some of the js that i added but if theres any question its the js posted by dwees. Thanks

hello12345’s picture

I think your js needs to include everything like below:

<!-- We only want to include the JS for IE, not browsers capable of doing everything in css --> 
<!--[if lte IE 7]>
<script type="text/javascript">
sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover=function() {
             this.className+=" sfhover";
          }
          sfEls[i].onmouseout=function() {
             this.className=this.className.replace(new RegExp("sfhover"), "");
          }
     }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#nav li:hover{
  position: static;
}
</style>
<![endif]-->
Cashmerejm’s picture

i had all that in but it wasnt posting correctly in my comment box for some reason. still not working right. any more ideas?

hello12345’s picture

I found the following code in your footer...what is it used for?

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
Cashmerejm’s picture

i dont see where that is in my code. what page is it on? do you mean in my ?

hello12345’s picture

I found this code on your homepage at the very bottom of your source code...which means you have two different sections of this same code. One for the menu up top and then this code again at the bottom...maybe i'm seeing things

jonwatson’s picture

Hi All,

I realize this is an old thread, but I am having the same issue. I was using Nice Menus and it was working great in FF3 but not at all in IE7 (not drop down). So, I read this thread and tried all of the fixes in it, but no go.

At the moment, my site is running dwees code from April 29th and now the menu does not function in either browser now.

The URL is http://watsysgroup.com/clients/dsaf8nq45/drupal/

Can someone point out where I am going wrong? Or, alternatively, tell me how to get the Nice Menus module working in IE 7?

Thanks

dwees’s picture

Just a quick glance at your menu structure, and I notice I don't see any 2nd level UL's. Have you set the menu items to "expanded" using the checkbox?

As an aside, I am using Nice Menus successfully for http://www.rism.ac.th/risweb as I think it's easier in the long run to enable and set-up a module than hard-code the JS and CSS into my theme.

Dave
My site: http://davidwees.com/myblog