ساخت اسلایدر منو در jQuery

اسلایدر منو در jQuery برای انتقال لینک های منو بصورت افقی با هاور شدن ماوس بر روی هر کدام استفاده می شود .

بنابراین قصد داریم در این آموزش قسمتی همانند اسلایدر منویی که در صفحه اصلی سایت دیجی کالا برای نمایش پیشنهادات شگفت انگیز استفاده شده است , را بسازیم.

در این مثال از اسلایدر , ما از تابع اسلاید jQuery UI برای انتقال اسکرین شات ها بصورت افقی استفاده می کنیم.

کد HTML اسلایدر منو

این کد به شما یک منو سمت چپ و اسکرین شات های لینک شده به عنوان محتوا را نمایش می دهد. همه اسکرین شات ها مخفی هستند بجز یکی از اسکرین شات ها که منوی آن هایلایت شده است و کلاس active دارد.

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

<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="expand-collapse">Menu Expand</div>

<div class="menu-title" id="highlight">Menu Highlight</div>

</div>

</div>

و استایل ها بصورت زیر است :

این اسکریپت با رفتن ماوس روی آیتم های منوی سمت چپ فراخوانی می شود. و اشاره گر منو را همراه با افکت اسلاید جی کوئری ,حرکت می دهد.

#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;}

#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 اسلایدر منو

اسکریپت جی کوئری زیر با اجرای رویداد mouse-over بر روی هر کدام از آیتم های منو سمت چپ فراخوانی می شود. و علامت اشاره گر منو را بصورت افقی به همراه اجرای افکت اسلاید jQuery حرکت می دهد

$(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(){}
  );
});