پرش به محتویات

Nav menu

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

تنظیمات

انتخاب منو

  • Menu (WordPress) (select) — منوی ناوبری وردپرس را برای نمایش انتخاب کنید. گزینه‌ها از منوهای وردپرس موجود پر می‌شوند. لینک مستقیم به مدیریت منوها در پیشخوان وردپرس دارد.

  • Alignment (direction) — جهت چیدمان منو. خاصیت flex-direction را برای selector .bricks-nav-menu کنترل می‌کند.

سطح اول (Top level)

  • Justify content (justify-content) — تراز افقی آیتم‌های منو. گزینه‌های space را شامل نمی‌شود. خاصیت justify-content را برای .bricks-nav-menu > li > a و .bricks-nav-menu > li > .brx-submenu-toggle کنترل می‌کند.

  • Gap (number with units) — فاصله بین آیتم‌های منو. خاصیت gap را برای .bricks-nav-menu کنترل می‌کند.

  • Margin (spacing) — margin دور آیتم‌های منو. خاصیت margin را برای .bricks-nav-menu > li کنترل می‌کند.

  • Padding (spacing) — padding داخل آیتم‌های منو. خاصیت padding را برای .bricks-nav-menu > li > a و .bricks-nav-menu > li > .brx-submenu-toggle > * کنترل می‌کند.

  • Background (background) — استایل پس‌زمینه آیتم‌های منو. ویدیو شامل نمی‌شود. خاصیت background را برای .bricks-nav-menu > li > a و .bricks-nav-menu > li > .brx-submenu-toggle کنترل می‌کند.

  • Border (border) — استایل border آیتم‌های منو. خاصیت border را برای .bricks-nav-menu > li > a و .bricks-nav-menu > li > .brx-submenu-toggle کنترل می‌کند.

  • Typography (typography) — تنظیمات فونت آیتم‌های سطح اول. خاصیت font را برای .bricks-nav-menu > li > a و .bricks-nav-menu > li > .brx-submenu-toggle > * کنترل می‌کند.

حالت فعال (Active State)

  • Active background (background) — پس‌زمینه آیتم‌های فعال/صفحه جاری. خاصیت background را برای selector‌های آیتم منوی جاری از جمله .bricks-nav-menu > .current-menu-item > a و ancestor‌ها کنترل می‌کند.

  • Active border (border) — border آیتم‌های فعال. خاصیت border را برای selector‌های آیتم منوی جاری کنترل می‌کند.

  • Active typography (typography) — typography آیتم‌های فعال. خاصیت font را برای selector‌های آیتم منوی جاری کنترل می‌کند.

آیکون

  • Icon (Sub menu) (icon) — آیکون toggle زیرمنو. بازرندر را فعال می‌کند. رندر SVG را برای .bricks-nav-menu > li.menu-item > .brx-submenu-toggle svg کنترل می‌کند.

  • Icon transform (transform) — تنظیمات transform برای آیکون‌های زیرمنو در حالت بسته. خاصیت transform را برای .bricks-nav-menu button[aria-expanded="false"] > * کنترل می‌کند.

  • Icon transform (Open) (transform) — تنظیمات transform برای آیکون‌های زیرمنو در حالت باز. خاصیت transform را برای .bricks-nav-menu button[aria-expanded="true"] > * کنترل می‌کند.

  • Icon typography (typography) — typography دکمه‌های toggle زیرمنو. font-family، font-weight، font-style، text-align، text-decoration، text-transform و letter-spacing شامل نمی‌شود. خاصیت font را برای .bricks-nav-menu > li.menu-item-has-children > .brx-submenu-toggle button[aria-expanded] کنترل می‌کند.

  • Icon position (select) — موقعیت آیکون‌های زیرمنو. پیش‌فرض: «Right».

  • Icon margin (spacing) — margin دور دکمه‌های toggle زیرمنو. خاصیت margin را برای .bricks-nav-menu .brx-submenu-toggle button کنترل می‌کند.

  • Icon padding (spacing) — padding داخل دکمه‌های toggle زیرمنو. خاصیت padding را برای .bricks-nav-menu .brx-submenu-toggle button کنترل می‌کند.

  • Position: Static (checkbox) — برای قرارگیری زیرمنوها در جریان سند فعال کنید (مثلاً داخل offcanvas).

  • Background (background) — استایل پس‌زمینه زیرمنوها. ویدیو شامل نمی‌شود. خاصیت background را برای .bricks-nav-menu .sub-menu کنترل می‌کند.

  • Border (border) — استایل border زیرمنوها. خاصیت border را برای .bricks-nav-menu .sub-menu کنترل می‌کند.

  • Box shadow (box-shadow) — سایه برای زیرمنوها. خاصیت box-shadow را برای .bricks-nav-menu .sub-menu کنترل می‌کند.

  • Transform (transform) — تنظیمات transform برای زیرمنوها. خاصیت transform را برای .bricks-nav-menu > li > .sub-menu و .bricks-nav-menu > li > .brx-megamenu کنترل می‌کند.

  • Transform (Open) (transform) — تنظیمات transform برای زیرمنوها در حالت باز. خاصیت transform را برای .bricks-nav-menu > li.open > .sub-menu و .bricks-nav-menu > li.open > .brx-megamenu کنترل می‌کند.

