सीएसएस ड्रॉपडाउन मेनू

आज, अधिकांश आधुनिक वेबसाइटों में ड्रॉपडाउन मेनू एक सामान्य विशेषता है। ये मेनू आपको अधिक अनुकूलित नेविगेशन सुविधाएँ बनाने की अनुमति देते हैं ताकि उपयोगकर्ता आसानी से वह सामग्री ढूंढ सकें जो वे वेबसाइट पर खोज रहे हैं।

HTML के अलावा, CSS का उपयोग एक ड्रॉपडाउन मेनू बनाने के लिए किया जा सकता है जो केवल सामग्री दिखाता है जब उपयोगकर्ता ड्रॉपडाउन में मेनू लेबल पर होवर करता है।

यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि CSS में ड्रॉपडाउन मेनू कैसे बनाया जाता है। इस ट्यूटोरियल को पढ़ने के अंत तक, आपके पास अपना स्वयं का ड्रॉपडाउन मेनू बनाने के लिए आवश्यक टूल और कोड होंगे।

सीएसएस ड्रॉपडाउन मेन्यू

HTML में, ड्रॉपडाउन मेनू बनाने के लिए कोई विशिष्ट टैग नहीं है।

हालाँकि, यदि हम CSS का उपयोग करते हैं, तो हम एक ऐसा मेनू बनाने में सक्षम होते हैं जो टेक्स्ट या लिंक की सूची दिखाता है जब उपयोगकर्ता मेनू पर होवर करता है। इसलिए, इस ट्यूटोरियल के लिए, हम ड्रॉपडाउन मेनू बनाने के लिए HTML और CSS दोनों का लाभ उठाने जा रहे हैं।

एक स्थानीय बैडमिंटन क्लब ने हमें उनके क्लब के बारे में ऑनलाइन जानकारी साझा करने के लिए एक वेबसाइट बनाने के लिए कहा है। इस वेबसाइट में क्लब, इसके इतिहास और इसमें शामिल होने के तरीके के बारे में कई पेज होंगे।

क्लब ने पूछा है कि क्या हम एक ड्रॉपडाउन मेनू बना सकते हैं जो तब शुरू होता है जब उपयोगकर्ता मेनू पर होवर करता है। इस मेनू में तीन पृष्ठों की सूची प्रदर्शित होनी चाहिए:उपकरण, आरंभ करना, और सदस्यता जानकारी। इस मेनू का लेबल "नए सदस्य" होना चाहिए।

ड्रॉपडाउन मेनू उदाहरण

आइए देखें कि हम CSS में इस ड्रॉपडाउन मेनू को कैसे बना सकते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

अपना ड्रॉपडाउन मेनू बनाने के लिए, हम सबसे पहले HTML में एक बेसिक मेनू बनाने जा रहे हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

   उपकरण
 आरंभ करना
 सदस्यता जानकारी

हमारे कोड में, हमारे पास है:

कक्षा menu के साथ एक
टैग बनाया गया है जो हमारे मेनू के लिए कोड स्टोर करता है।
टेक्स्ट के साथ एक बटन बनाया New Members दिखा रहा है।
एक नया
बनाया जिसमें हमारे लिंक की सूची दिखाई देती है।
उपकरणों के लिंक बनाने, आरंभ करने और सदस्यता जानकारी पृष्ठों के लिए तीन टैग का उपयोग किया।

हमारा कोड निम्नलिखित लौटाता है:

अब तक, हमने अपने ड्रॉपडाउन मेनू में कोई स्टाइल नहीं जोड़ा है, इसलिए यह सादे HTML में दिखाई देता है। बैडमिंटन क्लब की वेबसाइट के लिए हमारे ड्रॉपडाउन मेनू को स्टाइल करने के लिए हम यहां कोड का उपयोग करने जा रहे हैं:

<पूर्व>.ड्रॉपडाउन_बटन {पृष्ठभूमि-रंग:#90EE90; रंग सफेद; पैडिंग:10px; फ़ॉन्ट-आकार:15px; सीमा:कोई नहीं;}.मेनू {प्रदर्शन:इनलाइन-ब्लॉक; स्थिति:रिश्तेदार;}। सामग्री { प्रदर्शन:कोई नहीं; पृष्ठभूमि-रंग:हल्का भूरा; न्यूनतम-चौड़ाई:150px; जेड-इंडेक्स:1; स्थिति:पूर्ण;}। सामग्री एक { पाठ-सजावट:कोई नहीं; प्रदर्शन क्षेत्र; रंग काला; पैडिंग:16पीएक्स;}.कंटेंट ए:होवर { बैकग्राउंड-कलर:#f7f7f7;}.मेनू:होवर .कंटेंट { डिस्प्ले:ब्लॉक;}

हमारा कोड लौटाता है:

[Code result here]

आइए देखें कि हमारा कोड कैसे काम करता है।

dropdown_button class ड्रॉपडाउन बटन को स्टाइल करने के लिए उपयोग किया जाता है। हमारे कोड में, हम बटन की पृष्ठभूमि का रंग हल्का हरा सेट करते हैं, बटन के टेक्स्ट का रंग सफेद में बदलते हैं, बटन के चारों ओर 10px पैडिंग जोड़ते हैं, बटन का फ़ॉन्ट आकार 15px पर सेट करते हैं, और हम चारों ओर की सीमा को हटा देते हैं बटन।

सामग्री वर्ग हमारे ड्रॉपडाउन मेनू की सामग्री के लिए शैलियों को संग्रहीत करता है। यह वर्ग डिफ़ॉल्ट रूप से छिपा हुआ है (डिस्प्ले का उपयोग करके:कोई नहीं) और इसकी पृष्ठभूमि हल्के भूरे रंग की है। इसके अलावा, सामग्री वर्ग का उपयोग करने वाले तत्वों की न्यूनतम चौड़ाई 150px है, और तत्व बिल्कुल स्थित है। सामग्री वर्ग में 1 का एक्स-इंडेक्स भी है, जो इसे वेब पेज पर अन्य सभी तत्वों के ऊपर प्रदर्शित करता है।

मेनू वर्ग हमारे संपूर्ण मेनू के लिए शैलियों को संग्रहीत करता है। हमारे कोड में, हम अपने <div class=”menu”> . की सामग्री को स्थान देते हैं टैग को वेब पेज पर अन्य तत्वों के सापेक्ष होना चाहिए। हम इनलाइन-ब्लॉक शैली का उपयोग करके मेनू भी प्रदर्शित करते हैं, जो हमारे तत्व को इनलाइन-ब्लॉक कंटेनर के रूप में प्रदर्शित करता है।

हमारे ड्रॉपडाउन मेनू में लिंक को स्टाइल करने के लिए .content एक शैली का उपयोग किया जाता है। यह शैली लिंक से सभी अंडरलाइन को हटा देती है (पाठ-सजावट का उपयोग करके:कोई नहीं;), प्रत्येक लिंक को ब्लॉक शैली में प्रदर्शित करता है, प्रत्येक लिंक का रंग काला करने के लिए सेट करता है, और प्रत्येक लिंक के चारों ओर पैडिंग को 16px पर सेट करता है।

हमारे कोड के अंत में, हम .content a:hover नियम का उपयोग यह परिभाषित करने के लिए करते हैं कि क्या होना चाहिए जब उपयोगकर्ता अपने कर्सर का उपयोग करके हमारे ड्रॉपडाउन मेनू में एक लिंक पर होवर करता है। इस मामले में, जब उपयोगकर्ता मेनू में लिंक पर होवर करता है, तो लिंक की पृष्ठभूमि का रंग हल्का ग्रे (#f7f7f7) में बदल जाता है।

हमने एक नियम .menu:hover .content भी निर्दिष्ट किया है जो हमारे मेनू की सामग्री को एक ब्लॉक के रूप में प्रदर्शित करता है जब उपयोगकर्ता मेनू पर होवर कर रहा होता है।

यदि आप यह जानने में रुचि रखते हैं कि CSS :hover चयनकर्ता अधिक गहराई से कैसे काम करता है, तो हमारी CSS :hover चयनकर्ता मार्गदर्शिका पढ़ें।

राइट ड्रॉपडाउन मेन्यू

हमारे उपरोक्त उदाहरण में, हमने HTML और CSS का उपयोग करके एक ड्रॉपडाउन मेनू बनाया है जो स्क्रीन के बाईं ओर दिखाई देता है। हालाँकि, आप यह तय कर सकते हैं कि आप अपने ड्रॉपडाउन मेनू को स्क्रीन के दाईं ओर दिखाना चाहते हैं।

ऐसा करने के लिए, आप उपरोक्त कोड पर निम्नलिखित सीएसएस नियम लागू कर सकते हैं:

.content {दाएं:0;}

यह नियम ड्रॉपडाउन और उसकी सामग्री को स्क्रीन के दाईं ओर ले जाएगा।

निष्कर्ष

HTML का उपयोग ड्रॉपडाउन मेनू की मूल संरचना बनाने के लिए किया जा सकता है। फिर, आप एक पूर्ण और सौंदर्यपूर्ण रूप से आकर्षक ड्रॉपडाउन मेनू बनाने के लिए शैलियों को लागू करने के लिए सीएसएस का उपयोग कर सकते हैं।

इस ट्यूटोरियल ने एक उदाहरण के संदर्भ में चर्चा की कि HTML और CSS का उपयोग करके ड्रॉपडाउन मेनू कैसे बनाया जाए। इस लेख में हमारे द्वारा चर्चा किए गए कोड का उपयोग करके, आप HTML और CSS में अपना स्वयं का ड्रॉपडाउन मेनू बनाने में सक्षम होंगे।