Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:31
Looking for info : Image based navigation
Poster: FATJIM
Dated: Wednesday August 1 2007 - 17:24:48 BST
Hi There - I'm updating our current site...and have my main navbar created in images. I would like to have the sub-menus appear when someone mouses over my nav images. The sub-nav items will not be images. Does this make sense? I see a lot of samples of BACKGROUND images, but I want my main nav to be all images, and each one is a little different.
I currently use a vertical milonic nav bar and ideally would like to use this same code and just modify it to fit....
I'm looking for something like this: http://pomona.asacentral.com/ (the yellow Menu bar that starts with Men's Sports). Where the image nav has the drop downs. I see this site is using two files...one for the nav, one for the dropdowns...but I can't seem to get mine to work.
Can someone steer me in the right direction?
Thanx!
- Jimmy
Poster: John
Dated: Thursday August 2 2007 - 15:58:45 BST
First, note that you are 3 versions down in your code. The forum requires the most current version (5.777) for support.
However... see http://www.west.asu.edu/sai/ for an example of what you're after, and http://www.west.asu.edu/sai/templates/menu5/xp_data.cfm for the 'guts' of the setup.
Poster: FATJIM
Dated: Friday August 3 2007 - 21:53:48 BST
Hi John - Thanx for the reply. I have updated my nav on both the live site and my development site (I think!).
I have figured out the image thing....
Now that I've figured it out....I'm viewing the menu in both IE6 and FF2...the menu is off in FF2, but displays correctly in IE6. It's only off like 2 pixels, but it's breaking some images and look funny. Any know fixes for this?
Here's my menu_data file:
Code:
fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-1;
with(AllImagesStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
fontstyle="normal";
fontweight="normal";
padding=3;
}
with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial";
fontsize="100%";
fontstyle="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#FFFFFF";
offcolor="#000000";
onbgcolor="#93c12d";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=95);";
padding=5;
separatorcolor="#999999";
separatorsize=1;
subimage="http://www.milonic.com/menuimages/arrow.gif";
subimagepadding=2;
}
with(submenuStyle=new mm_style()){
bordercolor="#CDCDCD";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontweight="bold";
headercolor="#000000";
offbgcolor="#E9E9E9";
offcolor="#000000";
onbgcolor="#ffffff";
oncolor="#747A75";
outfilter="fade(duration=0.5)";
padding=5;
pagecolor="black";
subimage="http://www.milonic.com/menuimages/9x6_rightbend_grey.gif";
subimagepadding=8;
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=133;
orientation="horizontal";
style=AllImagesStyle;
top=107;
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-1;
with(AllImagesStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
fontstyle="normal";
fontweight="normal";
padding=3;
}
with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial";
fontsize="100%";
fontstyle="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#FFFFFF";
offcolor="#000000";
onbgcolor="#93c12d";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=95);";
padding=5;
separatorcolor="#999999";
separatorsize=1;
subimage="http://www.milonic.com/menuimages/arrow.gif";
subimagepadding=2;
}
with(submenuStyle=new mm_style()){
bordercolor="#CDCDCD";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontweight="bold";
headercolor="#000000";
offbgcolor="#E9E9E9";
offcolor="#000000";
onbgcolor="#ffffff";
oncolor="#747A75";
outfilter="fade(duration=0.5)";
padding=5;
pagecolor="black";
subimage="http://www.milonic.com/menuimages/9x6_rightbend_grey.gif";
subimagepadding=8;
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=133;
orientation="horizontal";
style=AllImagesStyle;
top=107;
Pleae let me know.
Thanx!
- Jimmy
Update
Poster: FATJIM
Dated: Monday August 6 2007 - 17:48:12 BST
I just checked the nav in FF on Mac...and it's sitting about 30 pixels to the right of where it should be. Is there any info on displaying the nav on the same location on all browsers? Both PC & Mac? Please advise.
-Jimmy
Poster: Ruth
Dated: Tuesday August 7 2007 - 5:11:37 BST
Hi,
We really need to see the site to advise on those issues. It is not something we can do from a description since it could any one of numerous things that might be the cause, menu in a table, css conflict, some code in css applying itself to something in the menu something left out of css that when the default for that in the browsers is different in different browsers.
Ruth
Poster: FATJIM
Dated: Wednesday August 8 2007 - 23:54:04 BST
Hi Ruth - I have temporarily upload the current site in progress (most the links don't work)...I'm noticing the nav is all over the place in different browers....any help you can give would be greatly appreciated.
http://www.internaldrive.com/2008/index.htm
http://www.internaldrive.com/2008/template.htm
Thanx!
- Jimmy
Poster: Ruth
Dated: Thursday August 9 2007 - 1:45:46 BST
Hi,
Well, I'm not sure where you want that. The most logical place, at least to me, would be the bottom table cell of the top table. If that's the case you need to position it relatively. I'd suggest using method one of the table/div relative positioning of the following link
http://support.milonic.com/beginners/ta ... /index.htm
You'd just set up the data file according to the directions and then call all the files in that table cell where you now have the two line break codes.
Otherwise you'll need to tell me where you want it. Right now you have it set absolutely positioned top=107px down and left 134px in. I'm not sure why you want to be in 134px from the left, but.... I note you have no top left body margins set in your css, yes I see it in the body tag, but I'm not sure what happens in newer browsers with that. If they don't use that then they will use default built in margins and I believe those are different in different browsers. So to get it to be the same in all browsers, I suggest you leave what you have in the body tag for the older ones, and set the body{margin:0px in your css so they all have the same starting point.
Ruth
Poster: FATJIM
Dated: Thursday August 9 2007 - 17:40:31 BST
So basically you're saying to set the position to "relative" and stick the menu_data script code where I want the nav to appear?
I've added the css body {margin:0px} to the style sheet...doesn't seem to change anything.
Thanx!
- Jimmy
Poster: Ruth
Dated: Thursday August 9 2007 - 18:01:00 BST
Hi,
You would only set it relative position if you are putting the code in some table cell or div. That relative position works off the table cell or div placement.
Using that depends on what you want the menu to do when resolution changes and such. If you want it to shift with the layout and always look like it's in the same place no matter the resolution, then I suggest putting it in the table relatively positioned.
Ruth
Poster: FATJIM
Dated: Thursday August 9 2007 - 19:13:27 BST
Thank you for the info....
I tried screenposition="center" and removed the left=134; part....
Seems to be working better in IE7, will need to test on a mac...but would there be any down sides to doing it this way?
- Jimmy
Poster: Ruth
Dated: Thursday August 9 2007 - 22:25:07 BST
Hi,
The best way to test to see if it looks the same in browsers and resolutions is to try it at 800x600 resolution in the various browsers and then at 1024x768 and see if it is in the 'correct/same' place in the browsers.
Ruth
Poster: FATJIM
Dated: Monday August 13 2007 - 17:30:25 BST
Tested the site on Safari on a Mac....the dropdown nav bar is hidden by our homepage flash. I know this was an issue with Firefox, then I added line to the code to fix it. Do you have a fix for Safari too?
Everything else looks good though!
- Jimmy
Poster: FATJIM
Dated: Monday August 27 2007 - 13:44:11 BST
Hey Guys - Any idea of the Safari / Flash fix? The nav items are still going behind the main flash movie i have on my homepage.
Any advice would be greatly appreciacted.
Thanx!
- Jimmy
Poster: Ruth
Dated: Monday August 27 2007 - 19:10:58 BST
Hi,
I have no idea. Which safari, because safari 2 had issues. See this post
http://www.milonic.com/forum/viewtopic. ... 3344#43344
Ruth