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

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

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

با استفاده از جی کوری براحتی می توان منوهای بازشو ایجاد کرد، برای این کار باید مقداری با استایل شیت و 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