Double Menu Issue

Poster: bobwill
Dated: Friday April 30 2004 - 17:02:44 BST

I am running Version 5.15 and trying to use IE 6.0.

Have a double horizontal menu at
http://www.baseball.legion.org/doublebar.htm

When you click on top menu item and the sub menu appears if you move your mouse to slowly to the submenu the submenu fades away.

If you move your mouse quickly to the submenu then the submenu stays open.

When you move slowly the menu reacts as if you are trying to move to a menu item on the lower menu, because if you go to a menu item on the top menu that does not open over the lower horitzontal menu, then it will stay open now matter how fast you move your mouse.

This does not happen using Opera 7, just IE 6.0

Any advice would be appreciated.

Poster: kevin3442
Dated: Friday April 30 2004 - 23:57:40 BST

Hey Bob,

I believe it's because of the Shadow() setting in your overfilter (which explains why it doesn't happen in other browsers, because they don't support the filters). The shadow causes the submenus from the top main menu to open farther down than they do in other browsers, so that you can still see the shadow. Normally, with a single main horizintal menu, that isn't a problem... the submenu will remain open while you move your pointer down into it. But in your case, there's a gap between the main menu and its submenu, through which you can see the main menu's shadow, AND the top of the second main menu... which is the problem. because the top of the second main menu pokes up above the top of the submenu, as you pull the pointer slowly downward toward the submenu, the tip of the pointer hits a menu item in the second main menu before it gets to the top of the open submenu. When it hits a menu item in the second main menu, it causes the submenu to close and activates the mouseover properties of the menu item in the second main menu. Does that make sense? Try your "Invitational Tournaments" item and you'll see what I mean... if you open the submenu, then mouse into the submenu on its left side, it'll close. But if you mouse into the submenu on its far right side (pulling straight down), then it won't close, because your pointer misses the "Contact Us" item in the second main menu.

Solutions? Hmmmm. Three possibilities come to mind:

(1) Turn the shadow off, so that the top of the submenu is flush with the bottom of the main menu. (It might be useful to turn it off just as a test, to verify my explanation). Or, if you like the shadow, you could...

(2) Move the second main menu down, so that the top of it is right at, or slightly below where the top of the submenus are when they open from the first main menu. (and adjust your follow scroll accordingly). That way, the pointer will hit the top of the submenu before it has a chance to enter your second main menu. Or, you could...

(3) Put an upward offset in each of the first main menu's submenus, so that when they open, there is no gap between the submenu and the main menu... the top of the submenu would be flush with the bottom of the main menu, even with the shadow on. Problem here is that in other browsers, because there's no shadow to cause a gap, the top of the submenu would now be above the bottom of the main menu... not too good looking. You could counteract that by coding conditionals in javascript, to apply the offset only for ie5.5 and ie6. Sounds harder than it is. Like so:

(a) Place the following code at the top of your menu_data_doublebar.js file:

adjust the actual value as needed (play with it until it's right).

(b) Add the following to the top of the affected submenus, right below with(milonic=new menuname("menuname")){

Affected submenus would only be the menus that open from the top main menu... it looks like there are six of them: stateinfo, rulesforms, invitational, policies, scholars, and supportlinks. (Only the first three are really affected, because the others do not intersect your second main menu, but you'd probably want to do all six, just so they all open at the same vertical position.)

Hope that made sense... holler if not.

Kevin

Poster: bobwill
Dated: Saturday May 1 2004 - 14:02:57 BST

Thanks Kevin,

I added the "if" check and submenus now work correctly.

Poster: Ruth
Dated: Monday May 3 2004 - 23:56:00 BST

This is just a question to gain knowledge. The shadow effect is a static filter and it is supported by ie4 which the menu also supports does it not? So wouldn't you code it for ie4 instead of ie55? or not?

Ruth

Poster: kevin3442
Dated: Tuesday May 4 2004 - 0:49:27 BST

Hey Ruth,

True, shadow and a few others are availale in IE4. But the coding syntax to implement them differs between IE4 and IE5.5+. It seem that the menu code uses the 5.5 syntax... you can see this in the shadow example here; the 5.5. implementation of shadow will increase an object's boundary to make room for the shadow (as happened here with the gap), but in the IE4 implementation (which can be done in IE5.5), the shadow gets clipped by adjacent objects. In Bob's case, the object increased in size... proof that the 5.5 implementation is at work in the menu code. So, I think a general rule of thumb is that you have to have IE5.5 or higher to use the available filters in a Milonic Menu. That's why I tested for ie55, because in milonic_src.js, ie55 is set to true if the browser is IE5.5 or IE6.

Hope that helps,

Kevin

P.S. Funny that you and I are discussing this here! <private grin>