Sub Menu questions

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

Sub Menu questions

Poster: goodtech
Dated: Friday January 2 2004 - 19:51:19 GMT

Is there a way to change the color of the sub menu so that it's not the same as the main menu?

How do I change the distance the sub menu is from the top menu.... to add a little space below the main menu before the sub menu appears?

Is there an easy way to add another seperator image to the right side of the menu?

You can see what I'm working on at http://www.thegoodtech.com/webdesign/cl ... ems/site2/

Thanks in advance.

Re: Sub Menu questions

Poster: kevin3442
Dated: Saturday January 3 2004 - 4:46:25 GMT

goodtech wrote:

Is there a way to change the color of the sub menu so that it's not the same as the main menu?

You currently have one style called menuStyle (defined starting on line 12 of your menu_data.js file). You could define a second one, say, subMenuStyle, like so:

Code:

with(subMenuStyle=new mm_style()){
onbgcolor="#FFCF4D";
oncolor="#000000";
offbgcolor="#F4B50A";
.
.
.
}

Change the colors, etc, to what you want for the submenus. Then, in each of your submenu definitions, set style=subMenuStyle; instead of style=menuStyle;, like so:

Code:

with(goodmenu=new menuname("products")){
style=subMenuStyle;
aI("text=Zonar Systems Page;url=#;");
aI("text=RFID;url=#");
.
.
.
}

Quote:

How do I change the distance the sub menu is from the top menu.... to add a little space below the main menu before the sub menu appears?

In each submenu definition, specify a top offset like so:

Code:

top="offset=5";

This would move the menu down 5 pixels from where it would normally open. For example, to move your products menu down 5px, you'd do this:

Code:

with(goodmenu=new menuname("products")){
style=subMenuStyle;
top="offset=5";
aI("text=Zonar Systems Page;url=#;");
aI("text=RFID;url=#");
.
.
.
}

Quote:

Is there an easy way to add another seperator image to the right side of the menu?

I'm not sure what you mean by "another separator image"... I don't see the first one. Can you be more specific?

Hope that helps,

Kevin

Poster: goodtech
Dated: Saturday January 3 2004 - 17:19:37 GMT

Thanks for the help on the first questions.

The seperator that I was referring to is after the last item in the list. The way I made the menu fit in my design was to make the border the same color as my table background. The table is longer than the menu so the last menu item has a starting seperator before it but doesn't have one after it.

It's more of a workaround that I need to figure out and not really part of the menu that's not working..... maybe I can just use an image in the cell.

Thanks again.

Poster: kevin3442
Dated: Sunday January 4 2004 - 7:17:50 GMT

Hi goodtech,

I think a simple solution might be to add a blank dummy menu item at the end of your Main Menu. I can think of two quick ways to do this:

As a "header" item:
(1) In your Main Menu's style (menuStyle in your case), set

Code:

headerbgcolor="#F4B50A";

This is the same as the offbgcolor used for your real menu items.

(2) Add the following menu item to the end of your Main Menu:

Code:

aI("text=;type=header;");

You'll end up with a header item at the right end of your Main Menu; header items don't do anything when clicked or moused over. This one won't have any text, and it's background color will be the same as the off background color of the menu items and of the table, so the user won't know it's there. However, adding a item to the end will force the menu system to put another separator between it and the last "real" menu item.

As a regular menu item:
Add the following menu item to the end of your Main Menu:

Code:

aI("text=;url=javascript://nada;status=;pointer=default;onbgcolor=#F4B50A;");

This will essentially do as above... the extra item will force another separator, but the item will not do anything and will not appear to do anything when moused over.

If you don't mind my saying, you don't really have to use a table to position your menu. You could place your main menu code in menu_data.js, and modify it a little to let the menu system's built-in positioning place it and keep it in the same place as it is now. You'd delete the position setting, set top=70 (or whatever the top location would be for the correct spot), screenposition="center", left="offset=-36" (or minus whatever offset is needed to bump it a little left of center), and menuwidth=762 (or however many px wide you want it). I only mention this because I know that some others have run into issues when placing menus in tables. Just a thought...

Cheers,

Kevin

Industrial Strength JavaScript and DHTML Menus

Sub Menu questions

Re: Sub Menu questions