Highlight Active Menu Items In Master Page

I am using a master for my menu items. Since I am using master page, I am confused how to highlight active menu item. Can anyone help me out. Since I have 4 pages, I tried this bel

Solution 1:

Based on the Page you are in, cant you set the active item using Jquery in document.ready ? Not a Good practise though.. this might require a code change if menu items increase.

Solution 2:

use CSS for active menu like

active{    
        background-color: #CDE3F7;    
        border-radius: 5px;    
        color: #000000;   
        text-decoration: none;   
      }

Solution 3:

@user3003821 - check this out Dirty, but works

MasterPage HTML :

<divid="MenuHolderDiv"><ul><liclass="menuLst"><ahref="#"id="MenuItem1"onclick="redirectOnClick(this)">MenuItem1</a></li><liclass="menuLst"><ahref="#"id="MenuItem2"onclick="redirectOnClick(this)">MenuItem2</a></li><liclass="menuLst"><ahref="#"id="MenuItem3"onclick="redirectOnClick(this)">MenuItem3</a></li><liclass="menuLst"><ahref="#"id="MenuItem4"onclick="redirectOnClick(this)">MenuItem4</a></li></ul></div></div>

Master Page: Script:

<scripttype="text/javascript">
        $(document).ready(function () {
            var pageName = getPageName(window.location.href);
            $("#" + pageName).addClass("active");
            $("#" + pageName).parent().addClass("activeLst");
        });
        functiongetPageName(url) {
            var index = url.lastIndexOf("/") + 1;
            var filenameWithExtension = url.substr(index);
            var filename = filenameWithExtension.split(".")[0];
            return filename;                                    
        }
        functionredirectOnClick(item) {
            debugger;
            window.location.href = $(item).text() + ".aspx";
        }
    </script>

StyleSheet:

.menuLst
{
    float:left;
    display:inline;
    background-color:Gray;
    padding:2x;
}
.menuLsta
{
   color:Black;
   text-decoration:none;
}
.menuLsta:hover
{
   color:white;
   text-decoration:none;
}

.menuLsta:active
{
   color:Green;
   text-decoration:none;
}
.menuLst:hover
{
   background-color:Black;
   text-decoration:none;
}
.active
{
    color:Green !important;
   text-decoration:none;
}
.activeLst
{
    background-color:Black;
}

Condition: PageName and ID used for Menu Item must be same

Solution 4:

use asp.net menu control like below...

<asp:MenuWidth="100%"ItemWrap="true"ID="SelectMenu"runat="server"DynamicHorizontalOffset="2"StaticSubMenuIndent="10px"CssClass="menubar"Orientation="Horizontal"><DynamicHoverStyleCssClass="menuitem-hover" /><DynamicMenuItemStyleHorizontalPadding="2px"CssClass="menuitem" /><DynamicMenuStyleBackColor="#F7F6F3"CssClass="IE8Fix" /><DynamicSelectedStyleCssClass="menuitemsel" /><StaticHoverStyleForeColor="Yellow" /><StaticMenuItemStyleHorizontalPadding="15px"VerticalPadding="0px"CssClass="menu" /><StaticSelectedStyleCssClass="menuitemselstatic" /><Items></items></asp:Menu>

Solution 5:

Working with Bootstrap and jQuery

$(function () {
        $(".navbar‐btn a").each(function () {                  
            if (this.href.trim().split("/").splice(3, 4)[0] == window.location.pathname.split("/").splice(1, 1)[0])
                $(this).parent().addClass("active");
        });
    })