پرش به مطلب اصلی

منوها(فرعی)

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

نکته

منوهای نشان داده شده در اینجا سفارشی ساخته شده اند. مدال هایی که بوت‌استرپ ارائه میدهد نیز با صفحات قالب کاملا سازگار هستند اما نمیتوانند با منوهای قالب ترکیب شوند. میتوانید از مودال های بوت‌استرپ استفاده کنید

جایگذاری منوها​

منوها باید خارج از کلاس div class="page-content" قرار گیرند تا اطمینان حاصل شود که میتوانند به خوبی محتوا را مرور کنند و در صورت استفاده از افکت ها میتوانند محتوای صفحه را بدون شکستن آن کنترل کنند. لیست موارد زیر باید خارج از کلاس page-content قرار گیرد

  • هر آیتمی با کلاس "menu…"
  • action sheets
  • action modals
  • sidebars
  • snackbars
  • toasts

ساختار کلی و عمومی منوها​

اول از همه، یک ساختار ساده، بدون هیچ گونه تنظیمات اضافی را در نظر بگیرید. برای درک بهتر، هر attribute را در مثال زیر در یک خط جداگانه ساخته شده است تا بتوانیم آنها را با شماره توضیح دهیم.

html
<div
  id="MENU_UNIQUE_NAME"
  class="menu MENU_STYLES MENU_BOX_POSITION"
  data-menu-effect="MENU_EFFECT">
  <!-- Place your menu, action sheet, action modal stuff here -->
</div>

خط 2 آی دی منو است که باید منحصر به فرد باشد تا بتوانیم از آن برای فراخوانی آن از دکمه HTML مورد نظر خود یا مستقیماً از جاوا اسکریپت استفاده کنیم.
خط 3 جایی است که ما نوع منویی را که میخواهیم تعریف میکنیم و همچنین سبکی به آن اضافه میکنیم. ابتدا کلاس menu را اضافه کنید که ضروری است.

MENU_STYLES: کلاس های کاربردی مانند rounded-VALUE یا shadow-VALUE برای تغییر شکل منو. حتی می‌توانید با افزودن کلاس menu-box-detached، کاری کنید که منو از کناره‌های صفحه جدا شود و حس شناور بودن را داشته باشد.
MENU_BOX_POSITION: برای کنترل محل قرارگیری منو

  • menu-box-left: برای ایجاد منوی سمت چپ
  • menu-box-right: برای ایجاد منوی سمت راست
  • menu-box-bottom: برای ایجاد منوی پایین
  • menu-box-top: برای ایجاد منوی بالا
  • menu-box-modal: برای ایجاد پنجره مودال

خط 4: افکتی است که میخواهید منوی شما داشته باشد. این برای menu-box-modal صدق نمیکند.

  • MENU_EFFECT: از همه جلوه های منوی زیر پشتیبانی میکند
    • menu-push: محتوای صفحه را با ارتفاع یا عرض منوی انتخابی شما فشار میدهد
    • menu-parallax: محتوای صفحه را به اندازه 1/10 اندازه منو فشار میدهد و افکت پارالاکس ایجاد میکند

خط 5: جایی است که تمام محتوایی را که میخواهید نشات داده شود در منوی خود قرار میدهید.

چگونه میتوانم منویی مانند این را فعال یا نشان دهم؟​

برای فعال کردن منو، تنها کاری که باید انجام دهید این است که data-menu="MENU_UNIQUE_NAME" را به دکمه مورد نظر خود اضافه کنید. هر منو باید در خط 2 یک نام منحصر به فرد داشته باشد و آن نام به data-menu روی دکمه‌ای که میخواهید منو را از آن فعال کنید، اضافه خواهد شد.

چگونه میتوانم یک منو را با کدنویسی نشان دهم یا پنهان کنم؟​

در فایل custom.js، در داخل تابع init_template() میتوانید منوها را با استفاده از کدهای زیر فعال کنید.

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

js
//show menu
menu("your-menu-id", "show", 250);
//hide menu
menu("your-menu-id", "hide", 250);

آیا میتوانم منوها را از طریق منوها فعال کنم؟​

بله، در منوی خود، دکمه ای با data-menu="your-menu-id" اضافه کنید و آن منو فعال میشود.

چگونه یک منو را از داخل منو ببندم؟​

کلاس close-menu را به هر دکمه ای در منوی خود اضافه کنید باعث بسته شدن آن میشود.

نمونه ها​

منوی پایین​

مورد استفاده در Action Sheets، منوهای اشتراک ‌گذاری، و هر چیزی که از پایین می‌آید.

html
<div
  id="MENU_UNIQUE_NAME"
  class="menu menu-box-bottom menu-box-detached rounded-m"
  data-menu-height="300"
  data-menu-effect="menu-parallax">
  <!-- your menu stuff here-->
</div>

منوی بالا​

مورد استفاده در Action Sheets، منوهای اشتراک ‌گذاری، و هر چیزی که از بالا می‌آید.

html
<div
  id="MENU_UNIQUE_NAME"
  class="menu menu-box-top menu-box-detached rounded-m"
  data-menu-height="300"
  data-menu-effect="menu-parallax">
  <!-- your menu stuff here-->
</div>

منوی سمت چپ​

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

html
<div
  id="MENU_UNIQUE_NAME"
  class="menu menu-box-left"
  data-menu-width="300"
  data-menu-effect="menu-parallax">
  <!-- your menu stuff here-->
</div>

منوی سمت راست​

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

html
<div
  id="MENU_UNIQUE_NAME"
  class="menu menu-box-right"
  data-menu-width="300"
  data-menu-effect="menu-parallax">
  <!-- your menu stuff here-->
</div>

آیا هنوز میتوانم از منوهای پیشفرض بوت‌استرپ استفاده کنم؟​

همچنان میتوانید از سیستم منوی بوت‌استرپ استفاده کنید، آن‌ها میتوانند به صورت کدنویسی مانند آنچه در بوت‌استرپ بیان شده است راه‌اندازی و فعال شوند، اما موارد زیر را در نظر داشته باشید.

نکته

  • همه کدهای HTML منو را خارج از کلاس page-content قرار دهید
  • کد فعال کننده خود را در فایل custom.js داخل تابع init_template() قرار دهید
آخرین به روز رسانی در تاریخ