सुंदर CSS3 मेनू

एक साल पहले की तुलना में थोड़ा कम, स्निकर्समिक्स ने " मेनू को रंग के एक चिकनी उलटा के साथ " प्रकाशित किया। यह लेख जावास्क्रिप्ट में बने मेनू का वर्णन करता है। एक दिन पहले, उन्होंने मुझे वह साइट दिखाई, जिस पर उन्होंने यह मेनू बनाया था, और, NoScript प्रशंसक के रूप में, मैं इस बात से नाराज था: "यह मेनू CSS में किया जा सकता है!"



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

इसलिए, मैं CSS3 में एक समान मेनू के कार्यान्वयन का प्रस्ताव करता हूं।

ताकि आप, प्रिय पाठक, मतभेदों को तुरंत देख सकें, मैं अंतिम CSS3 मेनू डेमो और JS के बाद Snickersmix मेनू डेमो लाऊंगा

अब मैं संक्षेप में निर्माण प्रक्रिया के बारे में बात करने की कोशिश करूंगा


एचटीएमएल

<nav id="a"> <ul><li><a href="#"></a></li><li><a href="#">   </a></li><li class="active"><a href="#"> </a></li><li><a href="#"></a></li><li class="slide"></li></ul> </nav> 

1) मेन्यू में डिस्प्ले इनलाइन-ब्लॉक है , इसलिए टैग के बीच स्पेस या लाइन ब्रेक नहीं होना चाहिए
2) स्लाइड क्लास के साथ अंतिम मेनू आइटम एक चलती हुई मृत्यु होगी। मैं छद्म तत्व के पहले / बाद के माध्यम से इसे करने का एक रास्ता खोज रहा था, लेकिन मैंने इसे कभी नहीं पाया।

विकल्प 1
मैंने इस विकल्प को जल्दी से पर्याप्त लिखा - यहां तत्वों की निश्चित चौड़ाई।

यह और अन्य मेनू CSS3 संक्रमण संक्रमण एनीमेशन का उपयोग करते हैं

 transition: all 0.5s ease-in-out; 

मैंने इस एनीमेशन को सूची आइटम (ली) पर किसी भी (सभी) कार्यों / परिवर्तनों को सौंपा।

अब हमें स्लाइड क्लास चाल के साथ तत्व बनाना था। ऐसा करने के लिए, मैंने इस तत्व को स्थिति पर सेट किया है : निरपेक्ष , अपने माता-पिता (उल) को भूलकर बिना स्थिति निर्धारित करने के लिए : सापेक्ष ताकि स्लाइड मेनू के सापेक्ष स्थित हो, न कि पृष्ठ। इस प्रकार, हम मेनू के चारों ओर ले जाने के लिए बाएं या दाएं का उपयोग कर सकते हैं।

लेकिन इसे कैसे आगे बढ़ाया जाए? पहले विकल्प में, मैंने पिक्सेल में प्रत्येक तत्व की पूर्ण गणना की, अर्थात्। आयाम और निर्देशांक मिला। और सामान्यीकृत संबंधित तत्वों के चयनकर्ता की मदद से , उन्होंने होवर पर स्लाइड चाल की।

 .active:nth-child(1) ~ li.slide, /*      */ li:hover:nth-child(1) ~ li.slide { /*     */ left: 0; width: 147px; } .active:nth-child(2) ~ li.slide, li:hover:nth-child(2) ~ li.slide { left: 147px; width: 241px; } .active:nth-child(3) ~ li.slide, li:hover:nth-child(3) ~ li.slide { left: 388px; width: 257px; } .active:nth-child(4) ~ li.slide, li:hover:nth-child(4) ~ li.slide { left: 645px; width: 156px; } 

यह काम करने लगता है, लेकिन बहुत असुविधाजनक है:
- यदि वे बदलते हैं तो तत्वों की लगातार गणना करना आवश्यक है
- एक बग है - यदि फोंट पास नहीं होते हैं, तो संपूर्ण मेनू क्रैश हो जाएगा

विकल्प 2
पृष्ठभूमि एनीमेशन विकल्प

मेनू Snickersmix द्वारा बनाया और प्रदर्शित किया गया था। और उसके बाद, मेरी आँखें खुली थीं। यह पता चला है कि उसके पास "चिकनी रंग उलटा" में एक चिप है। फिर मैंने समाधान की तलाश शुरू कर दी, लेकिन फिलहाल मुझे यह नहीं मिला, लेकिन मेनू स्वयं बनाया गया था।

विकल्प 1 ए
खोज शुरू हुई, और "डेढ़" विकल्प का जन्म हुआ। यह थोड़ा सजावट निकला

मैं उम्मीद कर रहा था कि आप फ़िल्टर के माध्यम से किसी तरह svg matrices को लागू करने की कोशिश कर सकते हैं, लेकिन दुर्भाग्य से ऐसा कुछ नहीं हुआ ( विकल्प 3 )

और अतिरिक्त स्लाइड तत्व के बजाय पहले / बाद में छद्म तत्वों के माध्यम से करने का प्रयास किया गया, लेकिन यह भी सफल नहीं हुआ। हम CSS4 और माता-पिता से संपर्क करने के अवसर की प्रतीक्षा कर रहे हैं। ( विकल्प 4 )

ये सभी आयोजन एक साल पहले की तुलना में थोड़ा कम हुए। फिर ऊपर की आवाज वाले विकल्प बनाए गए। लेकिन इन कार्यान्वयनों में एक छोटा सा जांबाज है: लिनक्स सिस्टम पर जिसमें विंडोज फोंट नहीं है, मेनू टूट जाता है। लेकिन यह उस समय संपादित करने के लिए बहुत आलसी था, क्योंकि यह अभी भी कहीं भी उपयोग करने की योजना नहीं थी, और काम के संस्करण को लागू करने के लिए कुछ सुधार थे, इसलिए धूल को इकट्ठा करने के लिए यह सब काम सावधानी से मेजेनाइन पर रखा गया था।

तब से, लगभग एक साल बीत चुका है और मैंने मेनू को ठीक करने का फैसला किया है, और उसी समय एक लेख भी लिखा है।
और इसलिए, इस मेनू के अंतिम पांचवें संस्करण को पूरा करें

सामान्य तौर पर, कुछ भी नया नहीं दिखाई दिया है। एकमात्र अंतर यह है कि आकार प्रतिशत में इंगित किए जाते हैं, जो फोंट के साथ समस्या को समाप्त करता है, और एक ही समय में मेनू को रबड़ या अनुकूली लेआउट में सम्मिलित करना संभव बनाता है।

इसके अलावा पांचवें विकल्प में IE6-9 के लिए फिक्सेस जोड़े गए थे। बेशक, उनमें कोई एनीमेशन नहीं होगा, लेकिन मेनू काफी खाद्य है।

बस इतना ही। सब कुछ काफी आसान और सरल है।
यदि कोई अन्य कार्यान्वयन विकल्प के साथ आता है, तो मुझे देखकर खुशी होगी, और मुझे लगता है, केवल मुझे ही नहीं।

अंत तक पढ़ने के लिए धन्यवाद!