آموزش طراحی وب

آموزش ایجاد منوی Responsive

در این مقاله ی آموزشی نحوه ی ایجاد یک منوی ریسپانسیو رو خدمتتون آموزش میدیم .

articles

آموزش ایجاد منوی Responsive

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

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

اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش داده بشه و در رزولوشن های پایین مثل موبایل و تبلت بصورت ریسپانسیو نمایش داده بشه . حالا باید این کار رو در کد پیاده کنیم .

برای طراحی ریسپانسیو متاتگ های زیر رو در قسمت  head سایت درج می کنیم :

در صورتی که از این متاتگ ها استفاده نکنید صفحه ی زیر رو در مرورگر به شکلی که در تصویر مشاهده می کنید ، میبینید:

1

در صورتی که استفاده کنید به شکل زیر میبینید:

2

برای ایجاد منو کد html زیر رو پیاده می کنیم :

حالا ما یک منو بدون استایل داریم برای زیباتر کردن منو بهش یه استایل هم میدیم :

تا اینجا منوی ما بصورت عادی نمایش داده میشه :

1

اگر دقت کرده باشید ما یک عنصر a با شناسه ی menu-icon در کدمون قرار دادیم :

برای این عنصر استایل زیر رو در نظر میگیریم :

حالا عنصر a  ما به این شکل 2 نمایان میشه . (میتونید با استفاده از فونت ها که در ماهنامه ی نسخه ی اول آموزش دادیم ، این آیکون رو پیاده کنید و دیگه از تصویر استفاده نکنید)

حالا دلیل ما از گذاشتن این آیکون چیه ؟

زمانی که ما بخوایم با موبایل یا تبلت صفحه ی وب رو مشاهده کنیم ، منوی اصلی مخفی میشه و این آیکون نمایان میشه ، و شما با کلیک بر روی این آیکون میتونید گزینه های منو رو بصورت زیر منو و منوی کشویی مشاهده کنید .

پس در حالت عادی ما این آیکون رو نیاز نداریم و اون رو hidden می کنیم .

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

با این مدیا کوئری ما شرطی رو برای css تعریف می کنیم و میگوییم اگر رزولوشن صفحه ی نمایش از ۱۰۲۴ پیکسل پایین تر بود (یعنی انواع موبایل و تبلت) ، کد css دیگری رو لود کن . به کد زیر دقت کنید :

در کد بالا ما گفتیم برای رزولوشن های کمتر از ۱۰۲۴ پیکسل ، آیکون منوی ریسپانسیو نمایان بشه و منوی عادی مخفی بشه . حالا شما یک منوی ریسپانسیو دارید که در موبایل و تبلت قابل مشاهده هست .

حالت عادی نمایش منو :

1

حالت ریسپانسیو منو :

2

حالت نمایش منوی کشویی در ریسپانسیو :

3

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

موفق و پیروز باشید 🙂

منتشر شده در دومین شماره ماهنامه طراحی وب (مدرسه مجازی ایرانیان)

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۰

  • سلام آقای همت یار
    میشه بگین تاثیر اون دوتا تگ متا که اول آموزش گذاشتین چیه برای چی اینو میذاریم؟
    ممنونم

    • سلام دوست عزیز
      متاتگ اول برای سیستم عامل های iOS هست .
      با متاتگ دوم سایت رو برای موبایل optimize می کنید ، که مرورگرهای موبایل بتونن لایه های صفحه ی شمارو به درستی شناسایی کنن. دو تا تصویر به مطلب اضافه کردم میتونید تفاوت رو مشاهده کنید.
      موفق و پاینده باشید

  • آقای همت یار
    اگر بخوایم کل عناصر و محتوای سایت رو برای نمایش در صفحه نمایش کوچکتر مثل موبایل و… ریسپانسیو کنیم باید از همین روش استفاده کنیم یعنی همین متا تگها و مدیا کوءری کافیه و ما باید حالت بقیه عناصر در صفحه نمایش کوچکتر رو به همین مدیاکوءری اضافه کنیم؟یا اینکه باید کدهای دیگه ای هم اضافه کنیم؟

    • سلام دوست عزیز
      بله باید برای هر رزولوشن یه مدیا کوئری تعریف کنید و عناصر رو نصب به اون رزولوشن تغییر بدید.
      موفق و پاینده باشید

  • بازم ممنونم فقط یه پیشنهاد دارم اینکه کاش یه فیلد به بخش نظردهی صفحه اضافه میشد تا کاربرا بتونن فایل مربوط به آموزش همون صفحه رو که خودشون ساختن آپلود کنن تا از طرف شما رفع اشکال بشه تا مجبور نباشن به بخش پرسش و پاسخ رجوع کنن

  • من دنبال تگ مربوط به ویندوز فون میگردم, اصن تگ یا موردی خاصی داره؟ چون مشتریام میگن توی ویندوز فون گاهی اوقات سایتشون میپره 😐
    یا اینکه چند پیکسل سمت چپ واسشون خالی میشه

    • سلام دوست عزیز
      برای ویندوز فون های ۸ میتونید از کدهای زیر استفاده کنید:

      @-webkit-viewport{width:device-width}
      @-moz-viewport{width:device-width}
      @-ms-viewport{width:device-width}
      @-o-viewport{width:device-width}
      @viewport{width:device-width}

      ویندوز فون با واحد پیکسل مشکل داره و شما میتونید از تکه کد جاوااسکریپتی زیر استفاده کنید، این کد رو ابتدای صفحه تو head قرار بدید:

      if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
      var msViewportStyle = document.createElement(“style”);
      msViewportStyle.appendChild(
      document.createTextNode(
      “@-ms-viewport{width:auto!important}”
      )
      );
      document.getElementsByTagName(“head”)[0].
      appendChild(msViewportStyle);
      }

      علاوه بر این میتونید از متا تگ زیر هم استفاده کنید:

      امیدوارم مشکلتون حل بشه.
      موفق باشید

  • عالی بود و کاربردی
    فقط توضیحی دررابطه با فایل های جاوا که همراه فایل دانلودی هستند و عملکردشون و نحوه تغییر عملکردشون هم بدید ممنون میشم

  • کلا شما برنامه نویس ها حرفه ای یک سری چیز می نویسید . ما آماتورها دو ساعت وقت می گذاریم . آخرم میبینیم ناقص کار می کنه ! واقعا هدفتون از این کار چیه؟

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین