تخفیف ویژه

آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 22) - آموزش قرار دادن navbar

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۶ آبان ۱۳۹۵

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

در جلسه قبل در مورد قرار دادن دکمه با استفاده از تگ mj-hero صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن navbar یا منو با استفاده از تگ mj-navbar، توضیحاتی رو خدمتتون بیان کنیم.

قرار دادن منو با استفاده از تگ mj-navbar

با  استفاده از این تگ میتونین یک منو تمام صفحه رو درون ایمیل خودتون قرار بدین و کاربران بتونن با استفاده از اون به مناطق محتلف منتقل بشن. کد زیر رو در نظر بگیرید:

<mjml>
  <mj-body>
    <mj-container>
      <mj-navbar background-color="#ef6451">
        <mj-column width="20%">
          <mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
        </mj-column>
        <mj-column width="80%">
          <mj-inline-links base-url="https://mjml.io">
            <mj-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-link>
            <mj-link href="/try-it-live" color="#ffffff">Try it live</mj-link>
            <mj-link href="/templates" color="#ffffff">Templates</mj-link>
            <mj-link href="/components" color="#ffffff">Components</mj-link>
          </mj-inline-links>
        </mj-column>
      </mj-navbar>
    </mj-container>
  </mj-body>
</mjml>

همونطور که دیدید یک تگ mj-navbar قرار دادیم و رنگ پس زمینه اون رو مشخص کردیم. درون اون دو تا ستون قرار دادیم. عرض ستون اول رو 20 و ستون دوم رو 80 درصد قرار میدیم. درون ستون سمت چپ و اولی یک آیکون رو قرار دادیم. درون ستون بعدی یک تگ mj-inline-links رو قرار دادیم و لینکهای اون رو درونش قرار میدیم. با استفاده از ویژگی base-url میتونین پایه آدرس رو مشخص کنید و آدرسی که در لینکها قرار میدین، در ادامه این پایه آدرس قرار میگیره. همونطور که دیدید 4 تا لینک قرار داده شده و با استفاده از href، آدرس لینک رو مشخص میکنیم. با استفاده از color هم رنگ متن رو تغییر دادیم. خروجی در مرورگر بصورت زیر خواهد شد:mjml navbar

ویژگی هایی که برای این تگ مورد استفاده قرار میگیره بصورت زیر هست:

  • full-width : با استفاده از این ویژگی، منو تمام عرض صفحه رو اشغال میکنه
  • border : میتونین با استفاده از این ویژگی میتونین برای منو border قرار بدین
  • border-top
  • border-bottom
  • border-left
  • border-right
  • border-radius : گوشه منو رو گرد میکنه
  • background-color : رنگ پس زمینه رو مشخص میکنه
  • background-url : آدرس عکس پس زمینه
  • background-repeat : میتونین پس زمینه رو تکرار کنید
  • background-size : سایز پس زمینه رو مشخص میکنه
  • vertical-align : ترازبندی عمودی
  • text-align : ترازبندی متن رو مشخص میکنه
  • padding
  • padding-top
  • padding-bottom
  • padding-left
  • paddiong-right

خروجی در برنامه‌های موبایل بصورت زیر هست:mjml navbar 2

در موبایل و سیستمهای ایمیلی بر پایه iOS، خروجی بصورت زیر هست:mjml navbar 3

همونطور که میبینید، یک آیکون همبرگر قرار داده میشه که با کلیک بر روی اون میتونین بقیه لینکها رو مشاهده کنید. ویژگی هایی که برای تگ mj-inline-links قرار میگیره، بصورت زیر هست:

  • base-url : میتونین پایه آدرس رو مشخص کنید
  • hamburger : اگر مقدار رو برابر با hamburger قرار بدین، حالت آیکون همبرگر نمایش داده میشه
  • align : میتونین تراز بندی رو مشخص کنید
  • ico-open : آیکون باز شدن رو مشخص میکنه
  • ico-close : آیکون بسته شدن رو مشخص میکنه
  • ico-padding : میتونین فاصله آیکون رو از اطراف مشخص کنید
  • ico-padding-top
  • ico-padding-left
  • ico-padding-right
  • ico-padding-bottom
  • ico-align : میتونین ترازبندی آیکون رو مشخص کنید
  • ico-color : رنگ آیکون رو مشخص میکنه
  • ico-font-size : میتونین سایز فونت رو مشخص کنید

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

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

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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