Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to highlight active page in a masterpage menu?

I have a menu inside a masterpage (in a ASP.NET Web site), and i want to highlight active page in masterpage menu and submenus.

HTML:

<ul id="nav" class="sf-menu">
    <li class="current-menu-item"><a href="index.html">Home</a></li>    
    <li><a href="page.html">menu-2</a>
       <ul>
          <li><a href="page-full.html">full</a></li>
          <li><a href="page-features.html">featurs</a></li>
          <li><a href="page-typography.html">typography</a></li>
       </ul>
    </li>
</ul>

CSS:

#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
    color: #fe8300;
}

thanks in advance.

like image 688
mehdi Avatar asked Jun 12 '13 07:06

mehdi


People also ask

How to highlight active link when using masterpage?

For Solution 3, you can refer the second post - Highlighting active link when using Masterpage [ ^ ]. Each Hyperlink control has an id. Style the link with that id on the page. E.g., for the page linked to by control id="HyperLink1", create a style on that page that gives a#HyperLink1, say, bold red text.

How to highlight the menu from code behind?

For highlighting the menu from code behind first you need to change your html anchor tag to server side anchor tag. You can do it by adding runat="server" attribute to your anchor tag. then access this anchor tag from code behind and change the class. before that, crete a new class for highlighting the menu. Good luck.

How to add CSS class to master page?

check your url and get the html file name then compare it and set your css class in master page or make a menu UserControl seperate and then put it on master page.

How to change the class of anchor tag for menu bar?

You can do it by adding runat="server" attribute to your anchor tag. then access this anchor tag from code behind and change the class. before that, crete a new class for highlighting the menu.


1 Answers

finally i solved my problem with using jQuery:

    var str=location.href.toLowerCase();
    $("#nav li a").each(function() {
        if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
            $("li.current-menu-item").removeClass("current-menu-item");
            $(this).parent().addClass("current-menu-item");
        }
    });
    $("li.current-menu-item").parents().each(function(){
        if ($(this).is("li")){
            $(this).addClass("current-menu-item");
        }
    });
like image 134
mehdi Avatar answered Oct 14 '22 03:10

mehdi