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: Select all
_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=#;");
}