آموزش ساخت منو آکوردئون

دسته‌ها : آموزش, جی کوئری علی میرزائی 26 دیدگاه‌ها

آموزش ساخت منو آکوردئون

سلام به همگی – پس از وقفه ای تقریبا دو ماهه، امروز بالاخره فرصتی شد تا یک پست آموزشی جدید در کنار همراهان عزیز دنیای وردپرس و برنامه نویسی باشیم. آموزش امروز اختصاص داره به نحوه ساخت یک منو آکوردئون (کرکره ای) زیبا، ساده و سازگار با تمامی مرورگرها. به طور کلی، یک فهرست آکوردئون معمولا برای نمایش عناصری خاص، مثل باکس های دانلود، بخش سؤالات FAQ، فهرست ناوبری و… برای زیبا سازی بیشتر و استفاده بهینه از فضای قالب استفاده میشه.

برای ساخت یک منو آکوردئون…

در قدم اول، یک چارچوب html به فرم زیر تعریف میکنیم:

بخش HTML

<div class="accordion">
  <div class="accordion-item">
  <span>آیتم اول</span>
  <div class="type"></div>
  </div>
  <div class="data">
   متن آزمایشی شماره ۱
  </div>
  <div class="accordion-item">
   <span>آیتم دوم</span>
   <div class="type"></div>
  </div>
  <div class="data">
    متن آزمایشی شماره ۲
  </div>
  <div class="accordion-item">
   <span>آیتم سوم</span>
   <div class="type"></div>
  </div>
  <div class="data">
   متن آزمایشی شماره ۳
  </div>
</div>

در این چهارچوب، ما ۳ آیتم رو با عنوان و توضیحاتی دلخواه تعریف کردیم. (میتونید این تعداد رو، به اندازه ای که خواستید کم یا زیاد کنید)

در قدم بعد، نوبت به زیبا سازی و سبک دهی به عناصر html تعریف شده میرسه. بنابراین، بخش css رو به صورت زیر شکل میدیم:

بخش CSS

.accordion
{
  width:100%;
  min-height:300px;
  margin:20px auto;
}
.accordion-item {
font-size: 1em;
margin: 0 10px 0 10px;
padding: 10px;
height: 20px;
background: #f2f2f2;
border-bottom:1px solid #ccc;
color: #000;
cursor:pointer;
}

.accordion-item.open
{
background:#14ad40;
border-bottom:0px;
transition: all .2s ease;
color:#fff;
}
.accordion-item.open .type {
float: left;
background: url('minus.png') center no-repeat;
padding: 10px;
}

.accordion-item .type {
float: left;
background: url('plus.png') center no-repeat;
padding: 10px;
}

div.data {
background: #fff;
margin: 0 10px 0 10px;
padding: 10px;
border:1px solid #ccc;
font-size: .8em;
line-height: 140%;
display:none;
}

عالیه! تا حالا تقریبا ۸۰% کار انجام شده و تونستیم استایل کار رو در منو ایجاد کنیم! می مونه یک بخش data که در سلکتورش، مقدار پروپرتی display رو برابر none قرار دادیم تا حین لود صفحه محتوای این عنصر به نمایش در نیاد.

الآن چیزی که ما میخوایم اینه که با کلیک روی هر دسته، محتوای اون به شکلی انیمیشنی و زیبا به نمایش در بیاد. پس در مرحله آخر به سراغ جی کوئری میریم و قطعه کدی رو به شکل زیر تعریف میکنیم:

بخش JQUERY

$(function($) {
  var allAccordions = $('.accordion div.data');
  var allAccordionItems = $('.accordion .accordion-item');
  $('.accordion > .accordion-item').click(function() {
    if($(this).hasClass('open'))
    {
      $(this).removeClass('open');
      $(this).next().slideUp();
    }
    else
    {
    allAccordions.hide();
    allAccordionItems.removeClass('open');
    $(this).addClass('open');
    $(this).next().hide().slideDown();
    return false;
    }
  });
});

در قطعه کد بالا، با تعریف تابع .click و پاس دادن سلکتورaccordion-item، به محض کلیک بر روی یک آیتم، ابتدا مرورگر با شرطی مواجه میشه که آیا این آیتم قبلا باز شده یا نه؟! این شرط با بررسی وجود کلاسی با نام open انجام میشه (این کلاس در خطوط پایین تر تعریف شده) و درصورت درستی شرط، اون کلاس حذف و سپس آیتم باز شده با افکت slideUp بسته میشه.

و اما اگه شرط اول درست نباشه، معنیش اینه که هنوز محتوای آیتم (کلیک شده) باز نیست. بنابراین، کلاسی با نام open اضافه و سپس محتوای اون آیتم با افکت slideDown نمایش داده میشه.

به همین سادگی :)

راستی فراموش نکنید که حتما باید کتابخانه جی کوئری در صفحتون فراخوانی شده باشه...

