Pop-Up Menu Fixed - incorrect positioning

[tepidarium]

Hi,

URL associated with this post:

http://www.citytech.cuny.edu/proj/test.html

I am trying to get the menu to work on a CSS test layout. I am using the Pop-Up Menu fixed feature - where individual menus are called by mousing over HTML text links. The problem is that the positioning is not correct.

I am using a full CSS layout - I am sure this is the reason that I am having problems but I don't know what to do. If someone can help - or can offer advice on an alternate way to deploy the menu in a full css layout where the menu needs to be positioned in a particular area I would be grateful.

Thanks...!

[tepidarium]

The only link with an active example of the pop-up problem is "About Us"


Thanks.

[kevin3442]

Hey tepidarium,

I just had a quick look, but I don't see a popup menu (from About Us or any other). I also don't see any milonic source or code anywhere??? Am I missing something or have you removed it temporarily?

Kevin

[tepidarium]

Hi Kevin,

Doh, I must have repalced this file after I didn't receive a response. I'm going to put the problem page back up on Monday...if you or anyone else can help that would be beyond awesome!

Hey tepidarium,

I just had a quick look, but I don't see a popup menu (from About Us or any other). I also don't see any milonic source or code anywhere??? Am I missing something or have you removed it temporarily?

Kevin

[tepidarium]

Hi All,

The URL is now working:
http://www.citytech.cuny.edu/proj/test.html

The only menu item that displays a Milonic menu is "About us" -as you can see, the menu does not displa under "ABout Us" but at the top of the document. I have set the menu position to "relative" in menu_data.js


If someone has an idea of how to fix this I would be indebted to you....
if anyone has thoughts on how to place a menu relative to the document flow in a full CSS layout (where page divisions are contained in DIVS) I would like to hear them!

Thank you!

[kevin3442]

Hi tepidarium,

You always have unique and interesting menu issues. Cut that out, would you?

I think that the problem breaks down to two things: (1) You are using the popup() function, in its simplest form, from static links. Not a big deal by itself. But (2) You are trying to position what is essentially a submenu relatively. You can't do that.

Ideally, a submenu would always be positioned relative to the calling parent item. That's usually handled internally by the menu system when you use the showmenu item property to open a submenu. But you're design precludes that; you have to use popup() if you build the main menu externally to the system like you're doing. The problem with popup() in its simplest form (i.e., just passing a menu name) is that, in the absence of any positioning info from a parent item, the submenu has to open in its own pre-defined position or, if none exists, use the default (up at the top in your case!). Fortunately, popup() offers some other options, one of which includes the ability to open the named menu at the location of a named/ID'd html element, like a link or an image. Try this:

(1) Remove position="relative"; from your "Partners" menu definition.

(2) Change your "About Us" link so that you add a name attribute, and id attribute, and a different call to popup(), like so:

Code: Select all

<a href="#" id="aboutus" name="aboutus" onmouseover=popup("Partners","aboutus") onmouseout=popdown()>About Us</a>

The second parameter passed to popup() is the name/id of the html element where you want the menu to open; it should open with the top left corner of the menu below the bottom left coner of the named element. You can throw in a third and fourth parameter to popup() to specify a Top Offset and Left Offset respectively. E.g.,
popup("Partners", "aboutus", 1, 3) would open the "Partners" menu 1px down and 3px to the right of where it would normally open below the element named "aboutus". You can also use negative offsets to bump the menu up or left.

I haven't tested it in many browsers, but this approach worked with your code in IE6 and NS7 in WinXP. You might want to test all of your target browsers.

Cheers,

Kevin

[tepidarium]

Hi Kevin,

Thank you for your most thorough and thoughtful reply. I just took a look at what you said, I will try it and post my results.

I don't mean for my designs too difficult to implement the menus!

The reason why I have turned to using the pop-up function to begin with is that I can't think of a good way to position the menu relative to the document flow because I am using a css layout with DIVs (and I know the menu reacts strangely when placed in a div). My designs don't seem to mesh well with Milonic menu examples that exist outside of the relative flow of the document

Anyhow, I'll get back to you on how this worked, thanks again for responding to my question.

[tepidarium]

Hi Kevin,

I implemented your suggestion. Works great expept in Mac IE 5 - for some reason in IE 5 the menus are offset to the left by about 20 pixels and I can't figure out why

OT MAC IE 5 is messing up my Css float layout as well...

[kevin3442]

Hi tepidarium,

Works great expept in Mac IE 5

That figures.

for some reason in IE 5 the menus are offset to the left by about 20 pixels and I can't figure out why

The non-technical answer is because IE5/Mac sucks. I think the real explanation has to do with how positions of elements are derived within the browser. IE/Mac sets an element's parent differently than other browsers, which is probably screwing up the menu system's method of locating the element that you name in the second parameter to popup().

You could probably have a little sniffer script that looks for IE/Mac, then adjusts the offsets you pass to popup() to correct for the error. (Did that make sense?)

Cheers,

Kevin

[tepidarium]

The non-technical answer is because IE5/Mac sucks. I think the real explanation has to do with how positions of elements are derived within the browser. IE/Mac sets an element's parent differently than other browsers, which is probably screwing up the menu system's method of locating the element that you name in the second parameter to popup().

You could probably have a little sniffer script that looks for IE/Mac, then adjusts the offsets you pass to popup() to correct for the error. (Did that make sense?)

Cheers,

Kevin

Thanks for your response, Kevin. I may just leave it the way it is in IE5. If I adapt a sniffer I know I will fumble the javascript!

I noticed that the menu is being influenced by my styles. Is there a way to make sure that the menu is not effected by CSS - i.e. I define "text-align: center" for the div that contains the links associated with the menu but then, the menu text is all center aligned.

I also tried to implement the menu on another test page and it too is being influenced by my css.