विषय

• कदम बढ़ाने के लिए
• भाग 1 का 2: HTML लिखना
• भाग 2 का 2: सीएसएस लिखना
• टिप्स

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

कदम बढ़ाने के लिए

भाग 1 का 2: HTML लिखना

1. अपना नेविगेशन अनुभाग बनाएं। आम तौर पर आप वेबसाइट-वाइड नेविगेशन बार के लिए नेवी> का उपयोग करते हैं, हेडर> छोटे लिंक सेक्शन के लिए जो पेज-बाउंड या डिव हैं> अगर कोई अन्य विकल्प फिट नहीं लगता है। इसे div> एलीमेंट में रखें ताकि आप कंटेनर और मेन्यू दोनों की शैली को खुद ही एडजस्ट कर सकें।
   • div>
   • नौसेना>
   • / नौसेना>
   • / div>
2. प्रत्येक अनुभाग को एक क्लास विशेषता दें। हम सीएसएस के साथ इन तत्वों की शैली को संशोधित करने के लिए बाद में वर्ग विशेषता का उपयोग करेंगे। कंटेनर और मेनू दोनों को अपनी-अपनी श्रेणी की विशेषता दें।
   • div>
   • नौसेना>
   • / नौसेना>
   • / div>
3. मेनू आइटम की एक सूची जोड़ें। अनऑर्डर की गई सूची (ul>) में मुख्य मेनू (लिस्ट आइटम्स li>) के आइटम होते हैं, यदि उपयोगकर्ता अपने माउस को इसके ऊपर ले जाता है, तो वह ड्रॉपडाउन मेनू देखता है। अपनी सूची तत्व में वर्ग "क्लियरफ़िक्स" जोड़ें; हम इसे बाद में CSS स्प्रेडशीट में प्राप्त करेंगे।
   • div>
   • नौसेना>
   •       उल>
   •          li> घर / ली>
   •          ली> कर्मचारी
   •          ली> संपर्क करें
   •          / ली>
   •       / उल>
   • / नौसेना>
   • / div>
4. लिंक जोड़ें। यदि ये शीर्ष-स्तरीय मेनू आइटम भी अपने स्वयं के पृष्ठों से लिंक करते हैं, तो आप अब लिंक सम्मिलित कर सकते हैं। एक बिना एंकर के लिंक (जैसे "#!"), भले ही वे किसी भी चीज़ से लिंक न हों, इसलिए उपयोगकर्ता का कर्सर अलग दिखेगा। इस उदाहरण में, संपर्क कहीं नहीं होता है, लेकिन अन्य दो मेनू आइटम करते हैं:
   • div>
   • नौसेना>
   • उल>
   • ली>a href = "/">घर/ ए>/ ली>
   • ली>a href = "/ कर्मचारी">स्टाफ के सदस्यों को/ ए>
   • / ली>
   • ली>a href = "#!">संपर्क करें/ ए>
   • / ली>
   • / उल>
   • / नौसेना>
   • / div>
5. ड्रॉपडाउन आइटम के लिए सब्लिस्ट बनाएं। शैली बनाए जाने के बाद, ये सूचियाँ ड्रॉपडाउन मेनू बनाती हैं। उस सूची आइटम में सूची रखें, जिस पर उपयोगकर्ता माउस ले जाएगा। पहले की तरह एक क्लास की विशेषता और एक लिंक जोड़ें।
   • div>
   • नौसेना>
   • उल>
   • li> a href = "/"> होम / a> / li>
   • li> a href = "/ कर्मचारी"> कर्मचारी / a>
   •          उल>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / उल>
   • / ली>
   • li> a href = "#!"> संपर्क / a>
   •          उल>
   •             li> a href = "mailto: [email protected]"> किसी समस्या की रिपोर्ट करें / a> / li>
   •             li> a href = "/ support"> ग्राहक सहायता / a> / li>
   •          / उल>
   • / ली>
   • / उल>
   • / नौसेना>
   • / div>

भाग 2 का 2: सीएसएस लिखना

1. अपनी CSS स्टाइलशीट खोलें। यदि लिंक पहले से ही नहीं है तो अपने HTML डॉक्यूमेंट के हेड सेक्शन में अपनी CSS स्टाइलशीट के लिए एक लिंक पोस्ट करें। इस लेख में, हम सीएसएस की मूल बातें कवर नहीं करेंगे, जैसे कि फ़ॉन्ट और पृष्ठभूमि का रंग सेट करना।
2. स्पष्ट कोड जोड़ें। मेनू सूची में "क्लीयरफिक्स" वर्ग जोड़ना याद रखें? आम तौर पर, ड्रॉप-डाउन मेनू के तत्वों में एक पारदर्शी पृष्ठभूमि होती है, जो अन्य तत्वों को स्थानांतरित करने की अनुमति देती है। CSS का एक सरल अनुकूलन इस समस्या को हल कर सकता है। यहाँ एक अच्छा, त्वरित सुधार है, हालाँकि यह Internet Explorer 7 और इससे पहले के संस्करण में काम नहीं करेगा:
   • .clearfix: के बाद
   • सामग्री: "";
   • प्रदर्शन: टेबल;
   • }
