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.
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>
<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>
</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(){}
);
});
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.