How to highlight active page in a masterpage menu only not the submenus?

Question

I have a menu inside a masterpage (in a ASP.NET Web site), and I want to highlight active page in masterpage menu only not the 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>

See this answer: http://stackoverflow.com/a/17233143/3509874 — urbz, Aug 04 '14 at 11:37

score 2 · Answer 1 · answered Dec 08 '14 at 10:38

Use this Javascript

 function LoadActiveMenu()
    {
        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");
            }
        });
     }

and call this function on body load event like below

<body onload="LoadActiveMenu();">
</body>

score 1 · Answer 2 · answered Aug 04 '14 at 11:29

I am not giving you perfect solution but in this way it will help you

var pathname = window.location.pathname;
    var queryStr = window.location.search;
    var leftStr = "/" + pathname.split('/')[pathname.split('/').length - 1];
    var leftStr2 = "/" + pathname.split('/')[pathname.split('/').length - 2];
    $('.nav   ul  li  a').each(function () {
        var href = $(this).attr('href');

        if (href != undefined) {
            var urlLink = "/" + href.split('/')[href.split('/').length - 1];
            if (leftStr == urlLink) {
                $(this).parent().addClass('active');
                $(this).parent().find('ul').show();
                $(this).parent().parent('ul').show();
            }
            else if (leftStr2 == urlLink) {
                $(this).parent().addClass('active');
                $(this).parent().find('ul').show();
                $(this).parent().parent('ul').show();
            }
        }
    });

This is a example code you can take a reference of given code, please let me know if something is not understandable, I'll explain more

How to highlight active page in a masterpage menu only not the submenus?

2 Answers2