HTML और CSS में एक ड्रॉप-डाउन मेनू कैसे बनाएं

एक विशेषता निर्दिष्ट करें "वर्ग" मेनू के प्रत्येक अनुभाग में यह विशेषता बहुत महत्वपूर्ण है और बाद में सीएसएस स्टाइल शीट्स द्वारा प्रत्येक तत्व की शैली को बदलने के लिए इस्तेमाल की जाएगी। एक विशेषता निर्दिष्ट करें "वर्ग" अनुभाग के लिए अलग

उन आइटमों की सूची जोड़ें, जो मेनू में दिखाई देंगी। टैग

(अनारोडेड सूची) में मेनू के मुख्य भाग होते हैं, प्रत्येक टैग द्वारा उपयोग किए जाने वाले विभिन्न मदों द्वारा आबाद होते हैं

लिंक दर्ज करें यदि मेनू के मुख्य अनुभागों को प्रासंगिक वेब पेजों के लिंक के रूप में कार्य करना चाहिए, तो यह लिंक बनाने का समय है। यहां तक ​​कि अगर इन खंडों में कोई पेज नहीं है, तो एक एंकर का उपयोग करके एक डमी लिंक बनाएं जो HTML के भीतर मौजूद नहीं है, जैसे कि "#!"। इस तरह, जब उपयोगकर्ता उसे मेनू के आइटम पर प्रश्न में रखता है, तो माउस कर्सर उसकी उपस्थिति बदल देगा। हमारे उदाहरण में, मौजूद अन्य दो तत्वों के विपरीत, खंड "संपर्क" मेनू का कोई भी वेब पेज इंगित नहीं करता है:

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

कोड जोड़ें "clearfix"। विशेषता को याद रखें "वर्ग" नामित "clearfix" संरचना में जोड़ा गया जिसमें मुख्य मेनू के तत्व शामिल हैं? आम तौर पर, ड्रॉप-डाउन मेनू में आइटम को पारदर्शी पृष्ठभूमि पर प्रदर्शित किया जाता है और अन्य तत्वों से घिरा भी जा सकता है। सीएसएस स्टाइल शीट का एक त्वरित संशोधन इस प्रदर्शन समस्या को हल करता है। नीचे एक सरल और सुरुचिपूर्ण समाधान है, हालांकि दुर्भाग्यवश इंटरनेट एक्सप्लोरर 7 और पिछले संस्करणों द्वारा समर्थित नहीं है:

मूल लेआउट बनाएं ड्रॉप-डाउन मेनू में आइटम को छिपाते हुए, निम्न कोड में पृष्ठ के शीर्ष पर स्थित मेनू है सिर्फ हमारे उद्देश्यों के लिए प्रासंगिक कोड पर ध्यान केंद्रित करने के लिए, यहां दिखाया गया सीएसएस कोड जानबूझकर कम से कम न्यूनतम आवश्यक है इसके बाद आप सभी अतिरिक्त गुणों को भरकर इसे पूरा कर सकते हैं, जैसे मार्जिन प्रबंधन और पाठ केंद्रिंग।

ड्रॉप-डाउन मेनू के तत्व प्रदर्शित करना फिलहाल मैं ड्रॉप-डाउन मेनू तैयार करने वाले आइटम को प्रदर्शित नहीं करने के लिए कॉन्फ़िगर किया गया है। इसलिए अगले चरण मेनू के मुख्य भाग से संबंधित ड्रॉप-डाउन मेनू प्रदर्शित करना है जिस पर उपयोगकर्ता ने माउस कर्सर को स्थान दिया है:

ड्रॉप-डाउन मेनू फ़ीचर करें उपयोगकर्ता इंटरफ़ेस को और अधिक सहज बनाने के लिए, वेब डिज़ाइनर सामान्यत: रिपोर्ट करते हैं कि एक मेनू आइटम में एक ड्रॉप-डाउन मेनू होता है जो उसके आगे एक छोटा नीचे-इंगित करने वाला तीर दिखाता है। निम्न कोड मुख्य मेनू के प्रत्येक तत्व के बगल में यह छोटा चिह्न जोड़ता है: