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

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

دسته بندی موضوعات
سفارش تبلیغات

آموزش ایجاد منوی 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

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

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

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

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



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • امین

    مطلب مفیدی بود ، خیلی دنبالش بودم ، تشکر

  • سحر

    خیلی ممنون منم از این کد استفاده کردم

  • hassany

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

    • میترا رحیمی

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

  • hassany

    ممنونم متوجه شدم.

  • hassany

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

    • میترا رحیمی

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

  • حسین حسنی

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

    • حسین همت یار

      سلام ، متاسفانه چنین امکانی نیست ، شما می بایست از همون بخش پرسش و پاسخ در ادرس iranweblearn.com/ask استفاده کنید . تشکر

  • رضا

    خداقوت
    مطلب خیلی مفید و واضحی بود متشکرم

  • میثم

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

    • میترا رحیمی

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

      @-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);
      }

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

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

  • های شارژ

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

  • های شارژ

    زیر منو میخوام ایجاد کنم مشکل داره ؛
    خراب نمایش میده !
    باید چه کرد ؟
    سپاس

  • SASAN

    من این کارو کردم اما display:hidden کار نمی کنه

    • حسین همت یار

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

  • نظم آران

    سلام خیلی عالی بود مدت ها بود دنبالش بودم

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