سازنده منو (Menu Builder)
Bricks 1.8 مجموعهای کاملاً جدید، واکنشگرا، دسترسپذیر و بسیار قابل سفارشیسازی از المانها را برای ساخت منوهای ناوبری در Bricks معرفی کرد.
سازنده منوی جدید از ۵ المان جدید (فهرستشده در پایین) تشکیل شده که میتوانید آنها را ترکیب کنید، تطبیق دهید و پیکربندی کنید تا انواع مختلف منوهای دسکتاپ و موبایل طراحی کنید.
برای اطمینان از دسترسپذیری و استایلدهی مناسب، بهترین روشهایی وجود دارد که باید بدانید. لطفاً وقت بگذارید و اطلاعات زیر را مرور کنید تا درک محکمیاز این ابزار جدید و قدرتمند داشته باشید.
Nav (nestable)
این المان nestable جدید هم منوی دسکتاپ و هم منوی موبایل شما را در خود جای میدهد.
مانند هر المان nestable دیگری، اکنون میتوانید هر المانی را به منوهای خود در Bricks اضافه کنید و دیگر به Nav menu قدیمی «تخت» محدود نیستید.
یک تنظیم داخلی برای انتخاب breakpoint ای وجود دارد که میخواهید منوی موبایل را در آن نمایش دهید. منوی موبایل از همان markup و المانهای منوی دسکتاپ استفاده میکند. فقط برای دستگاههای موبایل و صفحهنمایشهای کوچک بهینهسازی و استایلدهی شده است.
همچنین میتوانید منوهای موبایل با محتوا/المانهای کاملاً متفاوت با استفاده از المانهای Offcanvas و Toggle جدید طراحی کنید. هر دو را بعداً بررسی خواهیم کرد.
Text link
یک المان جدید ساده اما بسیار کاربردی برای ایجاد لینکهای متنی ساده در منوی ناوبری (به علاوه یک آیکون در صورت نیاز). این گزینه بسیار بهتر از تبدیل یک المان Basic Text به لینک است. البته میتوانید Text link را در هر جای دیگری از سایت خود هم استفاده کنید.
Dropdown (nestable)
از المان Dropdown جدید برای ایجاد زیرمنوهای کاملاً دسترسپذیر استفاده کنید. میتوانید به هر تعداد سطح که بخواهید با افزودن dropdown در داخل dropdown، آنها را تو در تو کنید. همچنین میتوانید انتخاب کنید چه زمانی یک dropdown فعال شود (با hover، کلیک، یا هر دو).
فلش کوچک dropdown کنار متن/لینک dropdown همیشه اجازه میدهد Dropdown را از طریق صفحهکلید (با فشار دادن SPACE یا ENTER) برای دسترسپذیری toggle کنید.
یک Dropdown میتواند با یک کلیک به یک mega menu کاملاً nestable تبدیل شود. این mega menu میتواند کل عرض viewport را پوشش دهد یا با عرض و موقعیت عمودی هر المان دیگری در صفحه شما تطبیق پیدا کند.
حتی میتوانید منوهای موبایل چند سطحی بسازید که فقط dropdown فعال به نمایش در میآید.
همچنین تنظیماتی برای طراحی آسان فلشهای dropdown سفارشی داریم.
Toggle
هدف اصلی این آیکون/دکمه «همبرگر» toggle کاملاً دسترسپذیر، نمایش/مخفیکردن منوی موبایل و/یا المانهای Offcanvas است.
میتوانید از افکتهای انیمیشن مختلف انتخاب کنید، و حتی آیکون toggle سفارشی خود را تنظیم کنید.
Toggle بهطور خودکار زمینه Offcanvas یا Nav (Nestable) ای را که در آن قرار گرفته تشخیص میدهد. اگر چندین المان قابل toggle دارید یا میخواهید یک المان خاص را فعال کنید، فقط «CSS selector» آن را در فیلد کنترل وارد کنید.
میتوانید از آن برای کارهای بسیار بیشتری هم استفاده کنید. چون تنظیماتی برای toggle هر ویژگی HTML هر المانی در صفحه شما ارائه میدهد.
triggerهای مشابه از طریق Interactions هم قابل دستیابی است. اما Toggle دارای منطق داخلی دسترسپذیری و سازنده منو است که کل فرآیند toggle را بسیار سریعتر، آسانتر و بهتر میکند.
Offcanvas (nestable)
به دلیل nestable بودن، المان Offcanvas جدید به شما اجازه میدهد منوهای موبایل منحصربهفردی با محتوای کاملاً متفاوت از منوی دسکتاپ بسازید. میتوانید Offcanvas را با هر المانی پر کنید و به منوها محدود نیستید.
Offcanvas با دو افکت میآید: slide-in (پیشفرض) و offset، و میتواند از طریق المان «Toggle» باز/بسته شود. همانطور که در بخش راهاندازی Offcanvas در پایین میبینید، بسیار ساده است.
از Bricks 1.11، تعامل «Toggle Offcanvas» جدید به شما اجازه میدهد Offcanvas خود را از هر المانی toggle کنید.
ساختار پیشفرض منو
هنگامیکه یک المان Nav (Nestable) به canvas اضافه میکنید، با ۲ Nav link، ۱ Dropdown و ۲ المان Toggle (برای نمایش و مخفیسازی منوی موبایل) پر میشود.
چون یک المان nestable است، میتوانید هر المان Bricks را داخل منوی خود اضافه کنید.
Block «Nav items» یک المان خاص است که نمیتوان آن را بهصورت جداگانه حذف کرد زیرا تمام آیتمهای منوی سطح بالا را نگه میدارد و بهعنوان wrapper منوی موبایل عمل میکند. همین موضوع در مورد Div «Content» داخل المان Dropdown صدق میکند که تمام محتوای dropdown را در خود جای میدهد.
تمام آیتمهای منوی سطح بالا بهطور خودکار در یک تگ HTML li برای دسترسپذیری قرار میگیرند. «Nav items» از تگ ul استفاده میکند. همین قانون برای ساختار Dropdown هم صدق میکند.
ساختار پیشفرض منوی موبایل
بهطور پیشفرض، منوی موبایل در breakpoint «Mobile landscape» قابل مشاهده میشود. یعنی بهجای نمایش آیتمهای منوی سطح بالا، یک Toggle (همبرگر) نمایش داده میشود که با کلیک روی آن منوی موبایل باز میشود. البته میتوانید هنگام ویرایش المان Nav nestable، هر breakpoint دیگری را برای شروع نمایش منوی موبایل انتخاب کنید.
مهم
مهم: مطمئن شوید تنظیمات المان «Mobile menu» و «Nav items» را روی breakpointی ویرایش میکنید که منوی موبایل در آن شروع به نمایش میکند (پیشفرض: Mobile landscape).
المان Toggle با برچسب «Toggle (Open: Mobile)» منوی موبایل را باز میکند (در تصویر بالا مشخص شده).
میتوانید از انیمیشنهای مختلفی که هنگام کلیک روی Toggle اجرا میشوند انتخاب کنید.
المان «Toggle (Close: Mobile)» داخل «Nav items» (wrapper منوی موبایل) قرار دارد.
Mega menu
ساخت mega menu با Bricks نمیتوانست آسانتر باشد. فقط تنظیم mega menu را در المان «Dropdown» دلخواه خود «Enable» کنید.
بهطور پیشفرض، Dropdown Content کل عرض موجود (viewport) را پوشش میدهد:
همچنین میتوانید یک «CSS selector» تعریف کنید که mega menu با عرض و موقعیت افقی آن تطبیق یابد. تصویر زیر از id المان در Container بیرونی استفاده میکند:
«Content» Dropdown فقط یک المان Div است. این به شما اجازه میدهد هر layout mega menu ای بسازید:
WordPress mega menu
همچنین میتوانید mega menu را به منوی وردپرس خود اضافه کنید با فعالسازی تنظیم «Mega menu» در المان «Nav menu» خود:
بعد، mega menu خود را با استفاده از یک قالب جدید (نوع قالب: section) بسازید.
سپس به «Appearance > Menus» بروید و آیتم منوی سطح بالایی که میخواهید این mega menu زیر آن نمایش داده شود را باز کنید، و قالب mega menu خود را از گزینههای «Mega menu» انتخاب کنید:
قالب mega menu شما اکنون هنگام hover روی این آیتم منو در فرانتاند نمایش داده میشود.
منوهای dropdown چند سطحی
ساخت dropdown های چند سطحی هم به همان سادگی است. فقط تنظیم «Multilevel» را روی یک Dropdown جداگانه یا مستقیماً روی المان «Nav nestable» فعال کنید تا برای همه Dropdown های شما اعمال شود.
«Multilevel» به این معنی است که فقط Dropdown Content فعال قابل مشاهده است. این ویژگی بهویژه برای منوهای dropdown با آیتمهای زیاد یا برای dropdown هایی با چندین Dropdown تو در تو مفید است، زیرا آنها اغلب viewport را از حد خارج میکنند. بهویژه در موبایل.
یک لینک «بازگشت» قابل سفارشیسازی هم میتوان تنظیم کرد که بهعنوان اولین آیتم هر سطح Dropdown نمایش داده میشود.
از آنجایی که فقط Dropdown فعال قابل مشاهده است، dropdown چند سطحی بهطور خودکار با کلیک toggle میشود، نه با hover.
همچنین فقط باید «Multilevel» را در سطح root Dropdown فعال کنید. تمام Dropdown های فرعی بهصورت پیشفرض قابلیت multilevel دارند.
منوهای multilevel وردپرس
Bricks 1.8 به شما اجازه میدهد زیرمنوهای وردپرس خود را هم به منوهای multilevel تبدیل کنید. فقط تنظیم «Multilevel» المان «Nav menu» خود را فعال کنید، سپس تنظیم «Multilevel» آیتمهای منوی وردپرس را در «Appearance > Menus» فعال کنید:
منوهای dropdown استاتیک (موقعیت)
بهطور پیشفرض، محتوای dropdown با absolute موقعیتیابی میشود. این آن را از جریان document خارج میکند. که در یک منوی دسکتاپ رفتار مورد انتظار/مطلوب است.
اما وقتی، برای مثال، Dropdown داخل یک Offcanvas قرار میگیرد، احتمالاً این رفتار را نمیخواهید.
بلکه میخواهید محتوای dropdown با کلیک نمایش داده شود و درست زیر toggle dropdown و در جریان عادی document قرار گیرد.
برای این کار فقط تنظیم «Position: Static» را هنگام ویرایش Dropdown دلخواه خود فعال کنید.
منوهای dropdown وردپرس
برای استفاده از منوی وردپرس داخل nav nestable سفارشی خود، المان «Nav menu» را داخل المان Dropdown > Content اضافه کنید. سپس آن را ویرایش کنید و منوی وردپرسی که میخواهید داخل dropdown نمایش دهید را انتخاب کنید.
این بدان معناست که هر منوی وردپرسی که برای nav nestable خود میسازید باید آیتمهای منویی را که میخواهید داخل یک dropdown خاص نمایش دهید در خود داشته باشد.
ما این رویکرد را انتخاب کردیم زیرا به شما اجازه میدهد از تمام گزینههای سفارشیسازی nav nestable بهره ببرید، در حالی که هنوز میتوانید منوی خود را از طریق وردپرس کنترل کنید.
میتوانید این منوی وردپرس را با ویرایش «Dropdown» ای که در آن قرار داده شده استایل دهید، یا اگر میخواهید آن را مثل کل منو استایل دهید، میتوانید تنظیمات «Dropdown» در «Nav nestable» خود را تنظیم کنید.
منوهای موبایل منحصربهفرد (Offcanvas + Toggle)
از المان Offcanvas جدید برای ساخت منوهای موبایل منحصربهفرد استفاده کنید. یا هر محتوای دیگری که میخواهید از طریق المان Toggle به نمایش درآورید.
بیایید با افزودن یک المان Offcanvas به صفحه شروع کنیم.
یادداشت
مطمئن شوید المان Offcanvas را بیرون از «Nav (nestable)» قرار میدهید. در غیر این صورت، منطق Toggle این دو المان قابل toggle میتواند با هم تداخل داشته باشد. ما آن را بعد از «Nav nestable» قرار میدهیم.
از آنجایی که از نمای پیشفرض منوی موبایل Nav nestable استفاده نمیکنیم، میتوانیم المان «Toggle (Close: Mobile)» را حذف کنیم.
از المان «Toggle (Open: Mobile)» برای باز کردن المان Offcanvas استفاده خواهیم کرد. فقط ID المان Offcanvas را از پنل کپی کنید، المان «Toggle (Open: Mobile)» را ویرایش کنید و آن را در تنظیم «CSS selector» جایگذاری کنید.
تغییرات را ذخیره کنید و به فرانتاند بروید. یک کلیک روی آیکون Toggle باید Offcanvas شما را باز کند.
از آنجایی که Offcanvas یک المان nestable است، میتوانید هر layout و المانی داخل آن اضافه کنید.
Offcanvas از پیش با یک Toggle بستن پر شده است. کلیک بیرون از Offcanvas (روی backdrop) هم آن را میبندد.
هنگام ویرایش Offcanvas در سازنده، مطمئن شوید تنظیم «Keep open while styling» را فعال کنید تا Offcanvas هنگام ویرایش المانهای مختلف ناپدید نشود.
منوهای موبایل غیر تمامصفحه
برای نمایش منوی موبایل پیشفرض بدون پوشش کل صفحه، Nav (nestable) خود را ویرایش کنید و «Height» را زیر «Mobile menu» روی fit-content تنظیم کنید.
اینطور ارتفاع منوی موبایل شما بهطور خودکار بر اساس محتوایش رشد میکند یا کوچک میشود.
سپس «Position» «Mobile menu» را به دلخواه خود تنظیم کنید (به تصویر بالا نگاه کنید) تا Toggle را نپوشاند.
از آنجایی که المان «Nav items» بهعنوان wrapper منوی موبایل عمل میکند، میتوانید آن را ویرایش کنید تا padding، background و غیره منوی موبایل خود را تنظیم کنید. مطمئن شوید این تغییرات استایل را روی breakpointی انجام میدهید که منوی موبایل شما از آنجا شروع به نمایش میکند، تا آن استایلها فقط روی موبایل اعمال شوند و نه روی منوی دسکتاپ.
حال که منوی موبایل دیگر کل صفحه را نمیپوشاند، احتمالاً میتوانید المان «Toggle (Close: Mobile)» که Bricks بهطور پیشفرض اضافه میکند را حذف کنید.
نکته جانبی: برای جلوگیری از پوشاندن Toggle توسط منوی موبایل، که ممکن است در سایزها و موقعیتهای خاص صفحه اتفاق بیفتد، المان Toggle را ویرایش کنید و z-index آن را زیر «Style > Layout > Z-index» روی مقدار 1001 یا بیشتر تنظیم کنید.