Change CSS class when click on menu item

[10inja]

Hi All,
I took a template from csstemplatesforfree.com
I have a menu in my master page as follows:
<div id="menu">
<ul>
<li id="Inventory" class="active"><a href="Default.aspx" accesskey="1" title="">Inventory</a></li>
<li><a href="#" accesskey="2" title=""></a></li>
<li><a href="#" accesskey="3" title=""></a></li>
<li id="Directions"><a href="Directions.aspx" accesskey="4" title="">Directions</a></li>
<li id="About"><a href="About.aspx" accesskey="5" title="">About</a></li>
<li id="Contact"><a href="Contact.aspx" accesskey="6" title="">Contact</a></li>
</ul>
</div>

My CSS for the active page:
#menu .active a {
height: 37px;
padding-top: 16px;
background-image: url(images/img04.jpg);
color: #327EBE;
}

What do I need to do so that when someone clicks on an item in the menu it changes the class to "active"?

thanks for all the help in advance

[wisemx]

Hi,
You can find some cool CSS effects that use that method and jquery here:
http://www.webdesignerwall.com/tutorials/maximize-the-use-of-hover/

[CrystalCMS]

I noticed you are using <A> tags with HREF so the effective operation of this menu is making a new request for the selected web page from the server. This means the question you have asked is not in the DHTML / JavaScript arena but does require some server side code in your master page to get the desired effect.

Try something like the below in your master page (consider it non-production untested code!):

Decorate your <li> tags as runat="server" to make them accessible in code behind:
<div id="menu">
<ul>
<li id="Inventory" class="active" runat="server"><a href="Inventory.aspx" accesskey="1" title="">Inventory</a></li>
<li><a href="#" accesskey="2" title=""></a></li>
<li><a href="#" accesskey="3" title=""></a></li>
<li id="Directions" runat="server"><a href="Directions.aspx" accesskey="4" title="">Directions</a></li>
<li id="About" runat="server"><a href="About.aspx" accesskey="5" title="">About</a></li>
<li id="Contact" runat="server"><a href="Contact.aspx" accesskey="6" title="">Contact</a></li>
</ul>
</div>

Write some codebehind to change the class based on the currently requested page:
using System;
using System.Collections.Generic;
using System.IO;
using System.Web.UI.HtmlControls;

namespace WebApplication1
{
public partial class SiteMaster : System.Web.UI.MasterPage
{
private Dictionary<string, HtmlGenericControl> ctrls = new Dictionary<string, HtmlGenericControl>();

/// <summary>
/// Raises the <see cref="E:System.Web.UI.Control.Init"/> event.
/// </summary>
/// <param name="e">An <see cref="T:System.EventArgs"/> object that contains the event data.</param>
protected override void OnInit(EventArgs e)
{
ctrls.Add("Inventory.aspx", Inventory);
ctrls.Add("Directions.aspx", Directions);
ctrls.Add("About.aspx", About);
ctrls.Add("Contact.aspx", Contact);
base.OnInit(e);
}

/// <summary>
/// Handles the Load event of the Page control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
protected void Page_Load(object sender, EventArgs e)
{
setSelectedMenuItemClass();
}

/// <summary>
/// Sets the selected menu item class.
/// </summary>
private void setSelectedMenuItemClass()
{
string requestedFile = Path.GetFileName(Request.Path);
if (!string.IsNullOrEmpty(requestedFile))
{
foreach (KeyValuePair<string, HtmlGenericControl> ctrl in ctrls)
{
HtmlGenericControl aCtrl = ctrl.Value;
aCtrl.Attributes.Remove("class");
}

HtmlGenericControl selectedMenuItem;
if (ctrls.TryGetValue(requestedFile, out selectedMenuItem))
selectedMenuItem.Attributes.Add("class", "active");
}
}
}
}

[10inja]

Thanks all.
Thanks Joe, I really appreciate this help. It's all working now. I also have a menu at the bottom so I just created another collection ctrls1 and added the ids of the bottom menu and it's working now.
Gotta finish some other stuff and soon will be released.

[kamalHWZ]

Joe,

This is an awesome post. I applied your code to my MasterPage, it is working like a charm.

Thanks,
Kamal

[sus2bhai]

Hello all,

I'm in DESPERATE need of this one, searching since a week.
Lastly I found that someone got solution.

Could anybody provide a sample or small working example.
I'm almost crying :mad: since a week

please post it to [email address removed]

thanks
please send it
sangamesh

[CrystalCMS]

Rather than emailing it I'll post the sample code here just in case anyone else needs it again in future. This is a Visual Studio 2008 solution and project and the language used was C#.

The primary focus of this sample was to demonstrate how to dynamically change an elements' CSS class at runtime. Most of the content in the project is completely arbitrary - the relevant part is the master page code behind code.

Cheers
Joe

[sus2bhai]

OMG thanks alot...

U saved me..

the thing which i dont understand is, it was the same thing in post, i tried in many ways with no success.

the problem was selectedMenuItem is null reference, which doesnot execute the next line...

Any way thanks once again...
Sangamesh