Menu Relative to Images?

Poster: joecm
Dated: Saturday October 4 2003 - 1:54:57 BST

I have buttons on my site that I would like to drop sub menus down from. I have not yet been able to accomplish this using Milonic. Is it possible to base the position of the submenu off the position of the image?

I can make it work when I use absolute positioning (top and left), but I'd like my buttons to be centered. Has anyone done anything like this, or know how?

Note: I do not want to use a "Milonic" main menu to drive my submenues, rather need to use the onMouseover, onMouseout.

Thanks!

-joe

Poster: John
Dated: Saturday October 4 2003 - 4:56:12 BST

See http://westcgi.west.asu.edu/sai/ for an example of what you want. The main menu items are individual graphics, with all the subs dropping onMouseOver. It's a ColdFusion page, and the data file is .cfm, but that makes no difference. Data is at http://westcgi.west.asu.edu/sai/templates/menu5/xp_data.cfm.

Poster: kevin3442
Dated: Saturday October 4 2003 - 4:59:58 BST

Hi Joe,

It is possible to write functions that will locate an object within a page, then open a menu relative to that object's position. I did something similar with version 3. But I found that (at least for me) locating objects isn't the easiest thing to do accurately across browsers. Would you be happy opening the menu at the current mouse pointer position when the user mouses over an image? If so, you could use the menu's built-in popup() function from the image's onmouseover event, like so:

Passing a 1 as the second parameter in the call to popup() is a little known, but very useful trick; it causes the named menu to open at the current mouse pointer position. The menu would close if the user (a) moused over the menu and selected an item (b) moused over the menu then out again, or (c) opened a different menu. You could also have a function to close the menu onmouseout, as you mentioned, but if you did that, then the menu would close before the user got a chance to move the pointer into it, so the menu would be useless.

Another possibility would be to make each of your buttons a separate milonic menu... each one would be it's own "main menu" (i.e., alwaysvisible=1) with only one menu item: the button. Simply make the menu items purely graphical, rather than textual, and position them where you want.

Hope that helps,

Kevin

Poster: Andy
Dated: Saturday October 4 2003 - 10:43:56 BST

This is possible and it's a new feature so might not work 100% across all browsers.

What you have to do is spacify the image you want the menu bouned to.

Here's how:



You'll need to declare an id for each image and use it as the reference. Also, if you want to support Netscape 4.0 you'll need to add name as well.



We'll get sample of this posted up soon.

Hope this helps
Andy

Poster: kevin3442
Dated: Sunday October 5 2003 - 7:53:57 BST

Well blow me down... never saw that one. Nice touch Andy. I'm gonna go try it now!

Kevin

Thanks Andy!

Poster: joecm
Dated: Sunday October 5 2003 - 7:58:23 BST

Thank you Andy, that is the solution that I was looking for. And using the offsets, this does almost exactly what I need. There is one thing I would like it to do that I cannot get it to do.

The button images that I have run horizontally across the top of the screen. Depending on how big the browsers window is open, the buttons may butt up against the edge of the browser. In this case, the menu is not completely visible. What I would like is if the menu could detect this, and scoot the menu left until it is fully visible. Is this possible?

Thanks again Andy! I love the product and the service you offer is just such a big bonus!

Poster: kevin3442
Dated: Sunday October 5 2003 - 8:25:00 BST

Hi Andy,

I just tried it. Nice! Two thoughts: (1) I wonder if it might be a bit better if the positioning would take the height of the image into acount, opening the menu at the bottom of the image so that (a) the image isn't obscured and (b) it doesn't force a mouseover on a menu item. I know you can do the same with a top offset, but that might be limiting if you want to call the same menu from multiple triggers of varying sizes. (2) I can verify Joe's report... the "imageid" feature seems to kill anti-collision (which still works fine if you use mouseXY instead). Still a nice touch; I will no doubt be trashing my object locating function and use this instead.

Kevin

Some more information...

Poster: joecm
Dated: Monday October 6 2003 - 2:38:44 BST

Hi Andy,

I've been playing with this a bit more and noticed something about the use of "Image Relativity".

My current situations is I have images running along the top, I add:

top="offset=33"

to align the menu with the bottom of these images.

It works great on IE, but I noticed in Mozilla 1.3a (build: 2002121215) that the offset works not from the top of the image, but from the top of screen. Now, if I add a couple of <br> tags above the images, and begin to scroll, the menu does not line up properly.

Hopefully that makes sense.

This is NOT a problem for me as my images are at the top of the page, but might be an issue for someone else. I will try to see if I can replicate in the latest Mozilla.

-joe

Poster: dcrintea
Dated: Wednesday October 15 2003 - 10:41:40 BST

Please help, I have the same problem.

Where do I have to set the top variable?

Poster: Andy
Dated: Wednesday October 15 2003 - 11:07:12 BST

Do you see the same at http://www.milonic.com/menusample.php?sampleid=24

I've just tested it with Mozilla 1.4 and it appears to be OK. You might have an old copy of the menu.

Also, we've now set the menu to appear at left=image.left and top = image.top+image.height so you wont need the offset unless you need to fine tune the position, as per Kevins earlier request.

Cheers
Andy