نوار کناری(sidebar)

نکته

این المان باید خارج از محتوای صفحه قرار گیرد

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

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

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

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

چگونه یک سادبار یا منو را با یک دکمه یا المان فعال کنم

هر منویی را میتوان با افزودن data-menu="menu-UNIQUE-ID" به هر المانی که میخواهید به عنوان یک فعال کننده استفاده کنید، راه‌اندازی کرد.

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

منوها را میتوان با استفاده از آی دی آنها در تابع زیر در custom.js بعد از خط 88 با کدنویسی فعال کرد.

js

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

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

ابتدا، صفحه component-sidebars.html را بررسی کنید. توجه داشته باشید که کد منوی شما باید خارج از محتوای صفحه قرار گیرد.

html

<div
  id="MENU_UNIQUE_NAME"
  class="menu MENU_BOX_POSITION"
  data-menu-width="VALUE_IN_PX"
  data-menu-effect="MENU_EFFECT"
>
  {/* Add what you want in your sidebar here */}
</div>

خط 1 نام منحصر به فردی است که باید به منوی خود بدهید. این برای فعال کردن منو با استفاده از data-menu="unique-id" یا با کدنویسی انجام میشود.
خط 2 کلاسی است که تگ را به عنوان یک منو و همچنین موقعیت آن تعریف میکند. MENU_BOX_POSITION را با menu-box-left یا menu-box-right جایگزین کنید.
خط 3 عرضی است که برای نوار کناری خود میخواهید. این مقدار بر حسب پیکسل یا در مورد نوارهای کناری تمام صفحه، 100% تنظیم میشود.
خط 4 افکت منو است. میتوانید MENU_EFFECT را با menu-parallax یا menu-push یا menu-over جایگزین کنید. توجه داشته باشید که این افکت در اندازه 100٪ نوار کناری اعمال نمیشود.

الان شما یک منوی نوار کناری دارید هر محتوایی را که میخواهید داخل آن اضافه کنید.

چگونه میتوانم نوار کناری را هنگام باز شدن ببندم؟

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

آیا میتوانم یک نوار کناری را از یک نوار کناری دیگر باز کنم؟

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