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

سلام به همگی – پس از وقفه ای تقریبا دو ماهه، امروز بالاخره فرصتی شد تا یک پست آموزشی جدید در کنار همراهان عزیز دنیای وردپرس و برنامه نویسی باشیم. آموزش امروز اختصاص داره به نحوه ساخت یک منو آکوردئون (کرکره ای) زیبا، ساده و سازگار با تمامی مرورگرها. به طور کلی، یک فهرست آکوردئون معمولا برای نمایش عناصری خاص، مثل باکس های دانلود، بخش سؤالات 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 نمایش داده میشه.

به همین سادگی 🙂