साइट पृष्ठों पर ड्रॉप-डाउन मेनू का उपयोग स्थान बचाने और वेब संसाधन की संरचना की तार्किक प्रस्तुति प्रदान करने के लिए किया जाता है। इस तत्व को लागू करने के कई तरीके हैं, सबसे सरल में से एक नीचे दिया गया है।
यह आवश्यक है
HTML और CSS भाषाओं का बुनियादी ज्ञान
अनुदेश
चरण 1
मेनू का HTML कोड नेस्टेड सूची तत्वों (UL और LI) का उपयोग करता है, जिसके अंदर पृष्ठों के लिंक रखे जाते हैं। इसमें कोई जटिल संरचना नहीं है। डायनामिक्स को CSS के माध्यम से कार्यान्वित किया जाता है, जिसका विवरण ब्लॉक सीधे पृष्ठ के स्रोत कोड में रखा जाता है। इसके बारे में कुछ खास नहीं है, इसके अलावा, पाठ में कुछ शैली ब्लॉकों के उद्देश्य के कुछ स्पष्टीकरण शामिल हैं।
चरण दो
<! DOCTYPE html सार्वजनिक "- // W3C // DTD XHTML 1.0 संक्रमणकालीन // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ड्रॉप डाउन मेनू * {
फ़ॉन्ट-परिवार: वर्दाना;
फ़ॉन्ट-आकार: 14px;
} उल, ली, ए {
पैडिंग: 0;
प्रदर्शन क्षेत्र;
सीमा: 0;
मार्जिन: 0;
} उल {
सीमा: 1px ठोस #AAA;
चौड़ाई: 150 पीएक्स;
सूची-शैली: कोई नहीं;
पृष्ठभूमि: #एफएफएफ;
} ली {
पृष्ठभूमि-रंग: #एएए;
स्थिति: रिश्तेदार;
जेड-इंडेक्स: 9;
पैडिंग: 1px;
}
li.folder {पृष्ठभूमि-रंग: #AAA;}
ली.फ़ोल्डर उल {
स्थिति: निरपेक्ष;
शीर्ष: 5px;
बाएं: 111px; / * IE ब्राउज़रों के लिए * /
}
li.folder> उल {बाएं: 140px;} / * अन्य ब्राउज़रों के लिए * / a {
पैडिंग: 2px;
सीमा: 1px ठोस #FFF;
पाठ-सजावट: कोई नहीं;
चौड़ाई: 100%; / * IE ब्राउज़र के लिए * /
रंग: # 000;
फोंट की मोटाई: बोल्ड;
}
ली> ए {चौड़ाई: ऑटो;} / * अन्य ब्राउज़रों के लिए * / ली ए {
चौड़ाई: 140px;
प्रदर्शन क्षेत्र;
} ली ए सबमेनू {
पृष्ठभूमि-रंग: पीला;
} / * लिंक्स * /
ए: होवर {
सीमा-रंग: ग्रे;
पृष्ठभूमि-रंग: # FF0000;
रंग काला;
}
li.folder a: होवर {
पृष्ठभूमि-रंग: # FF0000;
} / * फ़ोल्डर्स * /
उल उल, ली: होवर उल उल {प्रदर्शन: कोई नहीं;}
li.folder: होवर {z-index: 10;}
ली: होवर उल, ली: होवर ली: होवर उल {डिस्प्ले: ब्लॉक;}
- 1. पेज
-
2. फ़ोल्डर
- २.१ पृष्ठ
-
२.२ फ़ोल्डर
- 2.2.1 पृष्ठ
- २.२.२ पृष्ठ
- 2.2.3 पृष्ठ
- २.३ पृष्ठ
-
3. फ़ोल्डर
- ३.१ पृष्ठ
- ३.२ पृष्ठ
- ३.३ पृष्ठ
- 4. पेज
चरण 3
आप इस कोड में इंटरनेट एक्सप्लोरर ब्राउज़र के पुराने संस्करणों के लिए समर्थन जोड़ सकते हैं - इसे जावास्क्रिप्ट (पीटर नेडरलोफ द्वारा) का उपयोग करके कार्यान्वित किया जाता है। आपको फ़ाइल को आवश्यक कोड के साथ डाउनलोड करने की आवश्यकता है, उदाहरण के लिए, इस लिंक से - https://peterned.home.xs4all.nl/htc/csshover3.htc। इसे मुख्य पृष्ठ के समान फ़ोल्डर में रखा जाना चाहिए। और मुख्य पृष्ठ की शैलियों के विवरण में, इसमें एक लिंक जोड़ें - इसे सीधे शुरुआती शैली टैग के बाद रखा जा सकता है: / * पुराने IE ब्राउज़रों के लिए *
शरीर {व्यवहार: url ("csshover3.htc");}