دیدگاه کاربران در مورد این نوشته

  1. سلام می خواستم بپرسم که این دو خط دقیقا چه کاری انجام می دهند؟
    var allAccordions = $('.accordion div.data')
    و
    var allAccordionItems = $('.accordion .accordion-item')

    توسط حمیدرضا پاسخ

    1. سلام حمیدرضا.
      این دو خط، سلکتورهای مورد نیاز رو در دو متغییر ذخیره میکنند که موجب سهولت و خوانایی بیشتر در کدها شدند.

      توسط علی میرزائی پاسخ

  2. راستی این منو شما رو من یکم رنگش رو تغییر دادم
    به نظرم قشنگ شده ^_^
    گفتم بزام اینجا تا شما و دوستان دیگه ببینن
    اینو من میخوام مثل سایت فوق کنم ولی نمیدونم چیکار باس کنم.
    http://s3.picofile.com/file/8212323600/simple_accroding.rar.html

    توسط مهدی پاسخ

  3. سلام
    ممنون از شما
    اول میخواستم از سایت های MENU GENERATOR استفاده کنم اما وقتی به این پست خوب شما برخورد کردم نظرم عوض شد….
    خیلی خوبه که سایت هایی مثل شما مطالب خوب میزارن و مطالب سایت های دیگه رو کپی نمیکنن.

    توسط مهدی پاسخ

    1. ممنون آقا مهدی. شما لطف دارید. {گل}

      توسط علی میرزائی پاسخ

  4. سلام
    ممنون از آموزش خوبتون، اما چرا با ie8 کار نمیکنه!؟

    توسط ساغر پاسخ

    1. سلام، اتفاقا با ie8 هم به خوبی کار میکنه. (لینک دمو رو در ie تست کنید)

      توسط علی میرزائی پاسخ

  5. سلام افزونه وردپرس نداره؟

    توسط مهدیس پاسخ

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

      توسط علی میرزائی پاسخ

  6. سلام من درست کرد ولی متن و اون عکس plus.png به هم ریخت….
    اینم لینک :
    http://www.pavines.com/wp-content/uploads/testtttt.jpg

    توسط mohamad پاسخ

    1. الان بخش پرسش های متداول سایتتون رو دیدم و به نظر که مشکلی نداشت!!! با این حال، اگه در کدها ویرایشی انجام نداده باشید، نباید مشکلی پیش بیاد!

      توسط علی میرزائی پاسخ

  7. چون من کار کردن با jquery بلد نیستم!!!

    توسط mohamad پاسخ

  8. سلام می خواستم بدونم افزونه ای هست داخل وردپرس که اینکارو انجام بده و نیازی به کد نویسی نداشته باشه؟

    توسط mohamad پاسخ

    1. سلام،
      بله هست، منتها از لحاظ مصرف منابع، بهتره که برای همچین موارد ساده ای از افزونه استفاده نکنید.
      شما قدم به قدم مراحل گفته شده رو انجام بدید، مطمئن باشید مشکلی پیش نمیاد :)

      توسط علی میرزائی پاسخ

  9. تورو خدا اگه بتونی خودت واسم یک گزینه فقط بزاری ممنونت میشم . چونتازه کارم. هنوز بلد نیستم این کار رو کنم
    فایل رو برات پیوست کردم . اگه بتونی خودت فقط زیر متن آزمایشی 1 یک گزینه دیگه مثلا متن آزمایشی شماره 2 بزاری ممنونت میشم .

    توسط بهرام پاسخ

    1. اشتباه شما در فایلی که فرستاده بودید، این بوده که یک کلاس data دیگه رو در زیر کلاس data اولی قرار دادید! به همین خاطر محتوای کلاس دوم نمایش داده نمیشد.
      الان تنها کاری که شما باید انجام بدید اینه که متن داخل کلاس data رو به متن دلخواه خودتون تغییر بدید. مثلا به جای “متن آزمایشی شماره ۱”، یک جمله دیگه بنویسید.
      به همین سادگی…

      توسط علی میرزائی پاسخ

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

    توسط بهرام پاسخ

    1. آخه عزیز من، اینکه کاری نداره! بعد از پایان div کلاس accordion-item، یک کلاس دیگه تعریف شده با نام data. حالا تو میتونی داخل این کلاس هر متنی که داری رو بنویسی.
      مثلا:

      <div class="data">
      دنیای وردپرس و برنامه نویسی
      </div>

      توسط علی میرزائی پاسخ

  11. دوست عزیز اگه بخواییم مثلا در قسمت ایتم اول زیر متن آزمایشی شماره 1 یه کلمه دیگه بنویسیم باید چی کار کرد . مثلا باشه متن آزمایشی شماره 2

    توسط بهرام پاسخ

    1. اینکه خیلی سادست :)
      متن رو داخل همون div بنویسید.

      توسط علی میرزائی پاسخ

  12. سلام
    باتشکر از شما به خاطر این آموزش بسیار مفید
    فقط دوتا سوال داشتم:
    1:کدcss باید تو استایل قرار بدیم؟اگه باید تو استایل قرار بدیم فرقی نداره کدوم قسمت باشه؟
    2 :کد جی کوئری باید کجا قرار بگیره؟

    توسط ابوالفضل پاسخ

  13. pingback
  14. سلام
    خسته نباشید
    من تو سایتم از افزونه wp-file base برای مدیریت دانلود هام استفاده می کنم و خواستم بدونم میشه این منو را برای تم های این افزونه ساخت و استفاده کرد ؟

    توسط Majid پاسخ

    1. سلام،
      متأسفانه تا به حال از این افزونه استفاده نکردم!
      اما اگه قابلیت افزودن تمپلیت رو داشته باشه احتمالا بتونید خیلی ساده این کار رو انجام بدید! در غیر این صورت باید در افزونه کدنویسی کنید.

      توسط علی میرزائی پاسخ

  15. سلام علی جون
    داداش یه سوال ؟ من اینو فراخوانی کردم و همیچه درست بود به جز این که متن رو از سمت چپ می نوشت! مشکل از کجاس؟

    توسط mohammad پاسخ

    1. سلام،
      اگه در یکی از تگ های مادر (مثل body) شیوه نامه قالب، از پروپرتی direction:rtl استفاده کرده باشید، مشکلی پیش نمیاد.
      در غیر این صورت، میتونید به سلکتور accordion، پروپرتی rtl رو اضافه کنید.

      توسط علی میرزائی پاسخ

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