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

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

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

1 solution

Solution 1

Add your solution here

Preview 0

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

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us