اگه تا حالا به منوهای سایت‌های بزرگ دقت کرده باشی، حتماً دیدی که وقتی موس رو روی یه گزینه می‌بری، یه لیست جدید باز می‌شه و شاید حتی یه زیرمنوی دیگه. به این ساختار می‌گن منوی آبشاری یا همون Dropdown Menu. خبر خوب اینکه برای ساختنش لازم نیست سراغ جاوااسک...
معرفی دوره ساخت منوهای آبشاری با HTML و CSS
اگه تا حالا به منوهای سایت‌های بزرگ دقت کرده باشی، حتماً دیدی که وقتی موس رو روی یه گزینه می‌بری، یه لیست جدید باز می‌شه و شاید حتی یه زیرمنوی دیگه. به این ساختار می‌گن منوی آبشاری یا همون Dropdown Menu. خبر خوب اینکه برای ساختنش لازم نیست سراغ جاوااسکریپت بری؛ با HTML و CSS خالص هم می‌شه این کار رو انجام داد. 🎯
این دوره کوتاه و جمع‌وجور دقیقاً همین مسیر رو بهت نشون می‌ده. از صفر شروع می‌کنی، لیست‌های تودرتو می‌سازی، استایل می‌دی و در نهایت یه منوی چندطبقه‌ای ریسپانسیو تحویل می‌گیری.
چرا این دوره رو انتخاب کنم؟
زبان ساده و قدم‌به‌قدم: هر مفهوم با یه مثال عملی توضیح داده شده، نه پرگویی تئوری.
تمرکز روی HTML و CSS خالص: بدون کتابخانه اضافه، بدون پیچیدگی.
مناسب سطح مقدماتی: حتی اگه تازه با CSS آشنا شدی، می‌تونی همراه بشی.
پروژه‌محور: فایل‌های تمرینی همراه دوره هستن تا خودت دست به کد بشی.
پوشش مباحث دسترسی‌پذیری: مثل اضافه کردن خصیصه ARIA که خیلی‌ها ازش غافل می‌مونن.
توی این دوره چی یاد می‌گیری؟ 🧩
چطور یه لیست نامرتب (ul) رو تودرتو کنی و تبدیلش کنی به ساختار منو
حذف بولت‌های پیش‌فرض لیست با تکنیک override
پاک‌سازی float با استفاده از Pseudo-elementها
مخفی و نمایان کردن زیرمنوها با هاور موس
جابه‌جایی و تنظیم موقعیت منوی طبقه سوم
استایل‌دهی به آیتم‌های منوی اصلی
اضافه کردن ARIA برای بهبود دسترسی‌پذیری
ریسپانسیو کردن منو برای نمایش درست روی موبایل و تبلت
ساختار و مشخصات دوره
مشخصه
جزئیات
عنوان
فیلم آموزش ایجاد منوهای آبشاری با HTML و CSS
تعداد درس‌ها
۱۰ درس در ۲ فصل
سطح
مقدماتی
مدت زمان
حدود ۲۹ دقیقه
حجم فایل‌ها
۱۴۱.۹۶ مگابایت
پیش‌نیاز
آشنایی مقدماتی با HTML و CSS
فصل اول: معرفی
معرفی دوره آموزشی (۰:۰۱:۰۰)
کار با فایل‌های تمرینی (۰:۰۱:۰۳)
فصل دوم: ساخت منو با CSS و HTML
تو در تو کردن لیست نامرتب در HTML (۰:۰۲:۵۹)
override کردن لیست بولت (۰:۰۳:۵۹)
پاک‌سازی float با Pseudo (۰:۰۴:۱۹)
مخفی و نمایان کردن منوها با هاور موس (۰:۰۴:۳۵)
تغییر موقعیت منوی طبقه سوم (۰:۰۲:۲۹)
استایل دادن به منوهای طبقه اصلی (۰:۰۲:۴۷)
اضافه کردن خاصیت ARIA (۰:۰۲:۰۳)
ریسپانسیو کردن منوها (۰:۰۲:۴۷)
این مهارت کجا به کارت میاد؟ 💡
فرض کن داری برای پروژه پایان‌ترمی یه سایت فروشگاهی می‌سازی. دسته‌بندی محصولات رو چطوری توی هدر می‌چینی؟ دقیقاً همین‌جاست که منوی آبشاری به کار میاد. یا مثلاً توی یه وبلاگ شخصی، زیرمنو برای دسته‌بندی مطالب. حتی اگه بعداً بخوای سراغ فریم‌ورک‌هایی مثل بوت‌استرپ بری، درک عمیق از ساختار dropdown بهت کمک می‌کنه که بفهمی زیر پوسته چه خبره.
سوال‌های رایج
آیا قبل از خرید می‌تونم بخشی از آموزش رو ببینم؟
بله، چند قسمت به‌صورت پیش‌نمایش رایگان در اختیارته و می‌تونی کیفیت تدریس رو بسنجی.
امکان پرسیدن سوال از مدرس هست؟
بخش گفتگو برای همین کار در نظر گرفته شده. علاوه بر این، از طریق پروفایل مدرس هم راه‌های ارتباطی وجود داره.
دسترسی به آموزش چطوریه؟
هم پخش آنلاین داری و هم فایل‌ها رو می‌تونی نگه داری. دسترسی‌ت همیشگیه و محدود به بازه زمانی خاصی نمی‌شه.
در حال حاضر تخفیف داره؟
بله، این دوره در حال حاضر با تخفیف ویژه ارائه می‌شه که می‌تونه برای شروع یه انتخاب اقتصادی باشه. 🏷️
جمع‌بندی
اگه دنبال یه شروع سریع و کاربردی توی دنیای طراحی رابط کاربری هستی، این دوره با زمان کوتاهش می‌تونه نقطه ورود خوبی باشه. لازم نیست ساعت‌ها وقت بذاری؛ توی کمتر از نیم ساعت، پایه‌های ساخت یه منوی آبشاری حرفه‌ای رو یاد می‌گیری و می‌تونی همون رو توی پروژه‌های واقعی پیاده کنی.
ساخت منوهای آبشاری با HTML و CSS را شروع کنید؛ ثبت‌نام با تخفیف
