jQuery Active Menu Highlight

There are various ways to highlight active menu item. In this tutorial we are using jQuery and CSS for adding menu highlighting style dynamically. In previous tutorial we have seen how to create scrolling menu using jQuery.

In this example we have added menu highlight effects on the click event of the menu item. We are adding class selectors to differentiate other menu item from the active one.

View Demo


Highlight Active Menu using jQuery

The HTML is same as we have seen in previous tutorial jQuery scrolling menu. This code shows jQuery function to highlight active menu on clicking the menu item.

$(document).ready(function (){
		if ($(window).scrollTop() > ($('#scroll-content').height() - $('#scrolling-menu').height())){
			var scroll = $('#scroll-content').height() - $('#scrolling-menu').height();
			return false;
	$('#scrolling-menu div').click(function() { 
		var target = $(this).attr('id');
		$('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
	function highlight_active_menu(obj){

CSS for Menu Highlight

We are using this styles to show the highlighted active menu.

#scrolling-menu{position: fixed;width: 150px;margin-top:10px;}
#scrolling-menu div{line-height:40px;padding:0px 10px;margin-bottom:1px;background: #C7B3B3;color: #F0F0F0;cursor:pointer;}
.active-menu-tile:after{content:"";border-color: transparent transparent transparent #C7B3B3;border-style:solid;border-width:18px;
#scroll-content{border-left:#C7B3B3 4px solid;margin-left:150px;padding-left:60px;color:#E0403A;}
#scroll-content div{margin-bottom: 60px;}

View DemoDownload

This jQuery code tutorial was published on June 21, 2015.

↑ Back to Top