Menu Item Highlighting

Croaker · Post by **Croaker** » Wed Apr 20, 2005 10:03 am

I would be surprised if this question has not been asked before, but I was not able to find it in the forums.

I have setup a menu which has both direct links and sub-menus. I have set the bgcolor and font color to change when you mouse over an item and to change again when mousing off the item.

The process works fine for any item in the menu structure that is linking to a specific page, regardless of if it is in the main menu or a sub-menu, but if the item is displaying another level in the menu (a sub-menu) than the background colors do not change (the font color does though).

One thing that I noticed tonight was that there is a very small area around the menu items that display additional menus, almost like a border, and that area will display the background color that I had specified. So it almost seems like the process is working but the buttons displaying additional menus are overlaying the background. I have played with most of the settings that would seem to affect the color scheme in the "menu_data.js" file, but have not yet figured out what I have done wrong.

If you wish to view the menu, it is at http://croaker.homelinux.com:8080. The items working are "Home", "News", "Forums", and "SOCM". The items on the main menu not working as anticipated are ""Events", "Games", "Roster", and "Links".

If you need to see the "menu_data.js" file, I will upload it on request.

Any help that you could give me would be greatly appreciated.

Thanks,
Croaker.

Post by **John** » Wed Apr 20, 2005 2:54 pm

First things first. You are ~17 levels down in the menu version you're running. Current is 5.721, which you will need to upgrade to before we can help.

Croaker · Post by **Croaker** » Wed Apr 20, 2005 6:51 pm

John,

I have downloaded the most current file which is 5.721 as you said, and copied the new files into my web site. The "menu_data.js" file looked the same as it was in the previous version, so I did a copy and paste from the old "menu_data.js" to the new one. The menu behaivour is unchanged. Would you have any other ideas about what could be done to correct this?

Thanks,
Croaker.

P.S. I'm surprised I was so far behind. I didn't think I had been running the menu for more than about 8 months. Thanks for letting me know that there was a newer version available.

Post by **John** » Wed Apr 20, 2005 7:32 pm

Hi Croaker -

The problem is in your css, but I've got a meeting and can't continue right now (maybe Ruth can take a look meanwhile - hopefully she won't yell at me this time because I didn't say the "O" word!).

See http://www.west.asu.edu/sa/testsite/index2.htm. This is without the css call. I believe things are working right (roll-over colors, etc.). With the css in there background colors 'stick', at least one menu opens mostly off-screen, etc.

See what you think.

Croaker · Post by **Croaker** » Wed Apr 20, 2005 7:40 pm

John,

You got the colors to stick, but they are there all the time. What I like is the idea that when a page is first displayed all of the background colors are grayish with darker text. As a mouseover occurs, the color changes to the light green and that background color than sticks to show what has been moused over. I also like the fact that when you mouse off the item that goes to the page currently being displayed than the background changes to white. I know these are asthectic prefrences, but if possible I would like to keep them.

Thanks for all the help.

Croaker.

Post by **Ruth** » Wed Apr 20, 2005 10:20 pm

Hi Croaker,

The behavior you want is an anomaly. It was something that happened when a bgimage was declared and also an offbgcolor. When you mouseoff instead of returning to the bgimage, it just showed the offbgcolor, that is your lime. That was fixed at some point. It wasn't supposed to do that.

The problem with the extra border or what looks like extra menu items is the result of your generic css for tables

Code: Select all

TABLE { 	BORDER-RIGHT: black 2pt ridge; PADDING-RIGHT: 0.75pt; BORDER-TOP: black 2pt ridge; PADDING-LEFT: 0.75pt; PADDING-BOTTOM: 0.75pt; BORDER-LEFT: black 2pt ridge; COLOR: #000000; PADDING-TOP: 0.75pt; BORDER-BOTTOM: black 2pt ridge; BACKGROUND-COLOR: #e1e1e1; berder-style: ridge; cellspacing: 1; cellpadding: 0
}
TH { PADDING-RIGHT: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-BOTTOM: 0.75pt; COLOR: yellow; PADDING-TOP: 0.75pt; BACKGROUND-COLOR: #000040
}
TD { BORDER-RIGHT: #c0c0c0 thin solid; PADDING-RIGHT: 6px; BORDER-TOP: #c0c0c0 thin solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; BORDER-LEFT: #c0c0c0 thin solid; PADDING-TOP: 6px; BORDER-BOTTOM: #c0c0c0 thin solid
}

With that removed you get the correct behavior to the menu. I think, if it is possible to do what you want and show a green color for an item that was moused over and then off, you would need some kind of custom javascript function. The problem is, perhaps the person hasn't really moused over and looked at an item, maybe the mouse just caught it as it passed to something else on the page. You have no way of knowing that. I believe clickbgcolor and clickcolor will do what you want [maybe]. I've not used or tested it, but it's supposed to change the bgcolor and color to what you set after the item has been clicked. There is also a visitedcolor, which I believe changes the text color for a link that has been visited.

You can find links to a list of properties for the menu below my name to look at some of these things. Hope that helps.

Ruth

Croaker · Post by **Croaker** » Wed Apr 20, 2005 10:33 pm

John and Ruth,

Thank you both for your replies and help. It just figures that something I liked turned out to be an anomaly that I happened into because I didn't know any better.

I'll check the links that you mentioned and see what I can put together from there.

Croaker.