CSS को ड्रप-डाउन मेनु कसरी बनाउने

निर्देशनहरू

सबैभन्दा पहिले, यो ड्रप-डाउन मेनु हो भनेर बुझ्न लायक छ। यस परिभाषाको आधारमा, विभिन्न मक-अपहरू निर्माण गर्ने थुप्रै तरिकाहरू छन्। यस अवस्थामा, हामी निर्माणमा धेरै निरन्तर दृश्य वस्तुहरू र धेरै थप (लुकेका) समावेश निर्माणहरू समावेश गर्नेछौं। चलो सिद्धान्तको साथ समाप्त र अभ्यास गर्न तल आउनुहोस्।

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

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

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

  निष्कर्ष

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