आजकल ड्रॉपडाउन मेनू अधिकांश आधुनिक वेबसाइटों की एक सामान्य विशेषता है। ये मेनू आपको अधिक अनुकूलित नेविगेशन सुविधाएं बनाने की अनुमति देते हैं ताकि उपयोगकर्ता आसानी से वेबसाइट पर अपनी खोज की सामग्री ढूंढ सकें।
HTML के अलावा CSS का उपयोग करके एक ड्रॉपडाउन मेनू बनाया जा सकता है जो केवल तब सामग्री दिखाता है जब उपयोगकर्ता ड्रॉपडाउन में मेनू लेबल पर होवर करता है।
ड्रॉपडाउन मेनू का उदाहरण
एक स्थानीय बैडमिंटन क्लब ने हमें उनकी वेबसाइट के लिए एक ड्रॉपडाउन मेनू बनाने को कहा जो उपयोगकर्ता के होवर करने पर ट्रिगर हो। इस मेनू में तीन पेजों की सूची प्रदर्शित होनी चाहिए: Equipment, Getting Started, और Membership Information। इस मेनू का लेबल "New Members" होना चाहिए।
HTML संरचना
<div class="menu">
<button class="dropdown_button">New Members</button>
<div class="content">
<a href="equipment.html">Equipment</a>
<a href="gettingstarted.html">Getting Started</a>
<a href="membership.html">Membership Information</a>
</div>
</div>
CSS स्टाइलिंग
.dropdown_button {
background-color: #90EE90;
color: white;
padding: 10px;
font-size: 15px;
border: none;
}
.menu {
display: inline-block;
position: relative;
}
.content {
display: none;
background-color: lightgray;
min-width: 150px;
z-index: 1;
position: absolute;
}
.content a {
text-decoration: none;
display: block;
color: black;
padding: 16px;
}
.content a:hover {
background-color: #f7f7f7;
}
.menu:hover .content {
display: block;
}
कोड कैसे काम करता है
.dropdown_buttonक्लास ड्रॉपडाउन बटन को स्टाइल करती है: हल्का हरा बैकग्राउंड, सफेद टेक्स्ट, 10px पैडिंग, 15px फ़ॉन्ट साइज़, और कोई बॉर्डर नहीं।.contentक्लास ड्रॉपडाउन सामग्री के स्टाइल स्टोर करती है। यह डिफ़ॉल्ट रूप से छिपी होती है (display: none) और इसका हल्का ग्रे बैकग्राउंड होता है। न्यूनतम चौड़ाई 150px, निरपेक्ष पोजिशनिंग, और z-index 1 इसे अन्य एलिमेंट्स के ऊपर दिखाता है।.menuक्लास पूरे मेनू को स्टाइल करती है: रिलेटिव पोजिशनिंग और इंलाइन-ब्लॉक डिस्प्ले।.content aड्रॉपडाउन में लिंक्स को स्टाइल करती है: अंडरलाइन हटाती है, ब्लॉक डिस्प्ले, काला रंग, 16px पैडिंग।.content a:hoverलिंक पर होवर करने पर बैकग्राउंड रंग को हल्का ग्रे (#f7f7f7) में बदल देती है।.menu:hover .contentनियम उपयोगकर्ता द्वारा मेनू पर होवर करने पर सामग्री को ब्लॉक के रूप में प्रदर्शित करता है।
राइट-एलाइंड ड्रॉपडाउन मेनू
यदि आप ड्रॉपडाउन मेनू को स्क्रीन के दाईं ओर दिखाना चाहते हैं, तो निम्न CSS नियम लागू करें:
.content { right: 0; }
यह नियम ड्रॉपडाउन और उसकी सामग्री को स्क्रीन के दाईं ओर ले जाएगा।
निष्कर्ष
HTML का उपयोग ड्रॉपडाउन मेनू की मूल संरचना बनाने के लिए किया जा सकता है। फिर, CSS का उपयोग करके एक पूर्ण और सौंदर्य की दृष्टि से मनभावन ड्रॉपडाउन मेनू बनाने के लिए स्टाइल लागू करें। इस ट्यूटोरियल में हमने एक उदाहरण के साथ चर्चा की कि HTML और CSS का उपयोग करके ड्रॉपडाउन मेनू कैसे बनाया जाए। इस लेख में चर्चा किए गए कोड का उपयोग करके, आप HTML और CSS में अपने स्वयं के ड्रॉपडाउन मेनू बनाने में सक्षम होंगे।
