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/tutor...-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 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