jQuery Menu Slider

by Vincy. Last modified on April 4th, 2024.

This jQuery menu slider is used to move menu links horizontally on hover. It shows a list of menu labels and highlights the active menu with the screenshot. In a previous tutorial, we have seen about how to highlight an active menu item. Checkout multilevel dropdown to get a hierarchical menu display in the header.

In this slider example, we have used a jQuery UI sliding function to move menu screenshots horizontally. We link the screenshots 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 except 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="https://phppot.com/jquery/jquery-menu-dropdown/"><img id="dropdown-image" src="dropdown_menu.PNG"></a>
	<a href="https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/"><img id="multilevel-image" src="multilevel.PNG"></a>
	<a href="https://phppot.com/jquery/jquery-mega-menu/"><img id="mega-image" src="mega.PNG"></a>
	<a href="https://phppot.com/jquery/header-menu-horizontal-expand-collapse-using-jquery/"><img id="expand-collapse-image" src="expand-collapse.PNG"></a>
	<a href="https://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

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

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

↑ Back to Top

Share this page