Header Separators

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

Header Separators

Poster: mcollins27
Dated: Monday April 30 2007 - 22:47:15 BST

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:

_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:

.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

Poster: Ruth
Dated: Tuesday May 1 2007 - 5:33:31 BST

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

Poster: mcollins27
Dated: Tuesday May 1 2007 - 15:31:01 BST

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.

Poster: Ruth
Dated: Tuesday May 1 2007 - 17:03:10 BST

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

Poster: mcollins27
Dated: Wednesday May 2 2007 - 15:34:19 BST

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

Poster: Ruth
Dated: Wednesday May 2 2007 - 21:49:59 BST

Hi,

duh, never thought of them as a link :lol:

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:

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

The main menu

Code:

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:

.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

Poster: mcollins27
Dated: Thursday May 3 2007 - 16:40:38 BST

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

You are a saint.

Poster: Ruth
Dated: Thursday May 3 2007 - 18:31:54 BST

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

Industrial Strength JavaScript and DHTML Menus

Header Separators