Sub Menu questions

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
goodtech
Beginner
Beginner
Posts: 2
Joined: Fri Jan 02, 2004 8:47 pm

Sub Menu questions

Post by goodtech »

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Re: Sub Menu questions

Post by kevin3442 »

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: Select all

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: Select all

with(goodmenu=new menuname("products")){
style=subMenuStyle;
aI("text=Zonar Systems Page;url=#;");
aI("text=RFID;url=#");
.
.
.
}
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: Select all

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: Select all

with(goodmenu=new menuname("products")){
style=subMenuStyle;
top="offset=5";
aI("text=Zonar Systems Page;url=#;");
aI("text=RFID;url=#");
.
.
.
}
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
goodtech
Beginner
Beginner
Posts: 2
Joined: Fri Jan 02, 2004 8:47 pm

Post by goodtech »

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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: Select all

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: Select all

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: Select all

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
Post Reply