CSS नेविगेशन बार
Layout पाठ ने पृष्ठ क्षेत्रों का खाका खींचा। नेविगेशन बार वही लिंक पट्टी है जो लोगों को उन क्षेत्रों और पृष्ठों के बीच ले जाती है। सेमांटिक लिंक सूची से शुरू करें, उन्हें शांत पंक्ति में रखें, फिर hover संकेत जोड़ें — नेस्टेड ड्रॉपडाउन मेनू अगले पाठ के लिए रखें।
नेविगेशन टूलकिट
📊 नेविगेशन एक नज़र में
| टुकड़ा | रोज़ का काम |
|---|---|
nav |
प्राथमिक/द्वितीयक साइट लिंक के लिए landmark |
ul / li / a |
गंतव्यों की संरचित सूची |
| सूची रीसेट | बार लेआउट के लिए बुलेट और डिफ़ॉल्ट इंडेंट हटाएँ |
| क्षैतिज पंक्ति | Flex या inline-block ताकि लिंक पास-पास बैठें |
| Hover / वर्तमान | पॉइंटर फीडबैक और «आप यहाँ हैं» |
| ऊर्ध्वाधर nav | वही सूची ढेर में — साइडबार में उपयोगी |
नेविगेशन अभी भी लिंक हैं। फोकस आउटलाइन दिखाई रखने दें, आरामदायक padding दें, और अर्थ को अनाम div के ढेर में न छिपाएँ।
nav के अंदर सेमांटिक सूची
मेनू को nav में लपेटें और गंतव्य असली एंकर के रूप में सूची में रखें। स्क्रीन रीडर और भविष्य का आप संरचना का शुक्रिया अदा करेंगे।
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Flex से क्षैतिज बार
एक सरल flex पंक्ति सूची को बार बना देती है। Gap और padding तंग हिट टारगेट से बेहतर हैं। (गहरी Flexbox कला बाद में आएगी — साफ navbar के लिए इतना काफी है।)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Hover और वर्तमान संकेत
Hover पर फीडबैक दें और वर्तमान पृष्ठ को क्लास से चिह्नित करें। :focus आउटलाइन कभी «सफाई» के नाम पर न हटाएँ।
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
ऊर्ध्वाधर साइड नेविगेशन
वही सूची साइडबार में ढेर हो सकती है। स्पेसिंग उदार रखें ताकि हर लिंक दबाना आसान रहे।
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
एक शांत नेविगेशन आदत
nav + सूची + पठनीय padding इस्तेमाल करें। क्षैतिज बार के लिए flex पंक्तियाँ पसंद करें। मेगा-मेनू और ड्रॉपडाउन अगले पाठ के लिए छोड़ें। लिंक बार को पूरे पृष्ठ लेआउट शेल से भ्रमित न करें।
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
स्वयं आज़माएँ
nav > ul.nav > li > aबनाएँ और सूची शैलियाँ रीसेट करें।- लिंक को padding और gap के साथ क्षैतिज flex पंक्ति में रखें।
:hoverऔर.is-currentशैली जोड़ें।- सूची को ऊर्ध्वाधर sidenav संस्करण के रूप में दोहराएँ।
- एक वाक्य लिखें: Dropdowns पाठ में क्या यहाँ की बजाय आता है?
आम गलतियाँ
- छोटा padding जो टच और माउस टारगेट फेल कर देता है
- फोकस आउटलाइन हमेशा के लिए हटाना
navऔर सूचियों की जगह div सूप- इस पाठ में नेस्टेड ड्रॉपडाउन मेगा-मेनू बनाना
- navbar को पूरे वेबसाइट लेआउट मानना
सारांश
- नेविगेशन बार
navके अंदर संरचित लिंक सूचियाँ हैं - बुलेट रीसेट करें, फिर flex (या inline-block) से व्यवस्थित करें
- Hover और वर्तमान शैलियाँ फोकस मारे बिना मार्गदर्शन करती हैं
- ऊर्ध्वाधर nav वही सूची ढेर में है
- ड्रॉपडाउन मेनू अगले पाठ की प्रतीक्षा करते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी