jQuery Menu Slider

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

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

View Demo


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 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>

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(
		$('#demo-menu .menu-title').removeClass('active');
		var menu_title = $(this).attr('id');
		$("#slider-div img").hide();  

View DemoDownload

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

↑ Back to Top