Border on left and right

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

Border on left and right

Poster: enobis
Dated: Monday August 4 2003 - 8:11:11 BST

Hello,

maybe i will buy the menu, but only if it's possible to fade out the left and right border! The top and bottom border must be there.

Is it possible to change this with attributes or have i to change the javascript?

Thanks for any posts

dennis

Poster: enobis
Dated: Monday August 4 2003 - 9:57:15 BST

btw: the one who can programme the problem above, will be pay for his work, because it is very important!

Poster: Hergio
Dated: Wednesday August 6 2003 - 13:27:07 BST

I am unsure what you mean by "fade out the left and right border" but I am assuming you mean that you want a line on the top and a line on the bottom of a menu item (none on the left and right) when the mouse if over it. If this is the case, heres some help. Just a forewarning, you MUST be using the latest release candidate for this to work. At the time of this post, its RC4. Other RCs didn't work right with the classes.

In your webpage, declare in the head two styles, one for mouse over, one for mouse out. These two styles assume the menu backing is white. The reason you still want lines to render on all the menus, even when you're not hovering over them, is because the menus will shift because they're size will be changing because their borders are appearing and disappearing.

Code:

<STYLE>
.topbottomLines{
   border-top: 1px #ff0000 solid;       /*red*/
   border-bottom: 1px #ff0000 solid;  /*red*/
   border-right: 1px white solid;         /*white*/
   border-left: 1px white solid;           /*white*/
}

.noLines{
   border: 1px #ffffff solid;                /*white*/
}</STYLE>

Now in your menu declarations, for menus you want to have this effect, make a style that will incorporate these classes.

Code:

with(MyStyle=new mm_style()){
onbgcolor="#f8fcfd";
oncolor="#000000";
offbgcolor="#f0f1f3";
offcolor="#000000";
//bordercolor="#ff0000";       //comment this
//borderstyle="solid";            //   ''      ''
//separatorcolor="#8A867A";
//separatorpadding=2;
//separatorwidth="80%"
//separatoralign="center";
//onborder="";                     //comment this
//offborder="1px white solid";// same
//image="images/xpblank.gif";
onclass = "topbottomLines";     //Heres the lines class
offclass = "noLines";                //The no lines class
padding=2;
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="verdana, tahoma, arial";
subimage="images/arrow.gif";
}

Now set this style to the menus you make and it should work.
Hope this is what you were looking for.

Poster: Hergio
Dated: Friday August 15 2003 - 19:31:39 BST

Any word on if this worked at all? Cuz if you're willing to toss some money my way, feel free! :lol:

Just kidding, my payment is knowing I am helping people learn about web design and helping them make better websites with this menu. :tearing up: Thats what I get out of this.

Industrial Strength JavaScript and DHTML Menus

Border on left and right