Caret

  • Size (number with units) — اندازه caret (مثلث راهنما). بازرندر را فعال می‌کند. خاصیت border-width را برای .bricks-nav-menu > li > .sub-menu.caret::before کنترل می‌کند.

  • Color (color) — رنگ caret. فقط وقتی اندازه caret تنظیم شده در دسترس است.

  • Transform (transform) — تنظیمات transform برای caret. فقط وقتی اندازه caret تنظیم شده در دسترس است.

  • Position (dimensions) — تنظیمات موقعیت caret. فقط وقتی اندازه caret تنظیم شده در دسترس است.

آیتم زیرمنو

  • Justify content (justify-content) — تراز افقی آیتم‌های زیرمنو. خاصیت justify-content را برای .bricks-nav-menu .sub-menu a و .bricks-nav-menu .sub-menu button کنترل می‌کند.

  • Padding (spacing) — padding داخل آیتم‌های زیرمنو. خاصیت padding را برای .bricks-nav-menu .sub-menu a و .bricks-nav-menu .sub-menu button کنترل می‌کند.

  • Background (background) — پس‌زمینه آیتم‌های زیرمنو. خاصیت background را برای .bricks-nav-menu .sub-menu .menu-item کنترل می‌کند.

  • Border (border) — border آیتم‌های زیرمنو. خاصیت border را برای .bricks-nav-menu .sub-menu > li کنترل می‌کند.

  • Typography (typography) — تنظیمات فونت آیتم‌های زیرمنو. خاصیت font را برای .bricks-nav-menu .sub-menu > li > a و .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * کنترل می‌کند.

حالت فعال زیرمنو

  • Active background (background) — پس‌زمینه آیتم‌های فعال زیرمنو. خاصیت background را برای selector‌های آیتم زیرمنوی جاری کنترل می‌کند.

  • Active border (border) — border آیتم‌های فعال زیرمنو. خاصیت border را برای selector‌های آیتم زیرمنوی جاری کنترل می‌کند.

  • Active typography (typography) — typography آیتم‌های فعال زیرمنو. خاصیت font را برای selector‌های آیتم زیرمنوی جاری کنترل می‌کند.

آیکون زیرمنو

  • Icon (icon) — آیکون toggle زیرمنو. بازرندر را فعال می‌کند. رندر SVG را برای .bricks-nav-menu .sub-menu .brx-submenu-toggle svg کنترل می‌کند.

  • Icon size (number with units) — اندازه آیکون‌های زیرمنو. خاصیت height و width را برای .bricks-nav-menu .sub-menu .brx-submenu-toggle svg کنترل می‌کند.

  • Icon transform (transform) — تنظیمات transform برای آیکون‌های زیرمنو.

  • Icon transform (Open) (transform) — تنظیمات transform برای آیکون‌های زیرمنو در حالت باز.

  • Icon typography (typography) — typography دکمه‌های toggle زیرمنو.

  • Icon position (select) — موقعیت آیکون‌های زیرمنو. پیش‌فرض: «Right».

  • Icon margin (spacing) — margin دور دکمه‌های toggle زیرمنو.

  • Icon padding (spacing) — padding داخل دکمه‌های toggle زیرمنو.

منوی موبایل (Mobile menu)

  • Hide at breakpoint / Show at breakpoint (select) — breakpoint نمایش/پنهان منوی موبایل. گزینه‌ها شامل همه breakpointها به علاوه «Always» و «Never». پیش‌فرض: «Mobile landscape». بازرندر را فعال می‌کند.

  • Position (select) — موقعیت منوی موبایل. گزینه‌ها: Right، Left. پیش‌فرض: «Left».

  • Top (number with units) — موقعیت بالای منوی موبایل. خاصیت top را برای .bricks-mobile-menu-wrapper کنترل می‌کند.

  • Width (number with units) — عرض منوی موبایل. پیش‌فرض: 300px.

  • Height (number with units) — ارتفاع منوی موبایل.

  • Fade in (checkbox) — انیمیشن fade-in برای منوی موبایل را فعال کنید.

  • Vertical (justify-content) — تراز عمودی محتوای منوی موبایل. پیش‌فرض: «Top».

  • Horizontal (align-items) — تراز افقی محتوای منوی موبایل. گزینه stretch شامل نمی‌شود. پیش‌فرض: «Top».

  • Text align (text-align) — تراز متن در منوی موبایل.

  • Background (background) — استایل پس‌زمینه wrapper منوی موبایل. خاصیت background را برای .bricks-mobile-menu-wrapper:before کنترل می‌کند.

  • Background filters (filters) — فیلترهای پس‌زمینه برای منوی موبایل.

  • Box shadow (box-shadow) — سایه برای منوی موبایل.

  • Overlay (background) — استایل پس‌زمینه overlay منوی موبایل. ویدیو شامل نمی‌شود.

