jQuery Menu Slider

This jQuery menu slider used to move menu links horizontally on hover. It shows a list of menu labels and highlights active menu with the screen shot. In a previous tutorial, we have seen about how to highlight an active menu item.

In this slider example, we have used a jQuery UI sliding function to move menu screen shots horizontally. We link the screenshots to the corresponding menu tutorial.

View Demo

jquery-menu-slider

Sliding Menu HTML

This code will display a left menu and the hyperlinked screenshots of the menu tutorial demo. All screenshots are hidden excepts the one for the highlighted menu item.

<div id="demo-menu">
	<div class="menu-title active" id="dropdown">Dropdown Menu</div>
	<div class="menu-title" id="multilevel">Multi-Level Menu</div>
	<div class="menu-title" id="mega">Mega Menu</div>
	<div class="menu-title" id="expand-collapse">Menu Expand</div>
	<div class="menu-title" id="highlight">Menu Highlight</div>
</div>

<div id="slider-div">
	<a href="http://phppot.com/jquery/jquery-menu-dropdown/"><img id="dropdown-image" src="dropdown_menu.PNG"></a>
	<a href="http://phppot.com/css/multilevel-dropdown-menu-with-pure-css/"><img id="multilevel-image" src="multilevel.PNG"></a>
	<a href="http://phppot.com/jquery/jquery-mega-menu/"><img id="mega-image" src="mega.PNG"></a>
	<a href="http://phppot.com/jquery/header-menu-horizontal-expand-collapse-using-jquery/"><img id="expand-collapse-image" src="expand-collapse.PNG"></a>
	<a href="http://phppot.com/jquery/jquery-active-menu-highlight/"><img id="highlight-image" src="menu-highlight.PNG" alt="" /></a>
</div>

and the styles are,

#demo-menu{width: 150px;position:absolute;}
#demo-menu .menu-title{display: block;line-height: 35px;padding: 0px 10px;background: #51EFB0;margin-bottom:1px;color: #F4FF00;cursor:pointer;}
#demo-menu .menu-title.active:after {content: "";border-color: transparent transparent transparent #51EFB0;border-style: solid;border-width: 18px;width: 0;height: 0;position: absolute;right: -50px;left: 150px;}
#slider-div{height: 215px;width: 400px;border: #CCC 1px solid;margin-left: 180px;padding: 14px;}
#slider-div img{display:none;position:absolute;}

jQuery Horizontal Sliding

This script is invoked on the mouseover event of the left menu item. It moves menu thumbnail right to left horizontally with jQuery slide effect.

$(document).ready(function() {
  $("#slider-div img").first().show();
  $("#demo-menu .menu-title").hover(
	  function(){
		$('#demo-menu .menu-title').removeClass('active');
		$(this).addClass('active');
		var menu_title = $(this).attr('id');
		$("#slider-div img").hide();  
		$("#"+menu_title+"-image").show("slide",{direction:'right'},500);
	  },
	  function(){}
  );
});

View DemoDownload

This jQuery code tutorial was published on August 25, 2015.

↑ Back to Top