آموزش رایگان طراحی منوی موبایل سایت دیجی کالا با Html | Css | Jquery

آموزش رایگان و پروژه محور طراحی منوی موبایل

منوی موبایل یکی از بخش‌های حیاتی هر سایت فروشگاهیه. چون بیشتر کاربران با گوشی خرید می‌کنن، این منو باید روان و کاربردی باشه. در این مینی پروژه قراره با HTML، CSS و jQuery یه منوی موبایل مشابه دیجی کالا بسازیم که کاملاً واکنش‌گراست.

هدر دسکتاپ و هدر موبایل جدا از هم طراحی شدن. توی صفحات بزرگ، هدر دسکتاپ نمایش داده می‌شه و هدر موبایل مخفیه. وقتی عرض مرورگر از ۹۶۰ پیکسل کمتر می‌شه، هدر دسکتاپ مخفی و هدر موبایل جاش رو می‌گیره. این تعویض با مدیا کوئری انجام شده.

هدر موبایل از دو ردیف تشکیل شده. ردیف بالا شامل دکمه منو، لوگو و آیکون سبد خریده. ردیف پایین هم باکس جستجو و آیکون حساب کاربری رو داره. این چیدمان دسترسی سریع به امکانات اصلی رو فراهم می‌کنه.

منوی کشویی با کلیک روی دکمه همبرگری از سمت راست باز می‌شه. عرض منو ۲۹۰ پیکسله و کل ارتفاع صفحه رو می‌پوشونه. یه لایه تیره هم روی بقیه صفحه قرار می‌گیره که با کلیک روش، منو بسته می‌شه.

منو دو بخش اصلی داره. بخش بالا شامل لینک‌های ثابت مثل سوپرمارکت، پیشنهادها و فروشنده شوید. بخش پایین دسته‌بندی‌های کالا رو شامل می‌شه. دسته‌هایی که زیرمجموعه دارن با یه فلش مشخص شدن و با کلیک، زیرمنوشون باز می‌شه.

زیرمنوها به صورت تو در تو هستن. یعنی یه دسته مثل کالای دیجیتال، زیرمجموعه‌هایی مثل لوازم جانبی گوشی داره و لوازم جانبی گوشی هم زیرمجموعه‌های خودش رو داره. کاربر می‌تونه با کلیک روی هر سطح، به عمق بیشتری بره.

استایل‌دهی منو با CSS سفارشی انجام شده. پس‌زمینه زیرمنوها کمی تیره‌تر از بقیه منوئه تا تفکیک بصری ایجاد بشه. انیمیشن باز و بسته شدن منو هم نرم و روان تنظیم شده.

نکته کاربردی این پروژه، یادگیری ساخت منوی کشویی واکنش‌گرا با jQuery و مدیریت چندین سطح منوئه. این مهارت توی هر پروژه فروشگاهی که نسخه موبایل داره، ضروریه.

در نهایت یه منوی موبایل کامل داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

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