آکاردئون خفن به سبک دیوار بساز!

سلام رفیق! خوبی؟ 😊 آکاردئون خفن به سبک دیوار بساز!

حتما پیش اومده توی سایت‌های بزرگ ایرانی، مثل پلتفرم ثبت آگهی دیوار، گشتی! 😉 دیدی بعضی جاهاش یه سری آیتم هست که روش کلیک می‌کنی و یه متنی زیرش باز می‌شه؟ به اون می‌گن آکاردئون! یه چیز خیلی باحال و کاربردیه که هم سایتت رو خوشگل می‌کنه، هم باعث می‌شه محتوا رو مرتب و جمع‌وجور نشون بدی.

توی این مقاله می‌خوام بهت یاد بدم چطوری با HTML، CSS و یه ذره JavaScript، یه آکاردئون عمودی خفن، با انیمیشن نرم و جذاب، دقیقاً به سبک و سیاق سایت دیوار بسازی. قول می‌دم آخرش یه چیزی تحویل بگیری که هم خودت کیف کنی، هم کاربرای سایتت. 😎 پس منو تا آخر این پست همراهی کن 🙂

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

🌟آموزش ساخت آکاردئون خفن به سبک دیوار

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

×

آموزش ساخت تولتیپ در وردپرس بدون پلاگین

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

1️⃣ اضافه کردن ویجت HTML

توی برگه ای که میخای آکاردئونت رو قرار بدی ویجت HTML المنتور رو اضافه کن و کدهای زیر رو داخلش قرار بده.

با اینکار اسکلت و ساختار آکاردئون شکل میگیره 🙂

🔒

محتوای VIP+

این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزش‌های اختصاصی رایا وردپرس، عضو ویژه شوید.

×

ساخت ستون‌ شیک با گوشه های درخشان در المنتور

مطالعه

🙂عضو ویژه شوید

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

توضیحات درباره کد HTML بالا

• div.rayawp__vertical-slider: این بخش مثل یه جعبه اصلیه که همه چیز رو نگه می‌داره.
• ul.rayawp__items: یه لیست بدون نقطه که آیتم‌های آکاردئون رو توش می‌ذاریم.
• li.rayawp__item: هر کدوم از اینا یه بخش از آکاردئونه. اولیش کلاس features__item–active داره که یعنی به صورت پیش فرض باز نشون داده میشه و محتواش قابل رویته!
• div.rayawp__item-indicator: یه خط باریک کنار هر بخش که نشون می‌ده کدوم فعاله.
• p.rayawp__item-title: عنوان هر بخش که روش کلیک می‌کنی.
• p.rayawp__item-description: توضیحاتی که وقتی بخش باز می‌شه، نشون داده می‌شه.
• میتونی متن ها رو در کد بالا تغییر بدی و عناوین و محتوای آکاردئون رو متناسب با صفحه وبت شخصی کنی 🙂

2️⃣ اضافه کردن کد CSS

برای اینکه آکاردئون ما ظاهری مشابه آکاردئون سایت دیوار پیدا کنه، لازمه از کد CSS استفاده کنیم. برای اعمال این استایل‌ها، در تنظیمات ویجت HTML به تب “پیشرفته” رفته و در قسمت “CSS سفارشی“، کد CSS زیر رو رو پیست کن.

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

توضیحات کد CSS بالا

• rayawp__items: لیست رو عمودی می‌کنه و نقطه‌هاش رو برمی‌داره.
• rayawp__item: هر بخش رو قشنگ تنظیم می‌کنه و با cursor: pointer بهت می‌گه که می‌تونی روش کلیک کنی.
• rayawp__item–active: وقتی یه بخش فعاله، رنگش قرمز می‌شه.
• rayawp__item-indicator: یه خط خاکستری که وقتی بخش فعاله، قرمز می‌شه.
• rayawp__item-description: توضیحات آکاردئونه که توی حالت عادی مخفیه (height: 0) و وقتی فعال می‌شه، باز می‌شه (height: 80px).

