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
Menu Relative to Images?
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/templat ... p_data.cfm.
John
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
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:
Code: Select all
<img src="the_image.gif" onmouseover="popup('menu name',1)">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
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
What you have to do is spacify the image you want the menu bouned to.
Here's how:
Code: Select all
popup("menuname", "imageid")Code: Select all
<img src=image.gif name=yourimage id = yourimage>Hope this helps
Andy
Thanks Andy!
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!
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!
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
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...
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
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
Do you see the same at http://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
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