دوره مجازی جاوااسکریپت (جلسه 31): پروژه - طراحی و پیاده سازی منوهای آکاردئونی

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۱ دقیقه
۳۰ آبان ۱۳۹۴

در جلسه امروز به طراحی و پیاده سازی یکی دیگه از کاربردیترین قابلیت هایی که توسط جاوااسکریپت و جی کوئری در صفحات وب استفاده میشه، خواهیم پرداخت. امروز با هم یاد می گیریم به چه شکل منوهای آکاردئونی (accordion menus) شبیه تصویر زیر ایجاد کنید. پس با ما همراه باشید :

مطالب مطرح شده در این جلسه عبارتند از :

  • پروژه منوهای آکاردئونی - accordion menus
  • توضیح در مورد پروژه این جلسه و دلیل نامگذاری آن
  • کدنویسی و تشریح ساختار html و css پروژه این جلسه
  • کدنویسی پروژه منوی آکاردئونی بدون پلاگین
  • نحوه باز شدن منو با کلیک روی عنوان آن
  • نحوه مخفی سازی بقیه منوها
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

حمید رضا مصطفی زاده

سلام
استاد اگه میشه یکی از پروژه ها رو مثه اون بازی عنکبوت بلکه قشنگ تر بگذارید به عنوان پروژه جامع
هرچند این ها هم بسیار جالب بود و دست تون درد نکنه
چون این پروژه ها همش با بوت استرپ جناب صالحی پیاده سازی کردن میگم
مگر نه در تدبیر شما هیچ شکی نیس

لقمان آوند

ممنون
پروژه های دوره تمام شدن. و فقط جلسه آینده مونده که ضبط شده و امشب روی سایت قرار میگیره.
توی بوت استرپ شما فقط استفاده میکردید از این امکانات و کدنویسی جاوااسکریپتش رو انجام نمی دادید.
اینجا قراره کدنویسی جاوااسکریپت و جی کوئری یاد بگیرید.
نمونه ی پروژه هایی که داشتیم که زیاد توی وب هست ولی اولا مهم اینه که شما بدونید چطور نوشته شدند و جی کوئری و جاوااسکریپت رو به خوبی یاد بگیرید. ثانیا شما همیشه از بوت استرپ که استفاده نمی کنید! ممکنه لازم باشه کدی بنویسید که سبکتر، روونتر و خاصتر باشه که پلاگین مناسبی هم براش پیدا نکنید!

hassani

سلام
اگه امکانش هست در آموزش ها اینقدر تکرار نکنین که تمرین ها یا پروژه هاتون رو برای من نفرستین.
من به شخصه میدونم که شما به هیچ وجه نیازی به این نمونه تمرین های ما ندارید ولی بازم به نظر خودم شاگردها با به اشتراک گذاشتن فعالیت هاشون میتونن خیلی به پیشرفت همدیگه کمک کنن . و در واقع با وجود اینکه نظر شما به عنوان مدرس در مورد تمرین ها و نمونه کارهام خیلی برام مهم و با ارزشه ولی من دوست دارم با به اشتراک گذاشتن نمونه پروژه هام بقیه دانشجوها رو هم تحریک کنم تا کارهاشون رو اینجا به اشتراک بذارن تا من و بقیه شاگردها هم بتونیم از اونا یاد بگیریم.اینطوری خیلی سریع تر مهارت همه بالا میره و نکته های زیادی از همین تمرین ها یاد میگیریم.
پس در نتیجه ما تمرینها و پروژه هامون رو فقط برای شما نمیفرستیم.
این چندتا پروژه ای که تا الان داشتیم خیلی عالی مفید و بسیار کاربردی بودن.تشکر زیاد
تمرینی که آخر جلسه دادین رو اینطوری کدنویسی کردم:
http://s6.picofile.com/file/8224151942/test_box_tab.rar.html
در ضمن حالا نمیخواد خیلی از انتقاد من عصبانی بشین شما اگر فرصت خوندن کامنت های بنده رو ندارین فقط تاییدشون کنید و بازم اگر فرصتشو ندارین به من یه سطح دسترسی بدین تا وارد مدیریت سایت بشم و کامنت های خودمو تایید کنم.باحال گفتم نه 😉 😉 😉

لقمان آوند

سلام و ممنون بابت دیدگاهت
من معمولا میگم نیازی هم نیست برای بنده بفرستید. نگفتم برای من نفرستید. یعنی اگه فرستادید هم مشکلی نیست و من پاسخگو هستم. بیشتر منظورم این هست که اینجا تمرین نمره نداره ;D راحت باشید و با علاقه کد بنویسید.
اینکه کدهاتو می خوای به اشتراک بزاری خیلی خوبه. ایشالله اوایل زمستون سیستم نمونه کارهای دانشجوها رو راه میندازیم که بتونید خیلی منسجم تر کارای همیدگه رو ببینید.
پیام ها هم به ترتیب پاسخ داده میشن. این مدت سوالات زیاد بوده.

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل