न केवल जावास्क्रिप्ट में, बल्कि मानक HTML टैग का उपयोग करके भी एक अच्छा ड्रॉपडाउन मेनू बनाया जा सकता है। ड्रॉप-डाउन मेनू बनाने की यह विधि उन लोगों के लिए उपयोगी होगी जो साइट बनाने में अपना पहला चरण शुरू कर रहे हैं और पृष्ठों पर मेनू बनाने के कार्य को सरल बनाना चाहते हैं।
अनुदेश
चरण 1
एचटीएमएल कोड में, ऐसा मेनू एक अनियंत्रित सूची है जिसमें नेस्टेड सूचियां होती हैं। आरंभ करने के लिए, एक style.css फ़ाइल बनाएं और मेनू को स्टाइल और प्रारूपित करने के लिए निम्नलिखित सीएसएस कोड को कॉपी करें:
#नव, #नव उल {
सूची-शैली: कोई नहीं;
मार्जिन: 0;
पैडिंग: 0;
सीमा: 1px ठोस # 000;
पृष्ठभूमि: # 515151;
बाईंओर तैरना;
चौड़ाई: 100%;
}
#नव ली {
बाईंओर तैरना;
स्थिति: रिश्तेदार;
पृष्ठभूमि-रंग: # 003366;
बैक / ग्राउंड: कोई नहीं;
}
#नव ली उल {
कुछ भी डिस्प्ले मत करो;
स्थिति: निरपेक्ष;
पृष्ठभूमि-रंग: # 003366;
पैडिंग: 8px 0;
चौड़ाई: 138 पीएक्स;
}
चरण दो
अब हमें मेनू आइटम में कुछ सजावट जोड़ने की जरूरत है। उनके लिए चौड़ाई और ऊंचाई को परिभाषित करें, अंडरलाइन लाइनों को हटा दें, प्रत्येक लिंक के लिए एक स्पष्ट चौड़ाई निर्धारित करें, और वांछित पृष्ठभूमि रंग निर्दिष्ट करें।
चरण 3
इन सभी परिवर्तनों के लिए, फ़ाइल में निम्न कोड जोड़ें:
#एनएवी ए {
रंग: #fff;
पाठ-सजावट: कोई नहीं;
प्रदर्शन क्षेत्र;
चौड़ाई: 120 पीएक्स;
पैडिंग: 4px 10px;
बैकग्राउंड-कलर: # 003366 रिपीट-वाई राइट;
}
#एनएवी ए: होवर {
रंग: # 000;
पृष्ठभूमि-रंग: # 0033FF;
}
#नव ली: होवर {
पृष्ठभूमि-रंग: # 333333;
}
फिर मेनू को अंतिम रूप देने के लिए निम्नलिखित कोड जोड़ें:
#नव ली: होवर ली उल {
कुछ भी डिस्प्ले मत करो;
चौड़ाई: 138 पीएक्स;
शीर्ष: -9 पीएक्स;
बाएं: 133px;
}
#नव ली: होवर ली: होवर उल {
प्रदर्शन क्षेत्र;
}
चरण 4
HTML संस्करण में, सामान्य अनियंत्रित मेनू सूची इस तरह दिखती है - इसके आधार पर, मेनू बनाया जाता है, जिसका उल्लेख लेख में किया गया था।
- घर
-
सूची
-
सभी प्रोडक्ट
- तिथि के अनुसार
- निर्माताओं
- अन्य
-
