कैसे HTML और CSS में ड्रॉपडाउन मेनु तैयार करें

सहयोगी लेखक द्वारा विकीहाउ स्टाफ

ये विकिहाउ गाइड आपको HTML और CSS कोडिंग का इस्तेमाल करके आपकी वेबसाइट के लिए एक ड्रॉप-डाउन (drop-down) मेनु तैयार करना सिखाएगी। ड्रॉप-डाउन मेनु तब नजर आता है, जब कोई उसके बटन के ऊपर होवर करता (माउस लेकर जाता) है; जैसे ही आपका ड्रॉप-डाउन मेनु सामने आता है, यूजर उसमें मौजूद किसी एक ऑप्शन पर क्लिक करके ऑप्शन के वेबपेज पर जा सकेगा।

चरण

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/3234689-1.jpg\/v4-460px-3234689-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/3234689-1.jpg\/v4-728px-3234689-1.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
अपने HTML टेक्स्ट एडिटर को ओपन करें: आप Notepad या TextEdit के जैसे एक सिम्पल टेक्स्ट एडिटर का इस्तेमाल कर सकते हैं या फिर आप चाहें तो Notepad++ के जैसे ज्यादा एडवांस एडिटर का भी इस्तेमाल कर सकते हैं।
- अगर आप Notepad++ इस्तेमाल करने का फैसला करते हैं, तो फिर आगे बढ़ने से पहले विंडो के टॉप में मौजूद Language मेनु से "H" सिलेक्ट करके HTML सिलेक्ट करना न भूलें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/3234689-2.jpg\/v4-460px-3234689-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/3234689-2.jpg\/v4-728px-3234689-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
अपने डॉक्यूमेंट हैडर को एंटर करें: ये कोड बाकी के डॉक्यूमेंट के लिए इस्तेमाल होने वाले कोड टाइप को निर्धारित करता है:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/3234689-3.jpg\/v4-460px-3234689-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/3234689-3.jpg\/v4-728px-3234689-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
ड्रॉप-डाउन मेनु को तैयार करें: ड्रॉप-डाउन मेनु के टाइप और साइज को निर्धारित करने के लिए इस कोड को टाइप करें, यहाँ पर "#" की जगह पर वो नंबर (नंबर जितना बड़ा होगा, ड्रॉप-डाउन मेनु भी उतना ही बड़ा होगा) लिखना न भूलें, जिसे आप इस्तेमाल करना चाहते हैं। आप चाहें तो "background-color" और "color" वैल्यू को भी अपने पसंद के किसी भी कलर (या HTML कलर कोड) से बदल सकते हैं: ^{[१]
X
रिसर्च सोर्स}
```
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 #px 
 ; 
 font-size 
 : 
 #px 
 ; 
 border 
 : 
 none 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/3234689-4.jpg\/v4-460px-3234689-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/3234689-4.jpg\/v4-728px-3234689-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
दर्शाएँ कि आप आपकी लिंक को ड्रॉप-डाउन मेनु में रखना चाहते हैं: चूंकि आप बाद में ड्रॉप-डाउन मेनु में लिंक एड करने वाले हैं, इसलिए आप इस कोड का इस्तेमाल करके उन्हें ड्रॉप-डाउन मेनु में रख सकते हैं:
```
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/3234689-5.jpg\/v4-460px-3234689-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/3234689-5.jpg\/v4-728px-3234689-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
ड्रॉप-डाउन मेनु के अपीयरेंस को तैयार करें: ये कोड ड्रॉप-डाउन मेनु के साइज को, जब ड्रॉप-डाउन मेनु में दूसरे वेबपेज के एलीमेंट शामिल होंगे, तब उनकी पोजीशन को और उनके कलर को निर्धारित करेगा। यहाँ पर "min-width" सेक्शन के "#" को आपकी पसंद के नंबर से (जैसे कि, 250) से रिप्लेस करना और "background-color" हैडिंग को आपके पसंद के कलर या HTML कोड से रिप्लेस करना न भूलें:
```
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 #px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/3234689-6.jpg\/v4-460px-3234689-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/3234689-6.jpg\/v4-728px-3234689-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
ड्रॉप-डाउन मेनु में मौजूद कंटेंट्स की डिटेल एड करें: ये कोड आपके वेबसाइट के ड्रॉप-डाउन मेनु के टेक्स्ट कलर और ड्रॉप-डाउन मेनु की बटन के साइज को निर्धारित करेगा। यहाँ पर "#" की जगह पर, बटन के साइज को दर्शाने वाले, आपके द्वारा चाहे हुए पिक्सेल्स (pixels) के नंबर को रखना न भूलें:
```
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 #px 
 #px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/3234689-7.jpg\/v4-460px-3234689-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/3234689-7.jpg\/v4-728px-3234689-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
