Looking for info : Image based navigation

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Looking for info : Image based navigation

Post by FATJIM »

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Post by FATJIM »

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: Select all

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://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://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
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Update

Post by FATJIM »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Post by FATJIM »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Post by FATJIM »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Post by FATJIM »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Post by FATJIM »

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
FATJIM
Advanced
Advanced
Posts: 11
Joined: Fri Sep 02, 2005 12:33 am

Post by FATJIM »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

I have no idea. Which safari, because safari 2 had issues. See this post

viewtopic. ... 3344#43344

Ruth
Post Reply