ایجاد منوی تصویری با جی کوئری
ایجاد منوی تصویری با جی کوئری

ایجاد منوی تصویری با جی کوئری

امروز در این آموزش قصد دایم تا به شما نحوه ایجاد یک منوی تصویری با جی کوئری را بدهیم .ایده اصلی این آموزش این است که کاربر با کلیک بر روی هر تصویر ،آن تصویر جابجا شده و محتوای داخل آن را برای کاربر نمایش می دهد.با ما همراه باشید.

برای مشاهده لینک وارد شود

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

HTML

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

<div class="content">
	<h1>بازکردن منوهای تصویری با جی کوئری</h1>
	<div id="ei_menu" class="ei_menu">
	    <ul>
		<li>
		  <a href="#" class="pos1">
		     <span class="ei_preview"></span>
		      <span class="ei_image"></span>
		   </a>
		   <div class="ei_descr">
			<h2>مجید محمد نژاد</h2>
		        <h3>برنامه نویس وب</h3>
			<p>
			    شروع فعالیت برنامه نویسی از سال ۸۷</br>
                            آشنایی کامل با HTML,CSS,jquery</br>
                             موسس شرکت برنامه نویسان نوین پندار
			</p>
			<p>
			    در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.
			</p>
		</div>
	</li>
.
.
.

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

CSS

کدهای مربوط به استایل به دلیل سادگی نیازی به توضیح ندارند و ما فقط بخش هایی که به نظرمان می رسد که شاید کمی گیج کننده باشد را برایتان توضیح خواهیم داد.

در بخش HTML ما برای مشاهده هر تصویر از دو تگ span استفاده کرده ایم.ما برای اعمال استایل مورد نظر برای هر تصویر از کد های زیر استفاده خواهیم کرد.

.ei_preview{
	width:75px;
	height:350px;
	cursor:pointer;
	position:absolute;
	top:0px;
	left:0px;
	background:transparent url(../images/bw.jpg) no-repeat top left;
}

استایل بالا مربوط به تنظیمات مربوط به تصاویر سیاه و سفید می باشد.ما برای تصاویر رنگی نیز از استایل های زیر استفاده خواهیم کرد.

.ei_image{
	position:absolute;
	left:75px;
	top:0px;
	width:75px;
	height:350px;
	opacity:0.2;
	background:transparent url(../images/color.jpg) no-repeat top left;
}

همچنین ما برای توضیحات هر عکس نیز از استایل های زیر بهره خواهیم برد.فقط به خاطر داشته باشید که  فونت های مربوط گوگل فونت را نیز وارد نمایید.

.ei_descr{
	position:absolute;
	width:278px;
	height:310px;
	border-right:7px solid #f0f0f0;
	padding:20px;
	left:75px;
	top:0px;
	background:#fff;
}

بازهم یادآور می شویم که کدهای بالا تنها بخشی از کدهای مربوطه است(بخش های نیاز به توضیح) و شما برای مشاهده کامل کدها به سورس مراجعه فرمایید.

جاوااسکریپت

مهمترین بخش این آموزش مربوط به کدهای جاوااسکریپت می باشد که توضیحات مربوط به هر بخش را در داخل کدها برایتان قرار داده ایم پس از توضیحات اضافی اجتناب می کنیم.

$(function() {
 var $menu = $('#ei_menu > ul'),
 $menuItems = $menu.children('li'),
 $menuItemsImgWrapper= $menuItems.children('a'),
 $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
 totalMenuItems = $menuItems.length,
 
 ExpandingMenu = (function(){
 /*
 @current
 تنظیم آن برای ایندکس عنصری که شما میخواهید به طور پیش فرض باز شود،
 یا انتخاب -۱ اگر خواهان این هستید که منو در ابتدا بستهباشد.
 */
 var current = -1,
 /*
 @anim
 اگر بخواهیم که انیمیشن آیتم ها در ابتدابطور پیش فرض باز شوند مقدار آن را مانند زیر قرار دهید.
 */
 anim = true,
 /*
 بررسی درست بودن مقدار current
 بین ۰ و تعداد آیتم ها
 */
 validCurrent = function() {
 return (current >= 0 && current < totalMenuItems);
 },
 init = function() {
 /* نمایش آیتم پیش فرض درصورت معتبر بودن مقدار ایندکس*/
 if(validCurrent())
 configureMenu();

 initEventsHandler();
 },
 configureMenu = function() {
 /* دریافت آیتم ها برای Curent */
 var $item = $menuItems.eq(current);
 /* اگر مقدار anim=true باشد اسلاید کردن آیتم*/
 if(anim)
 slideOutItem($item, true, 900, 'easeInQuint');
 else{
 /* اگر نه،فقط آنها را نمایش بده */
 $item.css({width : '400px'})
 .find('.ei_image')
 .css({left:'0px', opacity:1});

 /* کم کردن میزان تاری آیتم های دیگری */
 $menuItems.not($item)
 .children('.ei_preview')
 .css({opacity:0.2});
 }
 },
 initEventsHandler = function() {
 /*
 هنگام کلیک روی آیتم ها اتفاقات زیر می افتد.:
 ۱) اگر ایتم باز باشد،آن را می بندد!
 ۲) اگر آیتم بسته باشد،آن را باز می کند(آیتمهای دیکر هم اگر باز باشد آنها را می بندد)
 */
 $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
 var $this = $(this).parent(),
 idx = $this.index();

 if(current === idx) {
 slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
 current = -1;
 }
 else{
 if(validCurrent() && current !== idx)
 slideOutItem($menuItems.eq(current), false, 250, 'jswing');

 current = idx;
 slideOutItem($this, true, 250, 'jswing');
 }
 return false;
 });
 },
 /* اگر شما میخواهید یک آیتم خاص را باز کنید. */
 openItem = function(idx) {
 $menuItemsImgWrapper.eq(idx).click();
 },
 /*
 opens or closes an item
 note that "mLeave" is just true when all the items close,
 in which case we want that all of them get opacity 1 again.
 "dir" tells us if we are opening or closing an item (true | false)
 باز کردن یا بستن آیتم ها
 توجه کنید که "mLeave"فقط زمانی مقدار"true"داردکه همه آیتم ها بسته باشند
 در کدام مورد ما میخواهیم تا میزان تاری را دوباره برابر با مقدار ۱ قرار دهیم.
 dirبرای مشخص می کنی که ما میخواهیم آیتم را ببندیم یا باز کنیم.
 */
 slideOutItem = function($item, dir, speed, easing, mLeave) {
 var $ei_image = $item.find('.ei_image'),

 itemParam = (dir) ? {width : '400px'} : {width : '75px'},
 imageParam = (dir) ? {left : '0px'} : {left : '75px'};

 /*
 اگر باز کنیم،ما مقدار تاری تمام عنصر ها را برابر با ۰.۱ قرار می دهیم این عمل باعث میشود تا ما روی آیتم باز شده متمرکز شویم.
 */
 if(dir)
 /*
 جایگزین:
 $menuItemsPreview.not($menuItemsPreview.eq(current))
 .stop()
 .animate({opacity:0.1}, 500);
 */
 $menuItemsPreview.stop()
 .animate({opacity:0.1}, 1000);
 else if(mLeave)
 $menuItemsPreview.stop()
 .animate({opacity:1}, 1500);

 /* the <li> expands or collapses */
 $item.stop().animate(itemParam, speed, easing);
 /* آمدن یا رفتن تصاویر رنگی */
 $ei_image.stop().animate(imageParam, speed, easing, function() {
 /*
 اگر باز باشد،مقدار تاری انیمیشن را برابر با ۱ قرار می دهیم 
 درغیر این صورت ما آن را ریست می کنیم.
 */
 if(dir)
 $ei_image.animate({opacity:1}, 2000);
 else
 $ei_image.css('opacity', 0.2);
 });
 };

 return {
 init : init,
 openItem : openItem
 };
 })();
 
 /*
 فراخوانی متد init
 */
 ExpandingMenu.init();
 
 });

پایان

نویسنده اصلی:ماری لو

مترجم:مجید محمد نژاد

 

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


− 4 = صفر