ब्ल्यूट्रॉनिक्स सीएमएस में नेविगेशन सीएसएस-क्लासेस – अवलोकन और अनुप्रयोग
इस अवलोकन में आप bluetronix CMS में नेविगेशन के सभी महत्वपूर्ण CSS क्लास देखेंगे। जानें कि कैसे आप कुछ समायोजनों के साथ अपनी मेन्यू संरचना के डिजाइन, प्रतिक्रियाशीलता और व्यवहार को व्यक्तिगत रूप से तैयार कर सकते हैं।
नेविगेशन CSS-क्लास विवरण
यहाँ एक संक्षिप्त अवलोकन है, कि आपके HTML स्निपेट में कौन सी CSS क्लास किसके लिए है। इस तरह आप लेआउट और व्यवहार को तेजी से समायोजित कर सकते हैं।
महत्वपूर्ण: नेविगेशन टेबल का एक प्लेसहोल्डर है (जैसे 00_Menue) और इसे रेंडर करते समय अपनी क्लास के द्वारा प्रतिस्थापित किया जाता है (जैसे दृश्यता, हाइलाइटिंग, मेनू बिंदु प्रति आइकन)।
क्लास अवलोकन
| क्लास | उपयोग में | उद्देश्य / अर्थ | विशिष्ट इंटरैक्शन |
|---|---|---|---|
bx-DesktopHTML1 |
div Navbar के ऊपर | मुख्य मेनू के ऊपर शीर्ष पट्टी (जैसे, नोटिस, प्रचार, ऐप बैनर)। | DB प्लेसहोल्डर (none) के माध्यम से दृश्यता नियंत्रित। |
bx-DesktopHTML2 |
Navbar के नीचे div | मुख्य मेनू के नीचे कैप्शन पट्टी (अतिरिक्त जानकारी/बेज)। | none के माध्यम से दृश्यता। |
bx-nav-outer |
nav.bx-nav के चारों ओर रैपर |
स्थिति के लिए बाहरी कंटेनर (जैसे, स्टिकी, छाया, चौड़ाई)। | पूर्ण पृष्ठ चौड़ाई के लिए लेआउट फ़्रेम। |
bx-nav |
nav मुख्य नेविगेशन | बुनियादी Navbar (ग्रिड/फ्लेक्स, पृष्ठभूमि, ऊँचाई)। | वैश्विक Navbar-शैली और उत्तरदायित्व। |
bx-navbar-left |
Navbar-लेफ्ट कॉलम | मेनू आइकन (बर्गर) और लोगो के लिए क्षेत्र। | .bx-nav-icon और .bx-nav-brand को शामिल करती है। |
bx-navbar-center |
Navbar-मध्य | मेनू प्रविष्टियों (UL/LI) के लिए कंटेनर जिसमें उप-मेनू शामिल हैं। | JS के माध्यम से मोबाइल/साइडबार भरता है (स्रोत: #bxNavPoints). |
bx-navbar-right |
Navbar-राइट कॉलम | आइकन समूह (खोज, लाइट/डार्क, लॉगिन, भाषा, शॉपिंग कार्ट, साइडबार)। | बटन JS फ़ंक्शंस को सक्रिय करते हैं (जैसे BlueSearchBar()). |
bx-nav-icon |
button / आइकन-बटन | सभी Navbar आइकन के लिए एक समान शैली। | टॉगल के लिए क्लिक लक्ष्य (मोबाइल-बार, साइड-बार, खोज, आदि)। |
bx-nav-brand |
img लोगो | लोगो का प्रदर्शन (आकार, अनुप्रस्थ)। | अक्सर /index.html पर लिंक होता है। |
bx-nav-item |
li मुख्य मेनू में | मेनू विकल्प का सूची तत्व। | .has-submenu के साथ संयोजित किया जा सकता है। |
bx-nav-link |
a मेनू में | मेनू लिंक की शैली (श्रेणी, होवर, सक्रिय राज्य)। | DB प्लेसहोल्डर के माध्यम से लक्ष्य/नाम प्राप्त करता है। |
has-submenu |
li ड्रॉपडाउन के साथ | उप मेनू के साथ मेनू विकल्प को चिह्नित करता है; ड्रॉपडाउन-शैली को सक्रिय करता है। | संबंधित .bx-navbar-dropdown को खोलता/बंद करता है। |
submenu-toggle |
button लिंक के पास | उप मेनू को खोलने/बंद करने का नियंत्रण (चेवरोन-आइकन)। | ज्यादातर बड़े स्क्रीन पर ही दिखाई देता है (यूटिलिटी क्लासेस देखें)। |
d-none, d-lg-inline |
बटन पर उपयोगिता वर्ग | दृश्यता नियंत्रण (जैसे छिपाना → lg इनलाइन दिखाना)। | टॉगल का प्रतिक्रियाशील व्यवहार। |
bx-menu |
ul ड्रॉपडाउन में | उप-मेनू प्रविष्टियों की सूची। | डेटाबेस से नेविगेशन द्वारा भरा जाता है। |
bx-navbar-dropdown |
ul (ड्रॉपडाउन कंटेनर) | ड्रॉपडाउन पैनल (स्थिति, छाया, एनीमेशन)। | हॉवर/क्लिक या .submenu-toggle द्वारा खोलता है। |
bx-dropdown-item |
li ड्रॉपडाउन में | एकल उप-मेनू प्रविष्टि। | .bx-dropdown-link शामिल है। |
bx-dropdown-link |
a ड्रॉपडाउन में | ड्रॉपडाउन के भीतर लिंक शैली। | बेहतर उपयोगिता के लिए हॉवर/फोकस स्थितियां। |
bx-mobile-bar |
मोबाइल मेनू (दायीं ओर ऑफ-कैनवास) | मोबाइल नेविगेशन और ऊपर/नीचे वैकल्पिक ब्लॉकों के लिए कंटेनर। | JS द्वारा भरा जाता है (स्त्रोत: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
मोबाइल-बार में ब्लॉक्स | मोबाइल मेनू के ऊपर/नीचे वैकल्पिक HTML क्षेत्र (जैसे, लोगो)। | |
bx-side-bar |
साइड नेविगेशन (बिना कैनवास के बाईं ओर) | वैकल्पिक/अतिरिक्त नेविगेशन के लिए कंटेनर। | मेनू या अपनी सामग्री को समाहित कर सकता है। |
bx-SideHTML1, bx-SideHTML2 |
साइड-बार में ब्लॉक्स | साइड मेनू के ऊपर/नीचे वैकल्पिक HTML क्षेत्र (जैसे, बड़ा लोगो)। | |
WKGBAnzDiv |
कार्ट आइकन में बैज-लपेटन | लपेटने वाला काउंटर क्षेत्र (लेआउट/स्थिति)। | .WKGBAnzDivInner (संख्या) शामिल है। |
WKGBAnzDivInner |
बैज-आंतरिक | वर्तमान कार्ट मात्रा प्रदर्शित करता है। | JS के माध्यम से #WKGBAnz के द्वारा भरा जाता है। |
DB से प्लेसहोल्डर क्लासेस
| प्लेसहोल्डर | विवरण | उदाहरण |
|---|---|---|
|
प्रत्येक मेनू आइटम द्वारा एक या एक से अधिक स्वयं क्लासों के द्वारा बदला जाएगा (जैसे, only-desktop, highlight, icon-contact)। | डेस्कटॉप, मोबाइल या साइड-बार में बटन के अनुसार दृश्यता/शैली को नियंत्रित करता है। |
.bx-nav-item को DB-नियंत्रित क्लासों के साथ के माध्यम से संयोजित करें, ताकि विशेष तौर पर #bxNavPoints (डेस्कटॉप), .bx-mobile-bar या .bx-side-bar में बटनों को छिपाने/दिखाने के लिए HTML कोड को संशोधित किए बिना।
बहुत पूछे जाने वाले प्रश्न
ग्राहक अक्सर हमसे क्या पूछते हैं
"नेविगेशन CSS-क्लासेस विवरण" पृष्ठ का उद्देश्य क्या है?
यहाँ आप जानेंगे कि आपके Navbar-HTML में कौन सी CSS-क्लासेस लेआउट, व्यवहार और दृश्यता के लिए जिम्मेदार हैं। इससे आप नेविगेशन में विशेष संशोधन कर सकते हैं।
प्लेसहोल्डर का क्या अर्थ है?
यह प्लेसहोल्डर स्वचालित रूप से उन CSS-क्लासेस द्वारा प्रतिस्थापित किया जाता है, जिन्हें आप नेविगेशन तालिका (जैसे 00_Menue) में निर्दिष्ट करते हैं। इसके द्वारा आप व्यक्तिगत मेनू अंक के लिए दृश्यता, उजागर करना और आइकों को नियंत्रित करते हैं।
मैं Navbar के ऊपर या नीचे सामग्री कैसे जोड़ सकता हूँ?
इसके लिए bx-DesktopHTML1 (ऊपर) और bx-DesktopHTML2 (नीचे) क्लासेस का उपयोग करें। आप इन्हें CMS के माध्यम से CMS ⯈ Webseite ⯈ Kopfzeile पर दिखा या छिपा सकते हैं।
क्लास bx-nav-outer का क्या कार्य है?
यह नेविगेशन का बाहरी कंटेनर है। इससे आप Navbar की चौड़ाई, छाया या स्थायी व्यवहार को नियंत्रित कर सकते हैं।
bx-nav का क्या मतलब है?
यह क्लास मुख्य नेविगेशन को स्वयं परिभाषित करती है – यानी लेआउट (जैसे Flex/Grid), पृष्ठभूमि का रंग और Navbar की ऊँचाई।
Navbar कॉलम में कैसे विभाजित है?
Navbar तीन क्षेत्रों से बनी है: bx-navbar-left (लोगो & मेनू आइकन), bx-navbar-center (मेनू अंक), bx-navbar-right (आइकन जैसे खोज, लॉगिन, भाषा, कार्ट)।
क्लास bx-nav-icon क्या करती है?
यह सभी Navbar आइकों के लिए एक समान स्टाइलिंग प्रदान करती है। यह बटन, उदाहरण के लिए, 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 होते हैं।
Mobile-Bar कैसे काम करती है?
bx-mobile-bar मोबाइल उपकरणों पर दाईं ओर ऑफ-कैनवस मेनू के रूप में खुलती है। इसे JS के माध्यम से #bxNavPoints से सामग्री के साथ भरा जाता है। आप अतिरिक्त ब्लॉकों को bx-MobilHTML1 और bx-MobilHTML2 के साथ जोड़ सकते हैं।
साइड-बार क्या है?
bx-side-bar एक साइड ऑफ-कैनवास मेनू है (अधिकतर बाईं ओर)। यहां आप अपनी सामग्री या नेविगेशन तत्व रख सकते हैं, जिसे bx-SideHTML1 और bx-SideHTML2 से जोड़ा गया है।
कार्ट काउंटर कैसे प्रदर्शित किया जाता है?
रैपर WKGBAnzDiv में WKGBAnzDivInner है, जो JS के द्वारा (के माध्यम से #WKGBAnz) वर्तमान लेखों की संख्या दिखाता है - आमतौर पर कार्ट आइकन में बैज के रूप में।
कैसे मैं केवल कुछ क्षेत्रों में व्यक्तिगत बटन दिखा सकता हूँ?
.bx-nav-item को के साथ मिलाएं। таким образом вы можете настраивать видимость кнопок в #bxNavPoints (настольный), .bx-mobile-bar или .bx-side-bar, не изменяя HTML-код.