ایجاد منوی پیمایش با جی کوئری و CSS
ایجاد منوی پیمایش با جی کوئری و CSS

ایجاد منوی پیمایش با جی کوئری و CSS

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

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

HTML

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

<ul>
...
<li>
    <a href="#">
	<img src="images/1.jpg" alt=""/>
	<span class="sdt_active"></span>
	<span class="sdt_wrap">
	<span class="sdt_link">نمونه کارها</span>
	<span class="sdt_descr">فعالیت های من</span>
	</span>
    </a>
    <div class="sdt_box">
	<a href="#">وبسایت ها</a>
	<a href="#">ترجمه ها</a>
	<a href="#">مقاله ها</a>
    </div>
</li>
...
</ul>

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

CSS

ما کار را با استایل مربوط ul اغاز می کنیم.

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

در ابتدا ما تمام زیر خط وحاشیه که بر روی لینک منو ها اعمال میشود را غیر فعال می کنیم.(a)

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

آیتم های لیست ما دارای float:right هستند و همچنین دارای position:relative زیرا ما میخواهیم برای عناصر داخلی آنها از موقعیت متغییر استفاده کنیم.

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

استایل مربوط به عناصر لینک ها اصلی که از دو  span برای نام وتوضیحات استفاده کرده ایم به شکل زیر است.

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	box-shadow:0px 0px 2px #000 inset;
}

همچنین ما برای تصاویر استفاده شده در منو ها از استایل های زیر استفاده کرده ایم(image)

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	box-shadow:0px 0px 4px #000;
}

استایلی که ما برای عنوان و توضیحات استفاده کرده ایم مطابق زیر است(title,description)

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

درصورتی که عناوین شما بسیار طولانی باشند  باید مقادیر بالا را تغییر دهید.

سپس ما برای قسمتی که در زیر منوها هنگام حرکت موس روی منو باز میشود استایل زیر را اعمال می کنیم.ما مقدار ارتفاع آنرا برابر با ۰ قرار می دهیم و موقعیت آن را برابر با absolute قرار می دهیم و سپس بسته به نیاز مقدار آن را افزایش می دهیم.

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	box-shadow:0px 0px 4px #000 inset;
}

سپس برای لینکها داخل زیر منو ها (spanها)از استایل زیر استفاده می کنیم.

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

برای عناوین و توضیحات آنها از استایل زیر

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:right;
	clear:both;
    margin-right: 5px;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
    margin-right: 5px;
    
}

اولین لینک در زیر منو ها دارای top-margin هستند که در زیر مشاهده می کنید.

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

جاوااسکریپت

وقتی ما با موس روی منوها قرار می گیریم تصویر مربوط به هر منو بزرگ میشود و نمایش داده میشود و دو تگ span به نام های sdt_active و sdt_wrap فراخوانی میشوند.اگر منو دارای زیر منو باشد ما آن را نمایش می دهیم(بصورت اسلاید).ما تمام کار ها را با کد زیر انجام می دهیم.

 $(function() {
				
       $('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
		.stop(true)
		.animate({
		'width':'170px',
		'height':'170px',
		'right':'0px'
		},۴۰۰,'easeOutBack')
		.andSelf()
		.find('.sdt_wrap')
		 .stop(true)
		 .animate({'top':'140px'},500,'easeOutBack')
		 .andSelf()
		 .find('.sdt_active')
		 .stop(true)
		 .animate({'height':'170px'},300,function(){
		var $sub_menu = $elem.find('.sdt_box');
		    if($sub_menu.length){
		    var right = '170px';
		    if($elem.parent().children().length == $elem.index()+1)
		    left = '-170px';
                  $sub_menu.show().animate({'right':right},200);
		}	
	     });
	}).bind('mouseleave',function(){
	 var $elem = $(this);
	 var $sub_menu = $elem.find('.sdt_box');
		 if($sub_menu.length)
		 $sub_menu.hide().css('right','0px');
					
		 $elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			  .andSelf().find('img')
			  .stop(true)
			  .animate({
			  'width':'0px',
			  'height':'0px',
			   'right':'85px'},400)
			   .andSelf()
		          .find('.sdt_wrap')
			  .stop(true)
			  .animate({'top':'25px'},500);
		 });
 });

پایان

0
0


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

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

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

۳ دیدگاه ها

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

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

  3. سلام ممنونم مطالب فوق العاده مفیدی بود
    موفق باشید کوتاه کننده لینک

دیدگاه خود را برای ویپ بنویسید انصراف از پاسخ

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

*


هفت − 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>