Highlight current page menu item with jQuery

By highlighting the current page navigation menu item helps the users to know, at what page they are now.

You can simply do this with jQuery, to highlight menu item according to the current page.

Highlight current page menu item with jQuery


Contents

  1. Without submenu
  2. With submenu
  3. Conclusion

 


 

1. Without submenu

In this example, I am creating a basic menu layout which has few menu items.

HTML

Creating menu items using <ul> <li> elements.

<ul class='menu'>
 <li><a href="index.html">Home</a></li>
 <li><a href="javascript.html">JavaScript</a></li>
 <li><a href="blog.html">Blog</a></li>
</ul>

CSS

/* Menu */
.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: darkturquoise;
}

.menu li {
 float: left;
}

.menu li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

.menu li ul{
 display: none;
}

.menu li a:hover {
 background-color: #2b90f5;
}

.active{
 background: #2b90f5;
}

jQuery

On the document ready state gets the current page URL and filter filename from it in 3 steps –

  • Remove # value if there is.
  • Remove parameters if there is.
  • Extract file name.

If the file name is empty then set index.html as a default value.

Loop through all menu items and check the filename in it.  If file name matched then add the active class.

$(document).ready(function() {

 // Get current page URL
 var url = window.location.href;

 // remove # from URL
 url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

 // remove parameters from URL
 url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

 // select file name
 url = url.substr(url.lastIndexOf("/") + 1);
 
 // If file name not avilable
 if(url == ''){
 url = 'index.html';
 }
 
 // Loop all menu items
 $('.menu li').each(function(){

  // select href
  var href = $(this).find('a').attr('href');
 
  // Check filename
  if(url == href){

   // Add active class
   $(this).addClass('active');
  }
 });
});

Output

Navigate to the menu. Open in new tab.


 

2. With submenu

I am extending the above example, by adding sub menu items.

HTML

Creating menu and sub menu items using <ul> <li> elements.

<ul class='menu'>
 <li><a href="index.html">Home</a></li>
 <li><a href="javascript.html">JavaScript</a>
  <ul class='submenu'>
   <li><a href="angular.html">AngularJS</a></li>
   <li><a href="jquery.html">jQuery</a></li>
   <li><a href="react.html">React JS</a></li>
  </ul>
 </li>
 <li><a href="blog.html">Blog</a></li>
</ul>

CSS

/* Menu */
.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: darkturquoise;
}

.menu li {
 float: left;
}

.menu li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

.menu li ul{
 display: none;
}

.menu li a:hover {
 background-color: #2b90f5;
}

.active{
 background: #2b90f5;
}

/* sub menu */
.submenu{
 position: absolute;
 list-style: none;
 color: black;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 padding-left: 0;
}

.submenu li{
 width: 100%;
 float: none;
}
.submenu li a{
 color: black;
}
.submenu li a:hover{
 background-color: #ddd;
}

.menu li:hover .submenu{
 display: block;
}

.subactive{
 background: #ddd;
}

jQuery

Similar to the first example, extract the filename from the current page URL and looping on .menu li elements.

If the file name matched with menu item then check the element parent class if it is equal to submenu then add subactive class and again select parent of the menu item to add the active class to it.

$(document).ready(function() {

 // Get current page URL
 var url = window.location.href;

 // remove # from URL
 url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

 // remove parameters from URL
 url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

 // select file name
 url = url.substr(url.lastIndexOf("/") + 1);
 
 // If file name not avilable
 if(url == ''){
 url = 'index.html';
 }
 
 // Loop all menu items
 $('.menu li').each(function(){

  // select href
  var href = $(this).find('a').attr('href');

  // Check filename
  if(url == href){

   // Select parent class
   var parentClass = $(this).parent('ul').attr('class');
 
   if(parentClass == 'submenu'){
 
    // Add class
    $(this).addClass('subactive');
    $(this).parents('.menu li').addClass('active');
   }else{

    // Add class
    $(this).addClass('active');
   }
 
  }
 });
});

Output

Navigate to the menu. Open in new tab.


 

3. Conclusion

Using above script you can automatically highlight navigation menu item with jQuery whenever page load.

Customize the script according to the complexity of menu items.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *