دکمه منوی Navbar

برای سازماندهی پیوندهای منو در دستگاه های تلفن همراه از دکمه منوی NAVBAR استفاده کنید.

دکمه منو یک عنصر در داخل NAVBAR است که هنگام وجود فضای افقی محدود ، مانند یک دستگاه تلفن همراه ، پیوندهای NAV را سازماندهی می کند. گاهی اوقات به "منوی همبرگر" گفته می شود.

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

ایجاد منو

به طور پیش فرض ، دکمه منوی NAV در نقطه شکست تبلت و زیر ظاهر می شود. می توانید به حالت Preview بروید و ببینید که هنگام تغییر به این دستگاه ها ، منو در Navbar ظاهر می شود. با کلیک بر روی دکمه منو ، منوی NAV را گسترش می دهد و با کلیک بر روی دکمه دوباره منوی NAV فرو می رود.

در نقطه شکست دسک تاپ ، می بینید که پیوندهای NAV در عنصر منوی NAV توخالی هستند. این منوی NAV همان عنصری است که هنگام کلیک بر روی دکمه منو نمایش می دهد - فقط پیوندهای NAV را در یک لیست عمودی نمایش می دهد.

ایجاد منو در طراح

می توانید با مراحل زیر منوی NAV را در طراح باز کنید:

1. NAVBAR یا هر عنصر موجود در آن را انتخاب کنید
2. Open Settings panel >تنظیمات NAVBAR
3. برای نمایش منو انتخاب کنید

دید دستگاه

به طور پیش فرض ، دکمه منوی NAVBAR در نقطه شکست تبلت ظاهر می شود ، اما این قابل تغییر است. این دکمه را می توان در تمام نقاط شکست یا اصلاً قابل مشاهده کرد. برای تغییر دید ، این مراحل را دنبال کنید:

1. NAVBAR یا هر عنصر موجود در آن را انتخاب کنید
2. Open Settings panel >تنظیمات NAVBAR
3. برای انتخاب جایی که دکمه منو برای اولین بار ظاهر می شود از کشویی گزینه های دستگاه استفاده کنید

انیمیشن های منو

سه نوع انیمیشن آشکار وجود دارد که می تواند برای این منو استفاده شود:

1. فرو نشاندن
2. بیش از حد
3. بالای چپ

می توانید انیمیشن افشا را در پانل تنظیمات انتخاب کنید.

کشویی

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

بیش از حد

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

بالای چپ

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

تسکین و انتقال منو

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

دکمه منو

می توانید هر جنبه ای از NAVBAR یا منوی NAV را سبک کنید. از آنجا که Styles Cascade از نقاط شکست بزرگتر ، بالاترین نقطه شکست را که دکمه منوی NAVBAR را فعال کرده اید انتخاب کرده و سپس سبک ها را اضافه کنید.

یک ظاهر طراحی شده

به عنوان مثال در نمای تبلت ، می توانید دکمه منو را انتخاب کرده و رنگ پس زمینه دکمه را تنظیم کنید.

1. دکمه منو را انتخاب کنید
2. Open Style panel >پیشینه
3. برای باز کردن انتخاب رنگ ، روی Swatch کلیک کنید و یک رنگ را انتخاب کنید

استایل کردن نماد

همچنین می توانید نماد منو را با استفاده از تنظیمات تایپوگرافی سبک کنید. این نماد این سبک های تایپوگرافی را از عنصر والدین خود ، دکمه منو به ارث می برد.

برای تغییر اندازه نماد منو:

1. دکمه منو را انتخاب کنید
2. Open Style panel >تایپوگرافی
3. اندازه را تغییر دهید تا نماد منو بزرگتر یا کوچکتر شود

همچنین می توانید با تنظیم رنگ قلم ، رنگ نماد منو را تغییر دهید.

برای تغییر رنگ نماد منو:

1. دکمه منو را انتخاب کنید
2. Open Style panel >تایپوگرافی
3. برای باز کردن انتخاب رنگ ، روی Swatch کلیک کنید و یک رنگ را انتخاب کنید

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

یک ظاهر طراحی شده در حالت باز

ظاهر دکمه منو می تواند بر اساس حالت منو (نمایش یا پنهان کردن) سفارشی شود. هنگامی که منوی نمایش را فعال کرده اید ، و یک سبک را به دکمه منو تغییر دهید یا یک کلاس را به آن اضافه کنید ، یک کلاس "باز" ویژه به طور خودکار در قسمت انتخاب اضافه می شود.

مشابه نحوه کار یک ظاهر طراحی در حالت پیش فرض می توانید سبک های پس زمینه و تایپوگرافی را در دکمه منو اعمال کنید تا رنگ پس زمینه و رنگ نماد تغییر کند.