سطح اول موبایل

  • Padding (spacing) — padding آیتم‌های سطح اول منوی موبایل. پیش‌فرض: بالا 0، راست 30، پایین 0، چپ 30.

  • Background (color) — رنگ پس‌زمینه آیتم‌های منوی موبایل.

  • Background (Active) (color) — رنگ پس‌زمینه آیتم‌های فعال منوی موبایل.

  • Border (border) — border آیتم‌های منوی موبایل.

  • Border (Active) (border) — border آیتم‌های فعال منوی موبایل.

  • Typography (typography) — تنظیمات فونت آیتم‌های منوی موبایل. text-align شامل نمی‌شود.

  • Typography (Active) (typography) — typography آیتم‌های فعال منوی موبایل.

آیکون موبایل

  • Icon (Sub menu) (icon) — آیکون toggle زیرمنوی موبایل. بازرندر را فعال می‌کند.

  • Close icon (Sub menu) (icon) — آیکون بستن toggle زیرمنوی موبایل. فقط وقتی آیکون اصلی تنظیم شده در دسترس است.

  • Icon typography (typography) — typography دکمه‌های toggle زیرمنوی موبایل. فقط وقتی آیکون تنظیم شده در دسترس است.

  • Icon position (select) — موقعیت آیکون‌های زیرمنوی موبایل. پیش‌فرض: «Right».

  • Icon margin (spacing) — margin دور دکمه‌های toggle زیرمنوی موبایل.

زیرمنوی موبایل

  • Padding (spacing) — padding آیتم‌های زیرمنوی موبایل.

  • Background (color) — رنگ پس‌زمینه آیتم‌های زیرمنوی موبایل.

  • Background (Active) (color) — رنگ پس‌زمینه آیتم‌های فعال زیرمنوی موبایل.

  • Border (border) — border آیتم‌های زیرمنوی موبایل.

  • Border (Active) (border) — border آیتم‌های فعال زیرمنوی موبایل.

  • Typography (typography) — تنظیمات فونت آیتم‌های زیرمنوی موبایل.

  • Active typography (typography) — typography آیتم‌های فعال زیرمنوی موبایل.

دکمه همبرگر (Hamburger toggle)

  • aria-label (text) — برچسب دسترسی‌پذیری برای دکمه همبرگر. پیش‌فرض: «Open mobile menu».

  • Toggle width (number with units) — عرض نوارهای دکمه همبرگر.

  • Color (color) — رنگ نوارهای دکمه همبرگر.

  • Hide close (checkbox) — دکمه همبرگر را وقتی منوی موبایل باز است پنهان کنید.

  • Color close (color) — رنگ دکمه همبرگر وقتی منوی موبایل باز است.

  • Close position (dimensions) — موقعیت دکمه همبرگر وقتی منوی موبایل باز است.

مگامنو (Mega menu)

  • Enable (checkbox) — قابلیت مگامنو را فعال کنید.

  • CSS selector (text) — CSS selector برای موقعیت‌دهی مگامنو. از عرض و موقعیت افقی نود هدف استفاده می‌کند. فقط وقتی مگامنو فعال است در دسترس است.

  • Toggle on (select) — نحوه فعال‌سازی مگامنوها. گزینه‌ها: Click، Hover، Click or hover. پیش‌فرض: «Hover». فقط وقتی مگامنو فعال است در دسترس است.

  • Transition (text) — تنظیمات transition برای مگامنوها. از dynamic data پشتیبانی می‌کند. خاصیت transition را برای .brx-megamenu کنترل می‌کند. فقط وقتی مگامنو فعال است در دسترس است.

  • Transform (transform) — تنظیمات transform برای مگامنوها. فقط وقتی مگامنو فعال است در دسترس است.

  • Transform (Open) (transform) — تنظیمات transform برای مگامنوها در حالت باز. فقط وقتی مگامنو فعال است در دسترس است.

چندسطحی (Multilevel)

  • Enable (checkbox) — قابلیت ناوبری چندسطحی را فعال کنید.

  • Back: Text (text) — متن دکمه «برگشت» در ناوبری چندسطحی. فقط وقتی چندسطحی فعال است در دسترس است.

  • Back: Typography (typography) — typography دکمه برگشت. فقط وقتی چندسطحی فعال است در دسترس است.

  • Back: Background (color) — رنگ پس‌زمینه دکمه برگشت. فقط وقتی چندسطحی فعال است در دسترس است.

مرجع توسعه‌دهنده

برای JSON schema کامل به Nav Menu Schema مراجعه کنید.