ड्रॉप-डाउन मेनु के होवर (माउस का कर्सर आने पर) बिहेवियर को एडिट करें: जब आप आपके माउस को ड्रॉप-डाउन मेनु बटन के ऊपर से लेकर जाते हैं, तब आपको कुछ कलर को बदलने की जरूरत होगी। सबसे पहले "background-color" लाइन कलर के उस चेंज को दर्शाएगी, जो ड्रॉप-डाउन मेनु से किसी आइटम को सिलेक्ट करने पर नजर आने वाला है, जबकि दूसरी "background-color" लाइन ड्रॉप-डाउन मेनु बटन के कलर चेंज को दर्शाएगी। आइडियली, ये दोनों ही कलर सिलेक्ट नहीं किए जाने पर थोड़े हल्के नजर आएंगे:
```
 . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;} 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/3234689-8.jpg\/v4-460px-3234689-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/3234689-8.jpg\/v4-728px-3234689-8.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
आपके द्वारा डॉक्यूमेंट के CSS पोर्शन को पूरा करने की पुष्टि को दर्शाने के लिए, इस कोड को एंटर करें:
```
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/3234689-9.jpg\/v4-460px-3234689-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/3234689-9.jpg\/v4-728px-3234689-9.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
ड्रॉप-डाउन बटन का एक नाम तैयार करें: दिए हुए इस कोड को एंटर करें, यहाँ पर "Name" की जगह पर, आप आपके ड्रॉप-डाउन बटन को जो भी नाम देना चाहते हैं (जैसे कि, Menu ) उसे लिखना मत भूलें:
```
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Name </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/3234689-10.jpg\/v4-460px-3234689-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/3234689-10.jpg\/v4-728px-3234689-10.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
आपके ड्रॉप-डाउन मेनु में कोई लिंक एड करें: ड्रॉप-डाउन मेनु में मौजूद हर एक आइटम पर किसी न किसी तरह से लिंक एड किए रहना चाहिए, वो आपके वेबसाइट का एक पेज हो सकती हैं या फिर कोई एक्सटर्नल वेबसाइट भी हो सकती है। आप इस कोड को एंटर करके ड्रॉप-डाउन में आइटम एड कर सकते हैं, बस यहाँ पर https://www.website.com की जगह पर आपके लिंक का एड्रेस (कोटेशन मार्क्स को रहने दें) और "Name" की जगह पर लिंक का नाम लिखना न भूलें।
```
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/3234689-11.jpg\/v4-460px-3234689-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/3234689-11.jpg\/v4-728px-3234689-11.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

11
डॉक्यूमेंट को बंद कर दें: डॉक्यूमेंट को बंद करने और ड्रॉप-डाउन मेनु के आखिर के कोड को दर्शाने के लिए इन टैग्स को एंटर करें:
```
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/3234689-12.jpg\/v4-460px-3234689-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/3234689-12.jpg\/v4-728px-3234689-12.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

आपके कोड को इसी तरह का नजर आना चाहिए: ^{[२]
X
रिसर्च सोर्स}

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 16 
 px 
 ; 
 font-size 
 : 
 16 
 px 
 ; 
 border 
 : 
 none 
 ; 
 } 
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 200 
 px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 12 
 px 
 16 
 px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
 . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;} 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Social Media </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
 < 
 a 
 href 
 = 
 "https://www.google.com" 
 > 
Google </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.facebook.com" 
 > 
Facebook </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.youtube.com" 
 > 
YouTube </ 
 a 
 > 
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

सलाह

अपने कोड को आपकी वेबसाइट पर पोस्ट करने से पहले उसे हमेशा टेस्ट कर लिया करें।
ऊपर दिए इन्सट्रक्शन उस ड्रॉप-डाउन मेनु के लिए हैं, जो ड्रॉप-डाउन मेनु के बटन के ऊपर माउस के कर्सर को लेकर जाने पर एक्टिवेट हो जाएगा। अगर आप ऐसे ड्रॉप-डाउन मेनु को तैयार करना चाहते हैं, जो केवल क्लिक करने पर ही नजर आए, तो आपको JavaScript का इस्तेमाल करना पड़ेगा। ^{[३]
X
रिसर्च सोर्स}

चेतावनी

"black" या "green" के जैसे टैग्स का इस्तेमाल करते समय HTML कलर काफी लिमिटेड होते हैं। आप यहाँ से एक ऐसे HTML कलर जनरेटर को पा सकते हैं, जो आपको कस्टम कलर बनाने और इस्तेमाल करने देगा।

[१]

[२]

[३]

लॉग इन

कैसे HTML और CSS में ड्रॉपडाउन मेनु तैयार करें

चरण

सलाह

चेतावनी

संबंधित लेखों

रेफरेन्स

विकीहाउ के बारे में

यह लेख ने कैसे आपकी मदद की?

सम्बंधित लेख

हमें फॉलो करें

शेयर करें

Explore Categories