Combining high3d, low3d and border?

[speedware]

I'm trying to give my menu a 3d look and feel and still have it border with a thin 1 pixel border, however when setting the high3d and low3d settings in the DHTML menu it overrides my border settings and only show the 3d effect. I've seen this combining of 3d and borders done in quite a few other scripts, can it be done in the Milonic DHTML menu and if so how do I make it happen?

Thanks

[Ruth]

Let's say you have a red border, are you saying you want to have a 1px red border then you want to set the high and low 3d so that the red border remains and then the colors set in the 3d also show up?

Ruth

[speedware]

That's exactly what I want to do, I want to have a black border of 1pixel, but inside this border I would still want to be able to have a grey and white high and low to create a bit of a 3d emboss effect and still have the black border outside of it.

[Ruth]

I think the high and low 3dcolor functions as if you had declared a css class with the border top and right one color and the bottom and left another. So, I doubt you can use that and a border color and keep it. The high3d/low3d would over-ride the separate border color.

There is a borders demo, sort of a demo, that I did a long while ago to show how to do various things with borders. This was done a long time ago, during the beginning development stage of Version 5. As the menu has developed and come more into compliance with css standards some of the 'nice' things [well things I thought looked really neat] no longer show, but a lot of them still do. You might take a look at that, the ones down toward the bottom are probably somewhat like you want, it may give you some ideas for experimenting.

Ruth

[speedware]

Thanks for the link, the only thing with these examples is that each subitem now has a border and what I wanted to do is really to have a border on the subarea itself. So say you move over Products in my menu, the Products submenu shows up with different items, rather than to have these all bordered and show as if I was using a separator in my submenu I wanted only for the group as a whole to be bordered.

[John]

Don't forget you can now use CSS to control your menus. I don't have time right now to do a workup for you (something about my real J.O.B.!), but take a look at this section.

[Ruth]

grrrrr I cannot believe I clicked post and the dumb thing asked me to login again and blanked all I had written!!!

OK, again.

To get the look you want you will need to use css and you will need to create a number of classes for each particular border. You'll need 3 classes for the main horizontal menu and 3 classes for the vertical submenus and you have to call the classes, both on and off classes in each menu item. The reason for that is because you want the black border around the menu and then want the highlight look inside that, that means setting the usual border parameters in the menuStyle and any subStyles you might have and also apply a class. But, if you try to apply the class in the global style section it puts the black border around the menu but also puts the 'highlight gray and white' borders around each item, thereby making it look like there are separators.

I did this and applied it only to the main menu and the sub menu titled Milonic in the download sample so you can copy and paste this stuff in the correct place in your sample and see how it looks. To do this you need to do:

1. code the global style border, and set the separatorsize to zero

Code: Select all

borderstyle="solid";
borderwidth=1;
bordercolor="#000000";
separatorsize=0;

