newbie: help with Opera + menubgimage, etc

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:58

newbie: help with Opera + menubgimage, etc

Poster: jaberwock
Dated: Tuesday January 4 2005 - 6:42:39 GMT

Hey,

I've been looking for a menu solution that supports a design I have been handed and these menus seem to get me most of the way, but I have hit some roadblocks. I am working from an eval copy and just getting started so apologies if I have overlooked something obvious.

Site is targetted at Mozilla, IE6, Opera7 on PC and Safari, Mozilla on Mac OSX. So far on the PC I've noticed these issues:

Opera 7.51: background image for initial submenu (categories) doesnt seem to load, leaving menu transparent, and the sub-submenus (products) offsets are way off

IE6: initial submenu is offset incorrectly (a pixel or two), and distracting flicker of white as background menu image loads

All: had to set text-decoration & font-weight in CSS as I couldnt get those menu attributes to apply right in the menu_data defs.

I suppose the image problems would be solved if I didnt have to employ bg images, but this is the only way I can think of to achieve the inset borders of the category menu.

I have posted a test version at:

http://www.popwagon.com/test/test.html

The menu decends from the Find a Product button at top left. Also, here is the heart of the menu_date file to save sucking it down:

Code:

_menuCloseDelay=500           
_menuOpenDelay=150          
_subOffsetTop=5            
_subOffsetLeft=-4           

// defines main product finder image menu
with(imageStyle=new mm_style()){
   bordercolor="#000000";
   borderstyle="solid";
   padding=5;
   fontstyle="normal";
   fontweight="normal";
}

// define category listing menu style
with(categoryStyle=new mm_style()){
    onclass="menu_catg";
      offclass="menu_catg";
   itemwidth=142;
   menubgimage="images/tmp_menubg.gif";
   subimage="images/tmp_submenu_off.gif";
   onsubimage="images/tmp_submenu_on.gif";
   subimagepadding="8";
   oncolor="#ffffff";
   offcolor="#FF6700";
   onbgcolor="transparent"
   offbgcolor="transparent";
   fontsize=10;
   fontstyle="normal";
   fontweight="bold";
   fontfamily="Verdana,Tahoma,Arial";
   align="left";
}

// define product listing menu style
with(productStyle=new mm_style()){
    onclass="menu_prod";
      offclass="menu_prod";
   itemwidth=120;
   onbgcolor="#00425A";
   oncolor="#ffffff";
   offbgcolor="#00425A";
   offcolor="#ffffff";
   ondecoration="underline";
   bordercolor="#C6BEAC";
   borderstyle="solid";
   borderwidth=1;
   separatorcolor="#C6BEAC";
   separatorsize="1";
   fontsize=10;
   fontstyle="normal";
   fontweight="bold";
   fontfamily="Verdana,Tahoma,Arial";
   align="left";
}

// main category listing menu
with(milonic=new menuname("products")){
   style=categoryStyle;
   aI("image=images/tmp_menutop.gif;type=header");
   aI("text=SUSPENDED;url=#;showmenu=suspended;");
   aI("text=FLOOR;url=#;showmenu=floor;");
   aI("text=INTEGRATED;url=#;showmenu=integrated;");
   aI("text=FREEFORM;url=#;showmenu=freeform;");
   aI("image=images/tmp_menubtm.gif;type=header");
}
// FLOOR submenu
with(milonic=new menuname("floor")){
   style=productStyle;
   aI("text=product one;url=#;");
   aI("text=product two;url=#;");
   aI("text=product three;url=#;");
   aI("text=product four;url=#;");
}

// INTEGRATED submenu
with(milonic=new menuname("integrated")){
   style=productStyle;
   aI("text=product one;url=#;");
   aI("text=product two;url=#;");
   aI("text=product three;url=#;");
   aI("text=product four;url=#;");
}

// FREEFORM submenu
with(milonic=new menuname("freeform")){
   style=productStyle;
   aI("text=product one;url=#;");
   aI("text=product two;url=#;");
   aI("text=product three;url=#;");
   aI("text=product four;url=#;");
}

Thanks for any and all help!

Poster: Ruth
Dated: Tuesday January 4 2005 - 18:04:49 GMT

Hi Jaberwock and welcome to Milonic!

I'm going to take your issues in order, though some I can't answer.

The images are there, it's just taking a loooong time for them to show up in Opera. You might get the preloadmenuimages.js module HERE

I don't know how to fix the IE6 issue since I have IE5.5 and it doesn't do that.

The reason you have to set the font-weight in the css is that your calling a class and for some reason if you do that, you have to set the fontweight there also. I don't know why it does that. Without the class the fontweight="bold"; works. The same thing applies to decoration. However, you can get away from using the class by using the rawcss parameter in the menu instead.

I did a layout that will use the inset without images. It's not exactly like what you have but very close. I'll post here so you can try it. I only played with the categoryStyle and it's menu.

Code:

