How to set css class on active menu item using a masterpage?

How to set the Active menu item color when i click the sub submenu items or main item in asp.net master page.

My code is (master page source)

<ul class="art-menu">
      <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="{ActiveItem}"><span class="l"></span><span class="r"></span><span
                            class="t">Submission</span> </a>
                            <ul>
                                <li><a href="../QuoteStatus.aspx" rel="nofollow noreferrer noopener">Search Submission</a></li>
                                <li><a href="../NewQuote.aspx" rel="nofollow noreferrer noopener">New Submission</a></li>
                            </ul>
                        </li>
                        <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><span class="l"></span><span class="r"></span><span class="t">Requests</span></a>
                            <ul>
                                <li><a href="../Requests/IssueCertificates.aspx" rel="nofollow noreferrer noopener">Issue Certificates</a></li>
                                <li><a href="../Requests/QuoteCancellation.aspx" rel="nofollow noreferrer noopener">Cancellation</a></li>
                                <li><a href="../Requests/LossRuns.aspx" rel="nofollow noreferrer noopener">Loss Runs</a></li>
                                <li><a href="../Requests/Endorsements.aspx" rel="nofollow noreferrer noopener">Endorsements</a></li>
                            </ul>
                        </li>
                        <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><span class="l"></span><span class="r"></span><span class="t">Reports</span></a>
                        </li>
                        <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><span class="l"></span><span class="r"></span><span class="t">Configuration</span></a>
                            <ul>
                                <li><a href="../Administration/UserInformation.aspx" rel="nofollow noreferrer noopener">User Information</a></li>
                                <li><a href="../SignUp.aspx" rel="nofollow noreferrer noopener">New User</a></li>
                                <li><a href="../Administration/AdminSettings.aspx" rel="nofollow noreferrer noopener">Admin Settings</a></li>
                            </ul>
                        </li>
</ul>

how to write the code , please give me suggestion about that…

thank u
hemanth

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is what I do. There could be a better way. You can try it.

NOTE: your link should have runat="server" so you can access them from code-behind

protected void Page_Load(object sender, EventArgs e)
{            
    string curlink = Request.RawUrl;

    if (curlink.Contains("/administration/school")) 
    {
        schoolinfolink.Attributes["class"] = "selected";
    }
    else if (curlink.Contains("/administration/result"))
    {
        resultlink.Attributes["class"] = "selected";
    }
    else if (curlink.Contains("/administration/staff"))
    {
       staffslink.Attributes["class"] = "selected";
    }

}

Method 2

I am not familier to ASP , but in php for instance I’ll handle it by adding a function that
will check which page is the current page.
I will call it above the HTML and then you can use it.

Algorithem:

1.Get current URL

2.Fetch the current file name out of it

3.save the current file name as a variable (“selectedPage”)

4.When printing the menu out , use condition to compare the “selectedPage” to the item’s file name.

Consider printing the menu using an array and a loop (so instead X conditions , you’ll have to write just one)

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0