Change CSS class when click on menu item

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

 

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/

 

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:

Code:

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

Code:

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");                                        
            }
        }
    }
}

 

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.

 

Thank You

Joe,

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

Thanks,
Kamal

 

sample

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

 

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

 

Thanks a lot

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