Multicolor Tabbed Menu using jQuery and CSS

Multicolor Tabbed Menu using jQuery and CSS

  •  
  •  
  •  
  •   
  •  

Tabbed menu is getting quite popular with many well known websites and blogs. The reason for its fame is its easy to navigate functions. When you Google, you get various kinds of Tabbed Menu tutorials, but most of them give almost the pretty same look.

Multicolor Tabbed Menu

In this post we are going to teach you how to create a multicolor tabbed menu using jQuery and CSS. Before getting into the tutorial, download jQuery and place it on your server. Then change the jQuery path and link up using the script below.

  

To make the installation simple, we have included the CSS file in this download link. After downloading the file, upload the CSS file to your server and add the path as shown in the script.


The jQuery uses four set of functions to perform the multicolored tabbed menu. So initially, do the first function search for active menu and select the appropriate class.

Search for active class and select appropriate class.

jQuery(document).ready(function(){
 jQuery(".current").removeClass("current");
 jQuery(".active").addClass("current1");
 if (jQuery("#horiz-menu li").is('.active'))
 {

 }
 else {
    jQuery("#horiz-menu li:first").addClass("current1");
    jQuery("#horiz-menu li ul").show();
 }
 jQuery("#horiz-menu li.active ul").show();
 if (jQuery(".active").is('.menu1')) {
	jQuery(".menu_bottom").css("background", "#13100E");
	jQuery("li.menu1 ul").show();
 } else if (jQuery(".active").is('.menu2')) {
	  jQuery(".menu_bottom").css("background", "#4e004e");
	  jQuery("li.menu2 ul").show();
 } else if (jQuery(".active").is('.menu3')) {
 	  jQuery(".menu_bottom").css("background", "#da1ca0");
	  jQuery("li.menu3 ul").show();
 }

The click effect performs the action, once the menu is clicked to change from active menu to the clicked menu.

Click Function:

// click effect

jQuery("ul.menu li").click(function() {
  jQuery(".current1").removeClass("current1");
  jQuery(".active").removeClass("active");
  jQuery(this).addClass("active");
  jQuery(this).addClass("current1");
  jQuery("#horiz-menu li ul").hide();
  if (jQuery(".current1").is('.menu1')) {
	jQuery(".menu_bottom").css("background", "#13100E");
 	jQuery("li.menu1 ul").show();
  } else if (jQuery(".current1").is('.menu2')) {
	jQuery(".menu_bottom").css("background", "#4e004e");
	jQuery("li.menu2 ul").show();
  } else if (jQuery(".current1").is('.menu3')) {
 	jQuery(".menu_bottom").css("background", "#da1ca0");
	jQuery("li.menu3 ul").show();
  }
});

Mouse over effect function is used to display the sub menus of the hovered menus other than active.

Mouse Over Function:

// mouse hover effect

jQuery("ul.menu li").mouseover(function() {
  jQuery(".current").removeClass("current");
  jQuery(this).addClass("current");
  jQuery("#horiz-menu li ul").hide();
  if (jQuery(".current").is('.menu1')) {
	jQuery(".menu_bottom").css("background", "#13100E");
	jQuery("li.menu1 ul").show();
  } else if (jQuery(".current").is('.menu2')) {
	jQuery(".menu_bottom").css("background", "#4e004e");
	jQuery("li.menu2 ul").show();
  } else if (jQuery(".current").is('.menu3')) {
	jQuery(".menu_bottom").css("background", "#da1ca0");
	jQuery("li.menu3 ul").show();
  }
});

This step exactly works vice versa to the mouse over effect. So the mouse out effect function will highlight the active menu.

Mouse Out Function:

// mouse out effect
jQuery("ul.menu li").mouseout(function() {
  jQuery(this).removeClass("current");
  jQuery("#horiz-menu li ul").hide();
  jQuery("#horiz-menu li.current1 ul").show();
  if (jQuery(".current1").is('.menu1')) {
	jQuery(".menu_bottom").css("background", "#13100E");
	jQuery("li.menu1 ul").show();
  } else if (jQuery(".current1").is('.menu2')) {
	jQuery(".menu_bottom").css("background", "#4e004e");
	jQuery("li.menu2 ul").show();
  } else if (jQuery(".current1").is('.menu3')) {
	jQuery(".menu_bottom").css("background", "#da1ca0");
	jQuery("li.menu3 ul").show();
}});

});

The script used in this tutorial has been shortened to explain, so for implementation, please use the source provided in the downloadable zip file. If you have any doubts in implementing this functionality, drop in your queries in the Comments section.

Dot Com Infoway has created an example for multicolor tabbed menu using jQuery and CSS. To view this example please click here.

, ,

Open chat
1
Hello
Can I help you?