jQuery: Selected state of menu item with ASP.NET Master Page

How to add selected states to your navigation using jQuery.

Here’s a simple jQuery solution for adding selected states to your navigation.
The sample HTML looks like this:
And the sample CSS:
li {
background-color: white;
color: black;
padding: 5px 10px;
}
li.selected {
background-color: black;
color: white;
}
And the corresponding jQuery:
$(document).ready(function() {
// store url for current page as global variable
current_page = document.location.href
// apply selected states depending on current page
if (current_page.match(/home/)) {
$(“ul#navigation li:eq(0)”).addClass(‘selected’);
} else if (current_page.match(/services/)) {
$(“ul#navigation li:eq(1)”).addClass(‘selected’);
} else if (current_page.match(/about/)) {
$(“ul#navigation li:eq(2)”).addClass(‘selected’);
} else if (current_page.match(/information/)) {
$(“ul#navigation li:eq(3)”).addClass(‘selected’);
} else if (current_page.match(/contact/)) {
$(“ul#navigation li:eq(4)”).addClass(‘selected’);
} else { // don’t mark any nav links as selected
$(“ul#navigation li”).removeClass(‘selected’);
};
});
 
How does it work?

First we capture the url of the current page in a variable. Then we use that variable to write conditions based on a regular expression (e.g. if the current url contains the word ‘about’). Finally, we use the :eq(index) selector to target the corresponding

  • and add a class of selected.
The only thing that’s remotely tricky here is the :eq(index) selector. This allows you to use an index to target a specific element within a larger array of matched elements.

So in our example, ul#navigation li would return an array of all five

  • elements whereas ul#navigation li:eq(4) would return only the fifth
  • . This saves us the trouble of having to apply a unique id to each list item.
A few gotchas.
g modifier continue searching after first match, i  modifier tells to search for case-sensitive sensitive search. It will match regardless of capital or small caps 
Make sure your regular expression matchers are not too general or you might end up adding selected states to the wrong pages. For example, this might not be a good solution for a blog where the slugs correspond to post tiles.
Make sure to include the most recent version of jQuery in your head element.
Make sure jQuery is loaded before the script for your selected navigation.
Don’t forget to place your script inside the document ready function. Otherwise your script will run before the DOM is fully loaded – and do nothing.

User control – navigation menu:

<ul class=”NavigationMenuItem_UL”>
<li id=”Supporters”><a href=”Default.aspx?Page=Supporters” class=”MenuSelected”>Supporters</a></li>
<li id=”Fundraisers”><a href=”Default.aspx?Page=Fundraisers”>Fundraisers</a></li>
<li id=”Results”><a href=”Default.aspx?Page=Results”>Results</a></li>
<li id=”Budget”><a href=”Default.aspx?Page=Budget”>Budget</a></li>
<li id=”QA”><a href=”Default.aspx?Page=QA”>QA</a></li>
<li id=”Management”><a href=”Default.aspx?Page=Management”>Management</a></li>
<li id=”Sites”><a href=”Default.aspx?Page=Sites”>Sites</a></li>
<li id=”Codes”><a href=”Default.aspx?Page=Codes & Settings”>Codes & Settings</a></li>
</ul>

 

ASP.NET Master page

Inside head tag:

<head runat=”server”>
<title></title>
<asp:PlaceHolder runat=”server”>
http://Scripts/jquery-2.2.0.js
http://Scripts/jquery-2.2.0.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js
http://Scripts/javascript-local.js

</asp:PlaceHolder>

</head>

Inside form tag

<form id=”form1″ runat=”server”>
<%– Load javascript function –%>

window.onload = function () {
//dom not only ready, but everything is loaded
JavascriptLocalMain();
};

//$(document).ready(function () {
// JavascriptLocalMain();
// //$(‘.NavigationMenuItem_UL li a’).click(function () {
// // JavascriptLocalMain();
// // //alert(“from the master page.”);
// //});

//});

</form>

Alternative method for $document.ready()- inside code behine file of master page

//ScriptManager.RegisterStartupScript(this, this.GetType(), “JavascriptLocalMain”, “JavascriptLocalMain();”, true);

CSS file:

.NavigationMenuItem_UL li {
list-style:none;
display:inline-block;
text-align:center;
border:2px solid #eee3e3;
}
.NavigationMenuItem_UL li a{
display:block;
line-height:40px;
padding:0px 5px;
background-color: red;
color:#fff;
}
.NavigationMenuItem_UL li.active a{
display:block;
line-height:40px;
padding:0px 5px;
background-color: #ede6e6;
/*background-color: blue;*/
color:black;
}
.NavigationMenuItem_UL li a:hover {
background-color: #f1e1e1;
color:black;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s