Submenu border image

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

Submenu border image

Poster: ccolon
Dated: Friday September 15 2006 - 11:38:32 BST

First off let me say that I absolutely love this menu. It seems to do everything that I need it to do and more. I am working with my managers to purchase the Corporate version.

I apologize in advance but this site is still in the prototype phase so I don't have a full url to send everyone to.

I need to have the submenu look like

You'll notice the slash in the lower right hand corner of the dropdowns.

I have the primary nav embedded in a table on the page

Code:

<script language="JavaScript" type="text/javascript">
with(milonic=new menuname("PrimaryNav")){
alwaysvisible=1;
orientation="horizontal";
style=primaryStyle;
position="relative";
top="0";
left="250";
aI("image=images/vt_prinav_neword_n.gif;overimage=images/vt_prinav_neword_h.gif;pointer=arrow;title=New Order;showmenu=New Order");
aI("image=global/images/glo_prinav_sta.gif");
aI("image=images/vt_prinav_opebat_n.gif;overimage=images/vt_prinav_opebat_h.gif;title=Open Batch;url=");
aI("image=global/images/glo_prinav_sta.gif");
aI("image=images/vt_prinav_rev_n.gif;overimage=images/vt_prinav_rev_h.gif;pointer=arrow;title=Review;url=;showmenu=Review");
aI("image=global/images/glo_prinav_sta.gif");
aI("image=images/vt_prinav_flecac_n.gif;overimage=images/vt_prinav_flecac_h.gif;pointer=arrow;title=FlexCache;url=;showmenu=FlexCache");
aI("image=global/images/glo_prinav_sta.gif");
aI("image=images/vt_prinav_rep_n.gif;overimage=images/vt_prinav_rep_h.gif;title=Reporting;url=");
aI("image=global/images/glo_prinav_sta.gif");
aI("image=images/vt_prinav_adm_n.gif;overimage=images/vt_prinav_adm_h.gif;title=Admin;url=;url=;showmenu=Admin");
aI("image=global/images/glo_prinav_sta.gif");
aI("image=images/vt_prinav_impfil_n.gif;overimage=images/vt_prinav_impfil_h.gif;title=Import File;url=");
aI("image=global/images/glo_spa.gif;imagewidth=33");
}
drawMenus()
</script>

and here is my data script

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=20;
_subOffsetLeft=0;




with(primaryStyle=new mm_style()){
fontfamily="verdana, arial, tahoma";
fontsize="11";
fontstyle="normal";
}

with(secondaryStyle=new mm_style()){
bordercolor="#99CCFF";
borderstyle="solid";
borderwidth=1;
fontfamily="verdana, arial, tahoma";
fontsize="11";
fontstyle="normal";
image="global/images/glo_secnav_bg.gif";
imageposition="left";
menubgcolor="#FFFFFF";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#C7EAF9";
onborder="1px solid #6A98AB";
oncolor="#000000";
outfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=135, Strength=3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
}

with(milonic=new menuname("New Order")){
margin=3;
style=secondaryStyle;
top="offset=-3";
aI("text=Authorize");
aI("text=Credit");
aI("text=Force");
aI("text=Bill Me Later - Authorize");
aI("text=Bill Me Later - Credit");
aI("text=Electronic Check");
aI("text=Switch/Solo");
aI("text=European Direct Debit");
}

with(milonic=new menuname("Review")){
margin=3;
style=secondaryStyle;
top="offset=-3";
aI("text=Batch Search");
aI("text=Transaction Search");
}

with(milonic=new menuname("FlexCache")){
margin=3;
style=secondaryStyle;
top="offset=-3";
aI("text=New Transaction");
aI("text=Balance Inquiry");
aI("text=Activation");
aI("text=Current Transactions");
aI("text=Historical Transactions");
}

with(milonic=new menuname("Admin")){
margin=3;
style=secondaryStyle;
top="offset=-3";
aI("text=Selectable Response");
aI("text=Profile Management");
aI("text=FlexCache");
aI("text=General Admin");
aI("text=Reporting Admin");
aI("text=Soft Descriptors");
aI("text=Purchase Card III");
aI("text=Receipt Admin");
}

drawMenus();

I have read through alot of the posts and viewed alot of the examples but still can not seem to figure this out any help you could give me would be greatly appreciated.

Poster: Ruth
Dated: Saturday September 16 2006 - 20:15:47 BST

Hi,

I can probably make something for you, however, I notice the main menu is images, this indicates you don't seem to have a problem as to font size adjustment, but if you need your fonts to adjust that is going to cause a problem in your submenu designs. I need to know things like that before I try to set something up.

Ruth

Poster: ccolon
Dated: Monday September 18 2006 - 11:09:24 BST

All of my main menus will be image based. The submenus will all be text based.

Poster: Ruth
Dated: Tuesday September 19 2006 - 17:17:36 BST

Hi,

I made up an example using your data file. To do something like this you have to use css and bgimages, plus images. The reason you cannot just apply it to the menu is because of font sizing. Since you are using text in the submenus anyone who needs large fonts will change the size and your 'images' would start repeating if you placed the bgimages through the menu styles. In css you can make the images much bigger since you can position them using keywords, like top left, or bottom right etc. These images should be big enough to handle large fonts, up to 400% more or less, and still look like your original layout.

These are as close as I could get to what you posted. There is no way to get your top 1/2 border on the 1st level drop down. CSS doesn't have any code for a 1/2 border. Also, when designing the menu using css, the classes you create apply to each item, not the 'surrounding' menu.

All your first level submenus, the ones like the File Download menu will need to be coded like that one, and all your second level submenus, like the Transaction Detail Report sub will have to be coded like that one.

Hope this helps.

EDIT: Link removed

Ruth

Poster: ccolon
Dated: Tuesday September 19 2006 - 17:51:45 BST

Thanks. I copied down the example and will take a run through it. It definitly looks closer to the original design.

Poster: Ruth
Dated: Tuesday September 19 2006 - 18:04:08 BST

Hi,

The zip file has all the stuff you need, other than your milonic program files.

It's easier to understand what you can and cannot do with regard design if you use an analogy for the menu. Think of the menu as a box that has a bunch of boxes in it [items] When you use css it applies to the boxes inside the menu, not the menu box. Because of the design you have wanting the blue on the left and the border on the right, you can't just use a menubgimage, unless you fix the size of your submenus by using images for the items instead of text. So, all your design has to be done in the items and 'put' together to create what looks like one 'image'.

I hope that made sense.

THanks for letting me know you got the stuff.

Ruth

Poster: ccolon
Dated: Tuesday September 19 2006 - 19:03:11 BST

That makes perfect sense. I now have the menu running with my primary nav images and your css fixes. The designer was extremely happy that the menu now matches the design exactly.

Thanks for all your help

Industrial Strength JavaScript and DHTML Menus

Submenu border image