कैसे एक ड्रॉप-डाउन सीएसएस मेनू बनाने के लिए

अनुदेश

सबसे पहले, के समझ में एक ड्रॉप-डाउन मेनू है क्या करते हैं। इस परिभाषा के तहत विभिन्न लेआउट का निर्माण विभिन्न तरीकों का एक बहुत हो जाता है। इस मामले में, हम कई लगातार दिखाई वस्तुओं और कई अतिरिक्त (छुपा) से मिलकर एक संरचना का विश्लेषण करेगा। के सिद्धांत के साथ समाप्त करने और अभ्यास करने के लिए शुरू करते हैं।

• हम अपने मेनू के लेआउट बनाएँ। इस HTML कोड लेबलिंग करने के लिए,। एक नेस्टेड सूची बनाएं:
  • • < / ul>। कुछ इस तरह अपने ड्रॉप-डाउन मेनू की तरह दिखना चाहिए। सीएसएस बाद में हस्तक्षेप करने के लिए। इस मामले में मुख्य सूची तीन मुख्य क्षेत्रों और दो संलग्न होते हैं।
    • उप-मेनू छुपाएं। इस हम एक स्टाइलशीट का उपयोग के लिए, निम्न गुण निर्धारित किए हैं: उल उल {प्रदर्शन: कोई नहीं;} इस स्क्रीन से दूसरी सूची के तत्वों को हटा देगा।
    • एक मेनू सीएसएस बनाएँ, मुख्य सूची से ड्रॉप डाउन। व्यापक स्टाइल शीट्स निम्नलिखित नियम लिखें: उल ली: उल मंडराना {प्रदर्शन: ब्लॉक;}। इस प्रविष्टि का मतलब है कि जब माउस से अधिक तत्व ली है, जो उल सूची में स्थित है स्क्रीन उल पर दिखाई देता है (संलग्न)। पहली नज़र में, इस तरह के एक योजना जटिल और भ्रामक लग सकता है। लेकिन वास्तव में, सब कुछ बहुत सरल है।
    • टैग
    • अपनी सामग्री डालने से इस लेआउट खुद का प्रयोग करें। आप सूची तत्वों की संख्या बदल सकते हैं।

    सजावटी परिवर्तन

    जैसे ही मुख्य मेनू लेआउट तैयार है, आप पंजीकरण करने के लिए आगे बढ़ सकते हैं। शायद, पहली जगह तैयार में कई सूची आइटम का संकेत मार्कर से छुटकारा पाने के। यह केवल एक प्रॉपर्टी सीएसएस, अर्थात् सूची-शैली-प्रकार का उपयोग किया जाता है। li {सूची-शैली-प्रकार:: कोई नहीं;} आप निम्नलिखित प्रविष्टि जोड़ने के लिए की जरूरत है। तो फिर तुम फ्रेम डालने और कर सकते हैं पृष्ठभूमि। सीमा और पृष्ठभूमि इसमें सहायता के। शायद कुछ पुल डाउन मेनू एक अतिरिक्त सूची के रूप में दिखाई देगा, एक ही मूल तत्वों पर जोर दे अच्छा नहीं लगेगा। इसे ठीक करने के लिए, आप इसे रख सकते हैं। ऐसा करने के लिए, व्यापक स्टाइल शीट्स बारे में निम्नलिखित प्रविष्टि: उल उल {स्थिति: पूर्ण; बाएँ: 15px; सही: 15px; शीर्ष: 15px; नीचे: 15px;}। बेशक, मूल्यों आप अपने खुद के उपयोग करेगा। जहां ड्रॉप-डाउन मेनू देखना चाहते हैं पर निर्भर करता है, सीएसएस कई और अधिक सुविधाओं है कि विभिन्न प्रभाव जोड़ सकते हैं और हमारे सूचियों को सजाने कर सकते हैं की पेशकश करेगा।

    निष्कर्ष

    एक बार फिर यह मेनू लेआउट का निर्माण ध्यान देने योग्य है। उल उल उदाहरण के लिए इस मामले एम्बेडेड मूल्य में इस्तेमाल किया सीएसएस नियम सौंपने के लिए,। आप दस्तावेज़ अन्य समान संरचना को पूरा करने में हैं, वहाँ बड़ी समस्या हो सकती है। इन स्थितियों में, आप उदाहरण के लिए, चयनकर्ताओं या आईडी पहचान-चिह्न के लिए, एक विशेष उद्देश्य के उपयोग करने के लिए की जरूरत है। उपरोक्त लेख लेआउट ड्रॉप-डाउन मेनू सामान्य डिजाइन परिचित करने के लिए बनाया गया है। काम के आराम के अपने कंधों पर टिकी हुई।