Make Your Menu Item Active Using This Simple Jquery

Today we will make a navigation menu item active using a very simple jQuery! This simple jQuery will check the URL of the current page and see if it matches with the URLs in the menu, and if it matched then an "active" class will be added to the menu item.

HTML Markup

<ul id="header">
<li><a href="http://mybloggeraide.blogspot.com/2014/12/make-your-menu-item-active-using-this.html">This Post URL</a></li>
<li><a href="#">Inactive URL</a></li>
<li><a href="#">Another Inactive URL</a></li>
</ul>

CSS

#header {
display:block;
position: relative;
background:#fff;
height: 65px;
border-top: 5px solid #00aa9f;
border-bottom: 1px solid #d9e0e2;
overflow: hidden;
}
#header li a{
color:#888;
float: left;
display: inline-block;
list-style: none;
height: 60px;
line-height: 60px;
border-right: 1px solid #d9e0e2;
background:#fff;
padding: 0 10px;
text-align:center;
text-decoration: none;
}
#header li a:hover,
#header li a.active {
box-shadow: inset 0 -5px 0 #00aa9f;
color:#555;
}