3. मूल डिजाइन बनाएँ। इस कोड के साथ आप अपने मेनू को पेज के शीर्ष पर रख सकते हैं और ड्रॉपडाउन तत्वों को छिपा सकते हैं। यह उद्देश्य पर बहुत सरल है ताकि हम संबंधित कोड पर ध्यान केंद्रित कर सकें। आप इसे बाद में अतिरिक्त CSS कोड, जैसे पैडिंग और मार्जिन के साथ संशोधित कर सकते हैं।
   • .nav- आवरण
   • चौड़ाई: 100%;
   • पृष्ठभूमि: # 008B8B;
   • }
   •  
   • .nav मेनू {
   • स्थिति: रिश्तेदार;
   • प्रदर्शन: इनलाइन-ब्लॉक;
   • }
   •  
   • .sub मेनू {
   • स्थिति: निरपेक्ष;
   • कुछ भी डिस्प्ले मत करो;
   • पृष्ठभूमि: # 555;
   • }
4. जब आप अपने माउस को उन पर मँडराते हैं, तो ड्रॉपडाउन आइटम प्रदर्शित करें। ड्रॉपडाउन सूची में तत्वों को अब सेट किया गया है ताकि वे दिखाई न दें। जैसे ही आप "पैरेंट" पर हॉवर करते हैं, तो एक संपूर्ण सबलिस्ट कैसे बनाया जाता है:
   • .nav- मेनू ul li: hover> ul {
   • प्रदर्शन क्षेत्र;
   • }
   • नोट - यदि ड्रॉपडाउन मेनू में मेनू आइटम में अतिरिक्त मेनू छिपे हुए हैं, तो यहां जोड़े गए गुण सभी मेनू पर लागू होंगे। यदि आप केवल शैली को ड्रॉपडाउन मेनू के पहले स्तर पर लागू करना चाहते हैं, तो इसके बजाय ".nav-menu> ul" का उपयोग करें।
5. एक तीर के साथ संकेत दें कि ड्रॉपडाउन मेनू है। वेब डिजाइनर आमतौर पर एक डाउन एरो के साथ दिखाते हैं कि एक तत्व एक ड्रॉपडाउन मेनू खोलता है। यह कोड आपके मेनू के प्रत्येक तत्व में वह तीर जोड़ता है:
   • .nav मेनू> उल> ली: {के बाद
   • सामग्री: " 25BC"; / * नीचे तीर के लिए यूनिकोड से बच गया * /
   • फ़ॉन्ट-आकार: .5em;
   • प्रदर्शन क्षेत्र;
   • स्थिति: निरपेक्ष;
   •    }
   • नोट - ऊपर, नीचे, दाएं या बाएं गुणों के साथ तीर की स्थिति को समायोजित करें।
   • नोट - यदि आपके सभी मेनू आइटम में ड्रॉपडाउन नहीं हैं, तो पूरे क्लास के नेवी मेनू की उपस्थिति को न बदलें। इसके बजाय, प्रत्येक एलआई तत्व में एक और वर्ग (जैसे ड्रॉपडाउन) जोड़ें जहां आप एक तीर चाहते हैं। उपरोक्त कोड में उस वर्ग को देखें।
6. पैडिंग, पृष्ठभूमि और अन्य गुणों को समायोजित करें। मेनू अब काम करना चाहिए, लेकिन यह अभी तक बहुत अच्छा नहीं है। CSS में गुणों के साथ आप यह अनुकूलित कर सकते हैं कि प्रत्येक वर्ग या तत्व कैसा दिखता है और वे कहाँ स्थित हैं।

टिप्स

• यदि आप एक ड्रॉपडाउन मेनू को एक फॉर्म में जोड़ना चाहते हैं, तो HTML5 में एलिमेंट सिलेक्ट> के साथ बहुत आसान है।
• लिंक एक href = "#"> पृष्ठ के शीर्ष पर स्क्रॉल करता है, और एक लिंक जो किसी भी गैर-संबंधित एंकर की ओर इशारा करता है, जैसे कि href = "#!">, स्क्रॉल नहीं करता है। यदि वह बहुत अधिक मैला लगता है, तो आप बदल सकते हैं कि कर्सर सीएसएस के साथ कैसा दिखता है।
• जब आप नमूना कोड को कॉपी और पेस्ट करते हैं, तो सभी गोलियों को हटा दें।