موارد بالا کلاس های اساسی کدمون هستن که میتونی همه چیزشون رو از رنگ گرفته تا …. طبق سلیقه خودت تغییر بدی برای مثال اگه میخای وقتی به بخش فعاله رنگش بنفش بشه کافیه بری سراغ کلاسی که مربوط به انجام اینکاره یعنی rayawp__item–active یعنی خط 25 کد بالا و کد رنگ دلخواهت رو قرار بدی به همین راحتی 🙂

×

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

مطالعه

3️⃣ اضافه کردن جاوا اسکریپت

پس از اعمال استایل‌ها، آکاردئون ما شکل میگیره و شبیه سایت دیوار میشه! 🤩 اما هنوز کامل نیست… 🤔 وقتی روی تب‌ها کلیک می‌کنیم، محتوا باز و بسته نمیشه! 😫 برای تعاملی کردنش و اینکه با کلیک کاربر تب‌ جدید باز و تب قبلی بسته بشه، نیاز به استفاده از کد جاوا اسکریپت داریم! 💻✨

زیر همون ویجت HTML ات ، یه ویجت HTML دیگه اضافه کن و کد JavaScript رو توی اون بذار.

🔒

محتوای VIP+

این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزش‌های اختصاصی رایا وردپرس، عضو ویژه شوید.

×

اضافه کردن فونت دلخواه به المنتور (+ویدیو آموزشی)

مطالعه

🙂عضو ویژه شوید

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

توضیحات کد JavaScript بالا

• document.addEventListener(‘DOMContentLoaded’, …): صبر می‌کنه تا صفحه کامل لود بشه.
• querySelectorAll(‘.rayawp__item’): همه بخش‌های آکاردئون رو انتخاب می‌کنه.
• title.addEventListener(‘click’, …): وقتی روی عنوان کلیک می‌کنی، اول همه بخش‌ها رو می‌بنده و بعد بخش انتخاب‌شده رو باز می‌کنه.

تبریک میگم کار تمومه به راحتی تونستی یه آکاردئون خفن مثل سایت دیوار بسازی.

سوئیچ خودکار بین تب‌های آکاردئون (هر 2.5 ثانیه)

✨ برای اینکه آکاردئون رو کاربردی‌تر کنم، یه قابلیت جدید اضافه کردم! 🔄 دیگه نیازی نیست کاربر کلیک کنه تا تب ها باز و بسته بشن 👆 و اینکار خودکار انجام میشه و تب ها هر 2.5 ثانیه باز و بسته میشن تا محتوا رو کاربر ببینه 🤩 اگه این سبکو دوست داری، استفاده کن! 👍 وگرنه تا همینجا آموزش کامله! 😉 و نیازی نیست چیزایی که در ادامه مطلب بهت میگم رو انجامش بدی 😊

اگه می‌خوای تب‌ها هر 2.5 ثانیه خودکار سوییچ یا عوض بشن، کد JavaScript زیر رو به جای کد جاوا اسکریپت بالا در مرحله 3 قرار بده:

×

هاور افکت اسکرول خودکار عکس در المنتور: ترفندی برای نمایش جذاب نمونه کارها

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

توضیحات برای کد بالا

• currentIndex: این عدد نشون می‌ده الان کدوم تب فعاله.
• switchTab(): این تابع تب فعلی رو فعال می‌کنه و به تب بعدی می‌ره.
• setInterval(switchTab, 2500): هر 2.5 ثانیه تابع رو اجرا می‌کنه. اگه میخای زمان رو بیشتر یا کمتر کنی باید خط 11 کد بالا رو ادیت کنی و به جای 2500 میلی ثانیه عدد دلخواهت رو جایگزین کنی
• کلیک دستی: هنوزم می‌تونی با کلیک تب‌ها رو عوض کنی و currentIndex هم خودش آپدیت می‌شه.

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

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

پایان

خب، دیگه به آخر این آموزش رسیدیم! امیدوارم تونسته باشی یه آکاردئون خفن به سبک دیوار بسازی و ازش لذت ببری. 😎 اگه سوالی داری یا جایی گیر کردی، حتما توی کامنت‌ها بهم بگو. من همیشه آماده‌ام بهت کمک کنم. موفق باشی تا یه آموزش جذاب دیگه تو رو به خدای بزرگ میسپارم 🙂

×

آموزش ساخت فیلد جستجوی دراپ داون در المنتور

مطالعه