CSS ड्रॉपडाउन
नेविगेशन बार लिंक को एक पंक्ति में रखते थे। ड्रॉपडाउन एक नेस्टेड पैनल जोड़ता है जो ट्रिगर के नीचे खुलता है — आमतौर पर होवर पर, और बेहतर तब भी जब कीबोर्ड फ़ोकस अंदर जाता है। विशाल मेगा-मेनू बनाने से पहले एक शांत CSS पैटर्न में महारत हासिल करें।
ड्रॉपडाउन टूलकिट
📊 ड्रॉपडाउन एक नज़र में
| टुकड़ा | रोज़ का काम |
|---|---|
| Relative ट्रिगर | पैरेंट li (या रैपर) पोजिशनिंग एंकर बनता है |
| Absolute पैनल | नेस्टेड मेनू ट्रिगर के नीचे बैठता है (top: 100%) |
| डिफ़ॉल्ट छिपा | खुलने तक display: none या स्क्रीन से बाहर |
:hover खोलना |
पॉइंटर पैनल खोलता है |
:focus-within |
कीबोर्ड उपयोगकर्ता टैब करते समय पैनल खोल/खुला रख सकते हैं |
z-index |
खुले पैनल को अगले पेज कंटेंट के ऊपर रखता है |
केवल-CSS ड्रॉपडाउन एक शिक्षण क्लासिक हैं। असली उत्पाद अक्सर टच पर क्लिक-टॉगल, Escape से बंद करने और समृद्ध पहुँच के लिए JS जोड़ते हैं — पहले यहाँ CSS कंकाल सीखें।
Relative ट्रिगर, नेस्टेड सूची
ट्रिगर लिंक को ऊपरी बार में रखें और सबमेनू के लिए दूसरी सूची नेस्ट करें। पैरेंट आइटम पोज़िशन होना चाहिए ताकि absolute बच्चे अपना घर जान सकें।
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
ट्रिगर के नीचे absolute पैनल
सबमेनू को position: absolute से रखें, ट्रिगर के नीचे पिन करें, और ठोस बैकग्राउंड दें ताकि पेज टेक्स्ट झलके नहीं।
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
खुलने तक छिपाएँ
पैनल को डिफ़ॉल्ट रूप से बंद रखें। एक साथ सब खोलना ड्रॉपडाउन का मतलब खत्म कर देता है।
.nav .submenu {
display: none;
}
होवर पर दिखाएँ
जब पॉइंटर पैरेंट आइटम पर हो, पैनल दिखाएँ। ट्रिगर पर पैडिंग किनारे पर अचानक बंद होने से बचाने में मदद करती है।
.nav > li:hover > .submenu {
display: block;
}
focus-within भी पसंद करें
केवल होवर कीबोर्ड उपयोगकर्ताओं को छोड़ देता है। :focus-within आइटम के अंदर फ़ोकस रहते हुए पैनल खुला रखता है — एक शांत CSS अपग्रेड।
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
एक शांत ड्रॉपडाउन आदत
Relative पैरेंट, absolute पैनल, डिफ़ॉल्ट छिपा, hover + focus-within, मामूली z-index। क्लिक-टॉगल मेगा-मेनू और जटिल ARIA बाद के समृद्ध पैटर्न के लिए छोड़ें — इसे सपाट नेविगेशन बार पाठ से भ्रमित न करें।
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
खुद आज़माएँ
- हर टॉप-लेवल
liकोposition: relativeबनाएँ। .submenuसूची नेस्ट करें औरabsolute; top: 100%; left: 0पोज़िशन करें।display: noneसे छिपाएँ, फिरli:hoverपर दिखाएँ।:focus-withinजोड़ें ताकि कीबोर्ड फ़ोकस भी पैनल खोले।z-indexबढ़ाएँ और लिखें कि टच क्लिक-टॉगल के लिए JS कब जोड़ेंगे।
आम गलतियाँ
- Relative पैरेंट के बिना absolute सबमेनू (पैनल दूर कूद जाता है)
- सबमेनू को डिफ़ॉल्ट रूप से दिखाई छोड़ना
- फ़ोकस स्टाइल हटाना जिससे कीबोर्ड उपयोगकर्ता खो जाएँ
- इस CSS कंकाल से पहले पूरा JS मेगा-मेनू बनाना
- ड्रॉपडाउन को पूरे पेज लेआउट पाठ जैसा मानना
सारांश
- ड्रॉपडाउन relative ट्रिगर के नीचे पैनल नेस्ट करते हैं
- Absolute +
top: 100%मेनू को लिंक के नीचे पिन करता है - डिफ़ॉल्ट छिपाएँ; hover और focus-within से दिखाएँ
- z-index से पैनल पेज कंटेंट को ढके
- सपाट नेव बार पहले आए; नेस्टेड मेनू यह पाठ हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी