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

लेखक: Lewis Jackson
निर्माण की तारीख: 13 मई 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
HTML और CSS का उपयोग करके ड्रॉप डाउन मेनू कैसे बनाएं | एचटीएमएल वेबसाइट ट्यूटोरियल
वीडियो: HTML और CSS का उपयोग करके ड्रॉप डाउन मेनू कैसे बनाएं | एचटीएमएल वेबसाइट ट्यूटोरियल

विषय

यह wikiHow आपको HTML और CSS कोड का उपयोग करके आपकी वेबसाइट पर ड्रॉप-डाउन मेनू बनाने का तरीका सिखाता है। एक ड्रॉप-डाउन मेनू दिखाई देगा जब आगंतुक निर्दिष्ट बटन पर माउस पॉइंटर को मँडराता है; इसके बाद, वे उस विकल्प की वेबसाइट पर जाने के लिए किसी एक आइटम पर क्लिक कर सकते हैं।

कदम

  1. HTML टेक्स्ट एडिटर खोलें। आप एक साधारण पाठ संपादक (नोटपैड, टेक्स्टएडिट) या अधिक उन्नत (नोटपैड ++) का उपयोग कर सकते हैं।
    • यदि आप नोटपैड ++ में जाने का निर्णय लेते हैं, तो आपको चुनने की आवश्यकता है एचटीएमएल मेनू के "एच" भाग से भाषा: हिन्दी (भाषा) जारी रखने से पहले खिड़की के शीर्ष पर।

  2. दस्तावेज़ के लिए एक शीर्षक दर्ज करें। यहां वह कोड है जो निर्धारित करता है कि कोड के प्रकार का उपयोग बाकी दस्तावेज़ के लिए किया जाए:
  3. ड्रॉप-डाउन मेनू बनाएं। ड्रॉप-डाउन मेनू का आकार और रंग निर्दिष्ट करने के लिए निम्न कोड दर्ज करें, "#" को उस पैरामीटर से बदलना याद रखें जिसे आप उपयोग करना चाहते हैं (संख्या जितनी बड़ी होगी, ड्रॉप-डाउन मेनू जितना बड़ा होगा)। हम पृष्ठभूमि रंग "पृष्ठभूमि-रंग" और "रंग" रंग को जो भी रंग (या HTML रंग कोड) आप चाहते हैं, से बदल सकते हैं:

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

  6. ड्रॉप-डाउन मेनू की सामग्री में विवरण जोड़ें। निम्न कोड पाठ रंग को अंदर और ड्रॉप-डाउन मेनू बटन के आकार को निर्दिष्ट करेगा। मेनू बटन के आकार को परिभाषित करने वाले पिक्सेल की संख्या के साथ "#" को बदलना न भूलें:
  7. ड्रॉप-डाउन मेनू में होवर किए जाने पर माउस पॉइंटर कैसे बदलता है, इसका संपादन करता है। जब आप मेनू बटन पर माउस पॉइंटर को घुमाते हैं तो कुछ रंगों को बदलना पड़ता है। जब आप ड्रॉप-डाउन मेनू में कुछ का चयन करते हैं तो "बैकग्राउंड-कलर" लाइन रंग को बदल देती है, जबकि दूसरा "बैकग्राउंड-कलर" वह रंग होता है, जिसे मेनू बटन बदल जाएगा। आदर्श रूप से, इन दोनों रंगों को हल्का होना चाहिए जब वे अचयनित थे:
  8. CSS सेक्शन को बंद करें। यह निर्दिष्ट करने के लिए कि आप दस्तावेज़ के CSS भाग के साथ काम कर रहे हैं, निम्नलिखित कोड दर्ज करें:
  9. मेनू बटन के लिए एक नाम बनाएँ। निम्नलिखित कोड दर्ज करें, लेकिन "नाम" को ड्रॉप-डाउन मेनू बटन के नाम से बदलना याद रखें (उदाहरण के लिए: मेन्यू):
  10. मेनू में लिंक जोड़ें। ड्रॉप-डाउन मेनू में प्रत्येक आइटम कुछ से लिंक होगा, यह वर्तमान वेबसाइट या बाहरी वेबसाइट पर एक पृष्ठ होगा। निम्न कोड दर्ज करके ड्रॉप-डाउन मेनू में अपना चयन जोड़ें, जिसमें से आपको बदलने की आवश्यकता है https://www.website.com लिंक पते के साथ (कोष्ठक रखें) और लिंक नाम के साथ "नाम" बदलें।
  11. दस्तावेज़ बंद करें। दस्तावेज़ को बंद करने के लिए निम्नलिखित टैग दर्ज करें और ड्रॉप-डाउन मेनू का कोड अंत निर्दिष्ट करें:
  12. समीक्षा कोड ड्रॉप-डाउन मेनू निर्दिष्ट करता है। स्निपेट कुछ इस तरह दिखाई देगा: विज्ञापन

सलाह

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

चेतावनी

  • जब हम "ब्लैक" या "ग्रीन" जैसे टैग का उपयोग करते हैं तो HTML रंग काफी सीमित होता है। आप HTML रंग कोड जनरेटर की जांच कर सकते हैं जो उपयोगकर्ताओं को यहां कस्टम रंग बनाने और उपयोग करने की अनुमति देता है।