setting a different menu bg depending on page

[bduenskie]

I'm looking to change the menu's background color depending on the page the user is on. For instance on the homepage I want the menu bg to be white, on secondary pages I want the menu to be black.

Is there an easier way to achieve this than by having two separate menu_data.js files?

[bduenskie]

Anyone know of any possible solutions?

[Ruth]

Hi,

Yes, you can do that.

If you were trying to make the bgcolor different on everypage, then you would do it using a css class on each page, for example .mybgcolor{background-color:whatevercolor} You would put that on each page setting the color whatever you want it on each page. Then in the menu data file in the style section you'd call it as offclass="mybgcolor"; onclass="mybgcolor";

Since you said you only wanted the homepage to be different than the others, I would suggest that you just make two different menu_data.js files, which is a lot simpler. Just copy and paste your existing file and save it as menu_data_mainpage.js. Then in that file change whatever you want for the colors and such. Then on the main page call that file and on all the other pages call the original file with the black background.

You could also set a pagebgcolor="#ffffff"; in the style section and then set all the items in the main menu [if it's only the main menu you want as having a white background] set all the main menu items with pagematch="the url for the homepage";

The problem with that is that you have eliminated using the page settings for matching on any main menu item since they will only show anything when they are on that homepage url.

Hope that made sense. I use css on everypage on my site to make the menu different on every page. Try this link and then just click next for about 4 pages to see the different styled menus. If you look at the source you'll see this long css stuff I put in

http://www.poems2u.com/writings/index506.html

Ruth

[bduenskie]

Instead of doing two separate menu_data.js files I wrote a little function with the menu_data.js to see if the page was the homepage or not.

// change this var depending on the environment
var pagenamecount = document.location.href.lastIndexOf('/');
var pagename = document.location.href.substring(pagenamecount).replace('/', '');

// find out if it's the homepage or a secondary and change the sub-menu style depending
if (pagename == "default.aspx" || pagename == "")
{
put the settings you want for the homepage here
}
else
{
put the settings for the secondary page here
}

I find this makes it easier than maintaining two separate files.

[Ruth]

Hi,

Thanks for posting this solution. Since I'm function illiterate and there are probably others like me [well, maybe ] could you tell me where you put that and how you called it?

Ruth