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

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

मेनू आइटम की एक सूची जोड़ें गंदा सूची (

) में शीर्ष मेनू में आइटम शामिल हैं (सूची में आइटम

लिंक सम्मिलित करें अगर शीर्ष-स्तरीय मेनू आइटम आपके अपने पृष्ठों से भी लिंक किए गए हैं, तो अब संबंधित लिंक डालें। हालांकि वे किसी भी अन्य साइट से जुड़े नहीं हैं, इसमें किसी न किसी लंगर के लिंक शामिल हैं (उदाहरण के लिए "#!") ताकि उपयोगकर्ता का कर्सर अपनी उपस्थिति को बदलता है इस उदाहरण में, "हमसे संपर्क करें" यह कहीं भी नहीं लेता, लेकिन अन्य दो मेनू करते हैं:

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

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

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

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

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