کلاسهای CSS ناوبری در CMS bluetronix - مرور و کاربرد
در این مرور کلی میتوانی تمام کلاسهای CSS مهم ناوبری در CMS bluetronix را پیدا کنی. یاد بگیر چگونه با چند تغییر ساده طراحی، واکنشگرایی و رفتار ساختار منوی خود را به طور خاص تنظیم کنی.
کلاسهای CSS ناوبری توضیحات
اینجا یک مرور کلی فشرده از اینکه هر کلاس CSS در اسنیپت HTML شما چه کاربردی دارد، وجود دارد. بدین ترتیب میتوانی ترتیب و رفتار را بهسرعت تنظیم کنی.
مهم: یک جاگذاری از جدول ناوبری است (به عنوان مثال، 00_Menue) و هنگام رندر شدن با کلاسهای خودتان جایگزین میشود (به عنوان مثال، برای دیدvisibility، هایلایت، آیکونها بهازای هر منو).
مرور کلاسها
| کلاس | استفاده در | هدف / معنی | تعامل معمولی |
|---|---|---|---|
bx-DesktopHTML1 |
div بالای نوار ناوبری | نوار بالایی بالای منوی اصلی (به عنوان مثال، هشدارها، تبلیغات، بنر برنامه). | قابلیت مشاهده از طریق جایگذینی پایگاه داده (none) قابل کنترل است. |
bx-DesktopHTML2 |
div زیر نوار ناوبری | نوار پایینی زیر منوی اصلی (اطلاعات/برچسبهای اضافی). | قابلیت مشاهده از طریق none. |
bx-nav-outer |
پوشش برای nav.bx-nav |
محل خارجی برای تعیین موقعیت (به عنوان مثال، چسبنده، سایه، عرض). | چارچوب طرح برای عرض کامل صفحه. |
bx-nav |
nav ناوبری اصلی | ناوبری پایه (Grid/Flex، پسزمینه، ارتفاع). | استایلهای جهانی نوار ناوبری و سازگاری. |
bx-navbar-left |
ستون چپ نوار ناوبری | محدودهای برای آیکن منو (برگر) و لوگو. | شامل .bx-nav-icon و .bx-nav-brand. |
bx-navbar-center |
وسط نوار ناوبری | ظرفیتی برای موارد منو (UL/LI) شامل زیرمنوها. | پر کردن موبایل/سمت با JS (منبع: #bxNavPoints). |
bx-navbar-right |
ستون سمت راست نوار ناوبری | گروه آیکون (جستجو، روشن/تیره، ورود، زبان، سبد خرید، نوار کناری). | دکمهها توابع JS را فراخوانی میکنند (به عنوان مثال، BlueSearchBar()). |
bx-nav-icon |
button / دکمههای آیکون | سبک یکسان برای همه آیکونهای نوار ناوبری. | هدفهای کلیک برای توگلها (نوار موبایل، نوار کناری، جستجو و غیره). |
bx-nav-brand |
img لوگو | نمایش لوگو (اندازه، فاصلهها). | اغلب با لینک به /index.html. |
bx-nav-item |
li در منوی اصلی | عنصر لیست یک مورد منو. | میتواند با .has-submenu ترکیب شود. |
bx-nav-link |
a در منو | سبک لینک منو (فونت، حالت هوور، حالتهای فعال). | نام/هدف از طریق جایگزین پایگاه داده دریافت میشود. |
has-submenu |
li با دراپداون | مورد منو با زیرمنو را علامتگذاری میکند؛ سبکهای دراپداون را فعال میکند. | دراپداون مربوطه .bx-navbar-dropdown را باز/بسته میکند. |
submenu-toggle |
دکمه کنار لینک | عناصر کنترلی برای باز و بسته کردن زیرمنو (آیکون Chevron). | معمولا فقط در صفحههای بزرگتر دیده میشود (به کلاسهای ابزاری مراجعه کنید). |
d-none، d-lg-inline |
کلاسهای ابزاری در دکمه | کنترل دید (برای مثال، پنهان کردن → نمایش به صورت inline از lg). | رفتار پاسخگو از Toggles. |
bx-menu |
ul در منوی کشویی | فهرست موارد زیرمنو. | بهوسیله ناوبری از پایگاه داده پر میشود. |
bx-navbar-dropdown |
ul (ظرف منوی کشویی) | پنل منوی کشویی (موقعیت، سایه، انیمیشن). | با حرکت ماوس/کلیک یا .submenu-toggle باز میشود. |
bx-dropdown-item |
li در منوی کشویی | یک مورد زیرمنو. | شامل .bx-dropdown-link. |
bx-dropdown-link |
a در منوی کشویی | سبک لینک در داخل منوی کشویی. | وضعیتهای Hover و Focus برای بهبود کاربری. |
bx-mobile-bar |
منوی موبایل (Off-Canvas در سمت راست) | کانتینر برای ناوبری موبایل و بلوکهای اختیاری بالا/پایین. | از طریق جاوا اسکریپت پر میشود (منبع: #bxNavPoints). |
bx-MobilHTML1، bx-MobilHTML2 |
بلوکها در نوار موبایل | فضای HTML اختیاری بالای/پایین منوی موبایل (مانند لوگو). | قابلیت دید از طریق |
bx-side-bar |
ناوبری کناری (آف-کانوواس چپ) | کانتینر برای ناوبری جایگزین/اضافی. | میتواند منو یا محتویات خود را بپذیرد. |
bx-SideHTML1، bx-SideHTML2 |
بلوکها در نوار کناری | فضای HTML اختیاری بالای/پایین منوی کناری (مانند لوگوی بزرگ). | قابلیت دید از طریق |
WKGBAnzDiv |
پوشش نشان در آیکون سبد خرید | منطقه شمارش محصور (طراحی/موقعیت). | شامل .WKGBAnzDivInner (تعداد). |
WKGBAnzDivInner |
داخل نشان | مقدار فعلی سبد خرید را نمایش میدهد. | از طریق جاوا اسکریپت با #WKGBAnz پر میشود. |
کلاسهای جایگزین از پایگاه داده
| جایگزین | توضیحات | نمونه |
|---|---|---|
|
هر منو با یک یا چند کلاس اختصاصی جایگزین میشود (برای مثال only-desktop، highlight، icon-contact). | قابلیت مشاهده/استایل هر دکمه را در Desktop، Mobile یا Side-Bar کنترل میکند. |
.bx-nav-item را با کلاسهای کنترلشده از DB ترکیب کن تا دکمههای خاصی را در #bxNavPoints (Desktop)، .bx-mobile-bar یا .bx-side-bar بهطور هدفمند نمایش یا پنهان کنی، بدون نیاز به تغییر کد HTML.
سوالات متداول
چه سوالاتی را مشتریان معمولاً از ما میپرسند
در اینجا میفهمی که کدام کلاسهای CSS در HTML نوار ناوبری تو برای چیدمان، رفتار و قابلیت مشاهده مسئول هستند. به این ترتیب میتوانی تغییرات خاصی در ناوبری اعمال کنی.
جایگزین به چه معناست؟
این جایگزین بهطور خودکار توسط کلاسهای CSS اختصاصی که در جدول ناوبری (برای مثال 00_Menue) مشخص کردهای، جایگزین میشود. با این کار قابلیت مشاهده، برجستهسازی و آیکنها را برای هر منو کنترل میکنی.
چگونه میتوانم محتوای بالای یا پایینی نوار ناوبری اضافه کنم؟
برای این کار از کلاسهای bx-DesktopHTML1 (بالا) و bx-DesktopHTML2 (پایین) استفاده کن. میتوانی آنها را در CMS از طریق CMS ⯈ وبسایت ⯈ سرصفحه نمایش یا پنهان کنی.
وظیفه کلاس bx-nav-outer چیست؟
این کلاس، کانتینر خارجی ناوبری است. با این کار عرض، سایه یا رفتار چسبنده نوار ناوبری را کنترل میکنی.
bx-nav به چه معناست؟
این کلاس ناوبری اصلی را خود تعریف میکند - به عبارت دیگر، چیدمان (برای مثال Flex/Grid)، رنگ پسزمینه و ارتفاع نوار ناوبری.
نوار ناوبری چگونه به ستونها تقسیم شده است؟
نوار ناوبری از سه بخش تشکیل شده است: bx-navbar-left (آرم و آیکن منو)، bx-navbar-center (موارد منو)، bx-navbar-right (آیکنهایی مانند جستجو، ورود، زبان، سبد خرید).
وظیفه کلاس bx-nav-icon چیست؟
این کلاس باعث ایجاد یک استایل یکسان برای همه آیکنهای نوار ناوبری میشود. این دکمهها برای مثال، باز کردن Mobile-Bar، Side-Bar یا جستجو را کنترل میکنند.
چگونه میتوانم لینکهای منو را طراحی کنم؟
با bx-nav-item عناصر لیست را تعریف میکنی و با bx-nav-link قوانین استایل برای متن، حالتهاي هاور و حالتهای فعال لینکها را تعیین میکنی.
کنترل زیرمنوها چگونه کار میکند؟
یک مورد منو با کلاس has-submenu شامل یک منوی کشویی است. با submenu-toggle (دکمه با آیکن فلش) میتوانی آن را باز یا بسته کنی.
کلاسهای Utility d-none و d-lg-inline به چه معنا هستند؟
این کلاسها قابلیت مشاهده عناصر خاص را بسته به اندازه صفحه نمایش کنترل میکنند - ایدهآل برای ناوبریهای واکنشگرا.
یک منوی کشویی چگونه ساخته شده است؟
یک منوی کشویی از bx-navbar-dropdown (ظرف) تشکیل شده است، که شامل bx-menu (لیست) با bx-dropdown-item و bx-dropdown-link برای زیرمجموعههای مختلف است.
چگونه بار موبایل کار میکند؟
bx-mobile-bar در دستگاههای همراه به عنوان منوی افقی در سمت راست باز میشود. محتویات آن از #bxNavPoints با استفاده از JS بارگذاری میشود. میتوانید بلوکهای اضافی را با bx-MobilHTML1 و bx-MobilHTML2 اضافه کنید.
نوار کناری چیست؟
bx-side-bar یک منوی افقی در سمت چپ (معمولا) است. در اینجا میتوانید محتوای دلخواه یا عناصر ناوبری را با bx-SideHTML1 و bx-SideHTML2 قرار دهید.
شمارنده سبد خرید چگونه نمایش داده میشود؟
Wrapper WKGBAnzDiv شامل WKGBAnzDivInner است که با استفاده از JS (از طریق #WKGBAnz) تعداد مقاله فعلی را نمایش میدهد – معمولا به صورت علامت در آیکون سبد خرید.
چگونه میتوانم دکمههای خاصی را فقط در بخشهای معین نمایش بدهم؟
.bx-nav-item را با ترکیب کنید. به این ترتیب میتوانید دکمهها را به طور خاص در #bxNavPoints (نسخه دسکتاپ)، .bx-mobile-bar یا .bx-side-bar نشان دهید یا پنهان کنید، بدون اینکه کد HTML را تغییر دهید.