अच्छे HTML कोड और सरल CSS नियमों की सहायता से, आप एक अच्छा पॉपअप मेनू बना सकते हैं जिसे आसानी से संशोधित और पूरक किया जा सकता है। मार्कअप भाषा और कैस्केडिंग स्टाइल शीट्स का उपयोग करके, आप सुनिश्चित कर सकते हैं कि मेनू सभी ब्राउज़रों में सही ढंग से काम करता है।
निर्देश
चरण 1
सबसे पहले, अपने मेनू की मूल संरचना बनाएं। एक टेक्स्ट एडिटर खोलें और एक सबमेनू के साथ एक क्रमांकित सूची बनाएं जो मूल सूची आइटम के रूप में कार्य करता है। उदाहरण के लिए:
-
पहला तत्व
- ड्रॉपडाउन आइटम
- ड्रॉपडाउन2
चरण 2
जेनरेट की गई सूची को एक अलग HTML फ़ाइल में सहेजें। इसके बाद,.css एक्सटेंशन वाली एक फ़ाइल बनाएं और सभी स्टाइल शीट पैरामीटर दर्ज करें।
चरण 3
बुलेट सूची में लागू होने वाले किसी भी पैडिंग और बुलेट को हटा दें और सीएसएस टूल्स का उपयोग करके मेनू चौड़ाई सेट करें: उल {सूची-शैली: कोई नहीं;
चौड़ाई: 200px; }
चरण 4
स्थिति विशेषता का उपयोग करके सूची में सभी वस्तुओं की सापेक्ष स्थिति निर्धारित करें: उल ली {स्थिति: सापेक्ष; }
चरण 5
इसके बाद, आपको एक सबमेनू डिज़ाइन करने की ज़रूरत है, जिनमें से प्रत्येक तत्व उस समय पैरेंट मेनू के दाईं ओर दिखाई देगा जब माउस पॉइंटर आइटम पर होगा: ली उल {स्थिति: पूर्ण;
बाएं: 199 पीएक्स;
शीर्ष: 0;
कुछ भी डिस्प्ले मत करो; } बाईं विशेषता मेनू की चौड़ाई से एक पिक्सेल कम है। यह पॉप-अप आइटम को डबल बॉर्डर बनाए बिना बुद्धिमानी से तैनात करने की अनुमति देता है। डिस्प्ले एट्रिब्यूट का उपयोग पेज खोलते समय सबमेनू को छिपाने के लिए किया जाता है।
चरण 6
उपयुक्त सीएसएस विकल्पों का उपयोग करके लिंक को इच्छानुसार स्टाइल करें। डिस्प्ले शामिल करें: ब्लॉक पैरामीटर ताकि प्रत्येक लिंक उसके लिए आरक्षित सभी स्थान ले सके।
चरण 7
मेनू को उस समय प्रकट करने के लिए जब कर्सर उसके ऊपर हो (होवर), आपको कोड दर्ज करना होगा: li: hover ul {display: block; }
चरण 8
लिंक प्रदर्शित करने के लिए अतिरिक्त विकल्प सेट करें और आइटम को इच्छानुसार सूचीबद्ध करें
चरण 9
पॉप-अप मेनू तैयार है। अब.html फ़ाइल में विशेषता शामिल करना बाकी है: पॉप-अप मेनू
