Header Separators

[mcollins27]

I'd like to make a header menu that currently looks like this:



Look like this:



Is this possible? I've tried messing around with the separators to no avail at this point.

I'm using frames, so here's my header menus:

Code: Select all

_menuCloseDelay=0;           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=0;            // The time delay before menus open on mouse over
_subOffsetTop=-62;             // Sub menu top offset
_subOffsetLeft=0;            // Sub menu left offset

/// Style Definitions ///

with(mainStyleHoriz=new mm_style()){
onclass="menuHeaderOn";
offclass="menuHeaderOff";
}

// Main Menu

with(milonic=new menuname("mainMenuHoriz")){
style=mainStyleHoriz;
top=55;
left=0;
orientation="horizontal";
alwaysvisible=1;
aI("text=Leads;showmenu=leads;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Leads;showmenu=leads;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Order Entry;showmenu=orderentry;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Agent;showmenu=agent;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Query;showmenu=query;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Campaign;showmenu=campaign;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Fulfillment;showmenu=fulfillment;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Reports;showmenu=reports;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Admin;showmenu=admin;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();");
}

drawMenus();

stylesheet styles:

Code: Select all

.menuHeaderOn
{
	color:#1D3B23;
	width:80px;	
	background:url(../images/MenuBackground.gif) repeat;
	margin:2px;
}
.menuHeaderOff
{
	text-align: center;
	color:#0C7266;
	padding:2px 0px 2px 0px;
	width:80px;
	background:url(../images/MenuBackground.gif) repeat;
	margin:2px;
}

Thanks for any help!
Matthew

[Ruth]

Hi,

Actually separator is not a css property so if you want them you need to
set them in the menu_data style itself. Also, margin is not an item
property, and I don't think you're going to get that margin:2px that you
have in the off class. If you could put up a test page, I'd be glad to set
something up for you to check out.

Ruth

[mcollins27]

Thanks for the help

Actually, the separator I was modifying was in the menu_data style. I
removed it just because it didn't seem to do what I wanted (anything
actually.)

I'm not sure what you mean by "item property", but I was just using the
margin in the CSS class to try to get the menus to space out. I believe it
DID have an effect, just not what I wanted.

I can't really setup a test site on my server (nothing public), but could you
at least tell me if the look in the second picture is even possible? It looks
to me like separators have colors and are not transparent.

[Ruth]

Hi,

OK, I can try to make something up and test, but I need a clearer picture
of what it is the menu looks like. That image almost looks like a thumbnail
and I can see what you want it to look like

Ruth

[mcollins27]

Oh you don't have to do all that

I was just curious if it was possible. The images in my original post are
links...if you click on them it brings up the picture in imageshack.

Again, thanks for your help

[Ruth]

Hi,

duh, never thought of them as a link

Well, I played anyway since I like trying things. Now I don't really know
what your background looks like, but I just used the 'silvery' one that is in
that image. Here's what you need to do, but 1st an explanation. When
using css, the backgrounds apply to items, however I noticed when testing
this that if you put the call for the css style into the style, the background
seems to also apply to the menu itself, so given that, I put the call for the
off on classes in each item rather than the style and that took care of that
issue which then allowed the 'space' between the items.

The menuStyle:

Code: Select all

with(mainStyleHoriz=new mm_style()){
separatorsize=2;
separatorpadding=2;
} 

The main menu

Code: Select all

with(milonic=new menuname("mainMenuHoriz")){ 
style=mainStyleHoriz; 
top=55; 
left=0; 
orientation="horizontal"; 
alwaysvisible=1; 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Leads;
showmenu=leads;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Leads;
showmenu=leads;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Order 
Entry;showmenu=orderentry;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Agent;
showmenu=agent;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Query;
showmenu=query;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Campaign;
showmenu=campaign;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Fulfillment;
showmenu=fulfillment;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Reports;
showmenu=reports;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
aI("onclass=menuHeaderOn;offclass=menuHeaderOff;text=Admin;
showmenu=admin;target=body;
onfunction=openSubmenu();offfunction=closeSubmenu();"); 
} 

drawMenus(); 

The css

Code: Select all

.menuHeaderOn 
{ 
   text-align: center;
   color:#1D3B23;
   border:1px solid #A9A9A9;    
   background: transparent url(MenuBackground.gif) repeat;
   text-decoration:none;
   padding:1px 2px 1px 2px;
} 
.menuHeaderOff 
{ 
   text-align: center; 
   color:#0C7266;
   border:1px solid #A9A9A9; 
   background: transparent url(MenuBackground.gif) repeat;
   text-decoration:none;
   padding:1px 2px 1px 2px;
} 

That makes the items look as if they are separate 'buttons'

Ruth

[mcollins27]

Wow thanks...I would have SWORE I tried that exact thing, but must have had something wrong. That worked perfectly.

You are a saint.

[Ruth]

Hi,

You probably did, but you also probably left the call for the classes in the style section. That put the menu background image in the menu and the items, so the separator wouldn't have done anything but put space with the silver background showing in between the items, so it would not have looked like separate items.

Ruth