جستجو در سایت
جدیدترین مطالب
آخرین بازدیدها
بیشترین بازدیدها
مطالب تصادفی

آموزش ساخت منو با jQuery

1391/11/23 نوشته شده توسط admin 2354   بار خوانده شده
دسته ها آموزشی

اگر در دریافت فایل با مشکل مواجه شدید « لینک خراب را گزارش کنید »

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

برای ساخت منو به صورت زیر عمل می کنیم.

1- ابتدا تنظیمات استایل شیت را قرار می دهیم

#menuContainer{
 font-family:Tahoma;
 font-size:11px;
 color:#CCC;
}
.menu{
 float:right;
 text-align:right;
 direction:rtl;
 background-color:#444;
 width:200px;
}
.mtitle a,.mbody a {
 display:block;
 width:200px;
 height:30px;
 color:#fff;
 text-decoration:none;
 cursor:pointer;
}
.mtitle a:hover , .mbody a:hover {
 background-color:#888; 
}

2- تگ هایHTML  مربوط به منو را می نویسیم

<div id="menuContainer">
    <div class="menu" >
        <div class="mtitle">
           <a href="" > منوی اول </a>
        </div>
        <div class="mbody">
           <a href="" > گزینه 1 </a>
           <a href="" > گزینه 2 </a>
           <a href="" > گزینه 3 </a>
        </div>
    </div>
    <div class="menu" >
        <div class="mtitle">
           <a href="" >منوی دوم </a>
        </div>
        <div class="mbody">
           <a href="" > گزینه 1 </a>
           <a href="" > گزینه 2 </a>
           <a href="" > گزینه 3 </a>
           <a href="" > گزینه 4 </a>
        </div>
    </div>    
 </div>   
 

3- دستورات jquery را به صورت زیر می نویسیم

$(document).ready(function(){
  $(".mbody").hide(); 
  $(".mtitle").mouseover(function(){ 
        $(this).next("div").show();
  });
  $(".menu").mouseout(function(){ 
        $(this).children(".mbody").hide();
  });
  $(".menu").mouseover(function(){ 
        $(this).children(".mbody").show();
  });    
 });

برای دریافت نسخه کامل آن از این لینک استفاده کنید.

 

چنانچه در مورد این مطلب، نظر یا پیشنهادی دارید ارسال کنید:

*نام
آدرس پست الکترونیکی
*نظر شما
(تا 500 کاراکتر)
 

مطالب مرتبط

جزوه برنامه نویسی مبتنی بر وب

آموزش ساخت زبانه با jQuery

آموزش مقدماتی jQuery

ارسال فرم وآپلود فایل با jquery و ajax وPHP

مرجع کامل توابع jquery