How the HTML Menu will be highlighted when we used the Master Page

Question

0.00/5 (No votes)

See more:

, +

Dear Experts,

I am doing a asp.net (C# 3 tire) project, and am using Master. In master page, html - CSS menu is there..

And when i select a menu, then it will be highlighted. But if we want the menu highlighted i want to add a class name to that html tag.. here is the below example...

HTML

<li class="current"><a href="index.html" class="shortcut-dashboard" title="Dashboard">Dashboard</a></li>

Here Class "Current" is added . so it wil be highlighted...

And my query is...

How can be dynamic this....??

My menu is in the Master Page..? so how is it possible..??

Is there any Javascript or some other way..??

Please help me to solve this problem....

Thanks and Regards,

Dileep

Posted 26-Mar-13 1:36am

dilzz

Add a Solution

Comments

Ian A Davidson 26-Mar-13 7:49am

Hi dilzz, I don't know asp.net, so I'm not posting this as a solution, and I don't quite understand what you're trying to do. What do you mean by "select"? If you mean when a user hovers over it with a mouse, then there is no need to change the class. Use the ":hover" selector in your CSS. E.g. "a.shortcut-dashboard:hover
{
background-color:yellow;
}" Check out all the available selectors, e.g. here http://www.w3schools.com/cssref/css_selectors.asp
However, if you're trying to show the page selected, then I'd do this when I generate the html page itself, changing the class of or style the element as you have suggested.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

satz_770 · Accepted Answer · 2013-03-26T01:49:00

Solution 1

You can do it in JQuery..

C#

$("a.shortcut-dashboard").on("click",function(){
    if(!$("a.shortcut-dashboard").parent().hasClass("current"))
        $("a.shortcut-dashboard").parent().addClass("current");
});

write this inside

$(document).ready(function () {

if this doesn't solve, reply to this.

Mark it if you find this helpful.

Posted 26-Mar-13 1:49am

satz_770

Updated 26-Mar-13 2:53am

v2

Comments

dilzz 26-Mar-13 8:08am

Thank u for ur comment....

Sir, it has some prob.. when the page is post back, then this property will be removed.....
When i added your code, then the menu will be highlighted , but when the page loads completely this wil be removed....
How can we manage this sir..???

Thanks and Regards,

Dileep

satz_770 26-Mar-13 8:18am

you need it every time while the page loads?.. i dint understand it.. pls explain..

dilzz 26-Mar-13 8:24am

After i used this code, when i clicked the menu, the page loads starts, on that time the class will be affected and the menu will be highlighted. But when the page loads complete the class is removed, means the "Highlight" of that menu is disappear, means the menu will be normally like the other menus...

Thanks and Regards,

Dileep

satz_770 26-Mar-13 8:54am

updated the soln.. pls check.

dilzz 26-Mar-13 9:15am

Sir, I have already used this code inside the document ready function in the master page ..

but still not solved.... :(

Thanks and Reagrds,
Dileep

satz_770 26-Mar-13 9:38am

So, you must be changing it somewhere in your code.. try to find it...

dilzz 28-Mar-13 12:17pm

Sorry Sir,,

Its my Fault...
Your Code is perfectly Working.....

Thanks a lot sir...... Thank You Very Much...... :)