2. place the classes in the head of the document inside the existing style tags with the other classes there. [I put it there because there is no style sheet for the sample, but if you have a style sheet when you do your menu you'd put the classes in the style sheet. You'll note I named them so you can see exactly where they apply, in which item they would be called.

Code: Select all

.horzbord_item {border-top:2px solid #ffffff; border-right:0px solid #CCCCCC;
border-bottom:3px solid #CCCCCC; border-left:0px solid #ffffff;}
.horzbord_first_item {border-top:2px solid #ffffff; border-right:0px solid #CCCCCC;
border-bottom:3px solid #CCCCCC; border-left:2px solid #ffffff;}
.horzbord_last_item {border-top:2px solid #ffffff; border-right:3px solid #CCCCCC;
border-bottom:3px solid #CCCCCC; border-left:0px solid #ffffff;}

.vertbord_item {border-top:0px solid #ffffff; border-right:3px solid #CCCCCC;
border-bottom:0px solid #CCCCCC; border-left:2px solid #ffffff;}
.vertbord_first_item {border-top:1px solid #ffffff; border-right:3px solid #CCCCCC;
border-bottom:0px solid #CCCCCC; border-left:2px solid #ffffff;}
.vertbord_last_item {border-top:0px solid #ffffff; border-right:3px solid #CCCCCC;
border-bottom:3px solid #CCCCCC; border-left:2px solid #FFFFFF;}

3. code the items in the menu_data.js file, as noted I only did the main horizontal menu and the submenu titled Milonic:

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("status=Back To Home Page;text=Home;url=http://milonic.com/;onclass=horzbord_first_item;offclass=horzbord_first_item;");
aI("showmenu=Samples;text=Menu Samples;onclass=horzbord_item;offclass=horzbord_item;");
aI("showmenu=Milonic;text=Milonic;onclass=horzbord_item;offclass=horzbord_item;");
aI("showmenu=Partners;text=Partners;onclass=horzbord_item;offclass=horzbord_item;");
aI("showmenu=Links;text=Links;onclass=horzbord_item;offclass=horzbord_item;");
aI("showmenu=MyMilonic;text=My Milonic;onclass=horzbord_last_item;offclass=horzbord_last_item;");
}

with(milonic=new menuname("Milonic")){
style=menuStyle;
aI("text=Product Purchasing Page;url=http://milonic.com/cbuy.php;onclass=vertbord_first_item;offclass=vertbord_first_item;");
aI("text=Contact Us;url=http://milonic.com/contact.php;onclass=vertbord_item;offclass=vertbord_item;");
aI("text=Newsletter Subscription;url=http://milonic.com/newsletter.php;onclass=vertbord_item;offclass=vertbord_item;");
aI("text=FAQ;url=http://milonic.com/menufaq.php;onclass=vertbord_item;offclass=vertbord_item;");
aI("text=Discussion Forum;url=http://milonic.com/forum/;onclass=vertbord_item;offclass=vertbord_item;");
aI("text=Software License Agreement;url=http://milonic.com/license.php;onclass=vertbord_item;offclass=vertbord_item;");
aI("text=Privacy Policy;url=http://milonic.com/privacy.php;onclass=vertbord_last_item;offclass=vertbord_last_item;");
}

If you copy and paste this in the download sample menu_data.js file in teh correct places, and the style on the index.htm page you'll see how it looks. It seems to match what you want.

When you're working with borders and css, keep in mind that it will tend to put the border around the items, so if you want it to look like it's around the menu you need to code colors and sizes for all item sides, top/right/bottom/left.

Hope this helps.

Ruth

[speedware]

Thanks a lot for the help.

This is exactly what I had in mind yes, I only have two small problems now though.

There is an overflow of 1 pixels that happens on the right and bottom when hovering, meaning a thin line of grey shows up outside of the black border when moving from item to item.

The emboss only shows up once I first hover on the menu rather than on loading the page. I was wondering how to get around these two problems.

[Ruth]

You'll either have to post a test page so we can see what's happening, or post the menu_data.js file, your html code and any css code you are using. I am not getting any thing like that in any browser I tested, IE Netscape, Opera, Firefox. If you have to post here [ a page would be better] don't forget to use the code tags. Also, check your menu version and make sure you have the latest release, 5.727.

As to the embossed. I don't know what you mean by that. What embossed?

Ruth

[speedware]

Updating to the latest version took care of both problems. But using your example I now get the underline on each links. Are there properties in the menu to have "none" or do I have to set this up through css. Also how is it that the underline shows up only on this submenus and not the ones where I haven't applied your style example?

[Ruth]

That is not happening in my IE, but it does in Firefox and Netscape i.e. mozilla. I have to assume that somehow those browsers use the text-decoration:underline as default on links. There is a property in the menu that allows setting decoration. Set it in the style section decoration="none"; that seems to take care of the problem in those browsers.

You might check below my name, you'll see links to style, menu, item properties lists. Those are the properties that can be assigned in the menu. Some only work in style, some in menu and some in item and some of them work in any of the 3.

Ruth

[speedware]

That did the trick, thank you very much for the help.