نویسنده: علی باقری نیا
تاریخ: ۲۴,آذر,۱۳۹۲
آخرین ویرایش: ۳۰ مهر ۱۳۹۶
بدون دیدگاه
1183 بازديد

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

 ساده و سازگار با تمامی مرورگرها. به طور کلی، یک ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
  • سلام به همگی – پس از وقفه ای تقریبا دو ماهه، امروز بالاخره فرصتی شد تا یک پست آموزشی جدید در کنار همراهان عزیز دنیای وردپرس و برنامه نویسی باشیم. آموزش امروز اختصاص داره به نحوه ساخت یک منو آکوردئون (کرکره ای) زیبا،

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

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

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

    بخشHTML

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

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

    بخش CSS

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

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

    بخش JQUERY

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

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

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

    منبع

  • تازه های وردپرس رو از کانال تلگرام خانه وردپرس دنبال کنید