// define category listing menu style
with(categoryStyle=new mm_style()){
    
   itemwidth=129;
   borderwidth=6;
   borderstyle="inset";
   bordercolor="#e2e2e2";
   subimagepadding="8";
   oncolor="#ffffff";
   offcolor="#FF6700";
   onbgcolor="#000000"
   offbgcolor="#000000";
   subimage="tmp_submenu_off[1].gif";
   subimagepadding=4;
   onsubimage="tmp_submenu_on[1].gif";
   fontsize=10;
   fontstyle="normal";
   fontweight="bold";
   decoration="none";
   fontfamily="Verdana,Tahoma,Arial";
   align="left";
   rawcss="padding:0px 10px 0px 12px; "
}
// main category listing menu
with(milonic=new menuname("products")){
   style=categoryStyle;
   itemheight="27px";
   left="offset=1px";
   aI("text=SUSPENDED;url=#;showmenu=suspended;itemheight=27px;");
   aI("text=FLOOR;url=#;showmenu=floor;itemheight=27px;");
   aI("text=INTEGRATED;url=#;showmenu=integrated;itemheight=27px;");
   aI("text=FREEFORM;url=#;showmenu=freeform;itemheight=27px;");
   
}

This will make the whole menu inset, using the borderstyle="inset"; the depth of the inset is achieved by the borderwidth, and you can play with colors to get the look you like. The lighter the color the more it looks like there is a border all around the menu. When you make the borderwidth a higher number you have to also do something with the itemwidth because the border being wider makes the menu look wider.

As you see in the code there is no offclass= onclass= all was done in the menu. However, you could add a class in addition with a border listed and it would then put the inset into each item, also. If you do add a class, you need to put the text-decoration and fontweight and maybe the padding back in the class because for some reason if a class is used those seem to be disabled in the menu

.menu_catg {

border:3px inset #cccccc;
}

I hope that helps.

Ruth

Poster: jaberwock
Dated: Tuesday January 4 2005 - 19:19:30 GMT

Thanks so much for taking a look at this Ruth! You have solved the class vs menu_data param issue by pointing out the conflict there--I would rather have everything defined in the menu_data anyway. And I will fiddle with the inset param (which I was unaware of) and the borders to try and get something passable there.

I do have a preload script that is loading the nav images but that doesnt seem to help. I'll try the one you pointed out.

My only real outstanding issue is the submenu offset in Opera. When I view all the other Milonic example menus on that browser, they seem fine, but for some reason, in my menu, Opera is placing the Product submenus about 50px down and about 120px left of where the other browsers display them. I wonder if it could have to do with the fact that the initial menu is embedded in a table a couple of div's deep? See attached screen shot:

Anyway, thanks again for your help--what a great community!

Poster: Ruth
Dated: Tuesday January 4 2005 - 21:54:22 GMT

Your menu seems to be placed into the table correctly however, you have taken out the drawMenus() from the menu data file, and it is supposed to be in both the file and with the main menu that's in the table. Without it, the menu does work in other browsers but that seems to affect Opera and the position of the submenus.

Ruth

Poster: jaberwock
Dated: Tuesday January 4 2005 - 22:04:44 GMT

Ruth, you were right again (how many times do you hear that on this forum I wonder!). Replacing the drawMenus() function call in the menu_data file fixed the Opera issue.

Also, I like that 'rawcss' attribute you added to the menu def--I had not seen that documented before.

Thanks again for all your help!

Poster: Ruth
Dated: Tuesday January 4 2005 - 22:11:18 GMT

If you go to the main Milonic page, and open the DHTML Menu link on the menu you'll see a Menu Quick References item, when you mouseover there are links for style properties, menu properties, itemproperties, global properties, and also one for functions and methods.

I used to have to go there all the time, now I only have to go about 80% of the time :lol:

I copied the pages and made my own for my desktop!

Ruth

Poster: jaberwock
Dated: Friday February 4 2005 - 23:23:54 GMT

We have now purchased the menus and gone live with the site.

http://www.euroflues.com

I have found only one inconsistency across browsers that I cant seem to fix. On IE6/PC, the main (category) menu offset from the graphic it sits beneath is -2px left. I have been changing the submenu offsets by having php write the javascript but I cant seem to affect the main menu offset.

I am including a screen grab that shows that the main menu, beginning with the FIREPLACES graphic header is just left of the FIND A PRODUCT graphic it sits beneath.

Thanks in advance for any suggestions and again, thanks for getting me to this point.

-John

Poster: Ruth
Dated: Saturday February 5 2005 - 2:14:29 GMT

It's the style sheet. I tried removing items but it's a long sheet. If the #frame and #page styles are removed together that fixed the problem, I don't know if just one of something else would also fix it.

The subOffsets do not work with the horizontal menu since the subs are supposed to open right below. To do offsets for the subs from a horizontal try using left="offset=x"; in the menu definition.

As noted before, putting the menu in a div can cause it to break or become non-functioning in some browsers.

Ruth

Poster: jaberwock
Dated: Saturday February 5 2005 - 16:34:46 GMT

thanks ruth. that sounds right--the main divs have to be redefined specifically for IE6 to address problems with it's interpretation of the css box model--i bet that's where those 2 pixels are coming from.

thanks!

-john

Poster: Ruth
Dated: Saturday February 5 2005 - 22:32:08 GMT

Hi John,
You really should get the menu out of the div. You could get erratic behaviour in other browsers, it could break up, or even stop functioning on some browsers. You can see that there are special instructions to put it in a table, and it works fine in a table if the directions are followed. But, with divs there can be problems, divs don't function like tables. Heck divs can have problems all on their own in various browsers.

Ruth

Industrial Strength JavaScript and DHTML Menus

newbie: help with Opera + menubgimage, etc