Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

कैसे एक CSS3 व्हील मेनू बनाएँ

by
Length:LongLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

एक वास्तविक परियोजना पर अपने हाथों को गंदे होने के बजाय CSS3 सीखने का कोई बेहतर तरीका नहीं है और यही ठीक है कि हम क्या करने जा रहे हैं। मैं आपको सिखाने जा रहा हूं कि एडवांस्ड CSS तकनीकों के लिए कुछ शुरुआती का उपयोग करके एक बहुत बढ़िया, स्तरित CSS3 के व्हील मेनू का निर्माण कैसे किया जाए। तो अपने पसंदीदा टेक्स्ट एडिटर या IDE को तोड़ दें और चलो कुछ CSS3 जादू पर आरंभ करें!

आज आप सीखेंगे कि कैंडी गन्ना टिडरडॉफ़ को कई अलग-अलग स्टाइल्स और उपलब्ध रंग भिन्नताओं से बाहर कैसे बनाएं। आपको स्रोत फ़ाइलों में सभी बदलाव प्राप्त होंगे। साथ ही एक अतिरिक्त बोनस के रूप में मैंने वैकल्पिक जावास्क्रिप्ट का एक छोटा सा जोड़ा है ताकि आप अपने इमेजेज को घुमाने के लिए hovered मेनू आइटम के आधार पर कर सकें। स्रोत फ़ाइल भी अपने दस्तावेज़ों के साथ आता है!

नोट: इस समय IE के लिए समर्थन सीमित है। हम इस लिफाफे को आगे बढ़ाने के उद्देश्य से इसके माध्यम से जा रहे हैं कि हम CSS3 में क्या कर सकते हैं ... लेकिन व्यावहारिकता के किनारे पर सभी चीजों के साथ, इसका मतलब थोड़ा स्थिरता का त्याग करना है। हम ट्यूटोरियल के अंत में IE विषय को संबोधित करेंगे!


वीडियो ट्यूटोरियल

हम आज दो अलग तरह के ट्यूटोरियल की पेशकश कर रहे हैं: एक वीडियो और नीचे एक पूर्ण लिखित ट्यूटोरियल। आप जो भी सीखने की पद्धति (या दोनों!) के साथ पालन करें और हम आपको किसी भी समय अंत तक पहुंचेंगे!


लिखित ट्यूटोरियल

लिखित ट्यूटोरियल स्टेप ब्य स्टेप नीचे है। पूर्ण डाउनलोड करने योग्य स्रोत के रूप में अच्छी तरह से हड़पने के लिए सुनिश्चित करें!


Step 1: लेयर्स

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

कोड:

जैसा कि आप देख सकते हैं कि कोड बहुत सीधा-आगे है। हमने अनिवार्य रूप से एक लेयर एक दूसरे के ऊपर रखी है और इस तरह वे अपने पदों को पकड़ने में सक्षम होंगे।

अगला हम इस व्हील के केंद्र में एक इमेज जोड़ना चाहते हैं, या इस मामले में टेयरड्रॉप। ऐसा करने के लिए हम केवल wrap4 वर्ग और पूर्णांक वर्ग के बीच में निम्न कोड जोड़ देंगे। यह इमेज कैनवास के केंद्र में लॉक करेगा। हम इस के लिए सिर्फ एक चकाचौंध इमेज का उपयोग करेंगे क्योंकि वे अद्भुत हैं!

अब हम प्रत्येक स्तर पर एक के लिए कुछ स्टाइल जोड़ना चाहेंगे।

#मेनू-व्रैप:

यह आपके व्हील मेनू के लिए मुख्य कंटेनर होगा इसमें किसी भी सार्वभौमिक फ़ॉन्ट्स और फ़ॉन्ट आकार शामिल हैं जो कि div id = "menu-wrap" के अंदर है।

हम आगे बढ़ेंगे और सुनिश्चित करेंगे कि हमारे केंद्र इमेज को व्हील के बीच में margins का उपयोग करके इसे सही ढंग से व्यवस्थित किया गया है, इसमें कुछ dimensions और एक border शामिल है।

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

wrap1:

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

.wrap2:

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

.wrap3 & 4:

अब हम सभी अन्य रैपरों के लिए प्रक्रिया को दोहराने के लिए अलग-अलग रंग का ग्रेडिएंट्स दोहराएंगे और प्रत्येक लेयर 40px को आखिरी की तुलना में छोटा करते हैं।

.wrap5 .nav-holder:

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

इस बार व्रैप 5 की चौड़ाई और ऊंचाई अन्य लेयर्स की तुलना में 60px कम होगी ताकि यह अच्छा हो सके। शीर्ष पर एक और 10px लेयर को अलाइन करने में मदद करेगा और एक आंतरिक बॉक्स छाया हमें व्रैप 5 और बीच की इमेज के बीच की दूरी का एक अच्छा दृष्टिकोण देगा।

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

"नैव-होल्डर की सीमा को दाहिनी ओर (उप-मेनू के लिए) छिपाया जाना चाहिए, बाईं ओर दोगुनी (मुख्य मेनू के लिए) और बाकी के लिए ठोस एक अच्छा और आसान इफ़ेक्ट बनाते हुए लेयर्स की मात्रा को कम करते हुए हम जोड़ना है।"

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

परिसरों: हम्म ... क्या यह आपको अधूरा लग रहा है? हमें इसे पूरी तरह से बुलाए जाने वाले कुछ लेयर्स से ऊपर की जरूरत है ताकि हम केंद्र की इमेज के कुछ हिस्सों को छिपा सकें और एनएवी धारक को अन्य लेयर्स के चारों ओर एक अच्छा गोल इफ़ेक्ट बनाने और इसे बंद करने के लिए ला सकते हैं।

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

.completer1 में इस ट्राइड्रोप शैली के लिए कोई भी प्रदर्शन नहीं होगा I अन्य स्टाइल्स जैसे कि व्हील के रूप में हमने उस भाग को हटा दिया है ताकि वह प्रदर्शन कर सके।

.completer2 में थोड़ा अधिक रोटेशन होता है और हमें इसे फिट करने के लिए थोड़ा नीचे धकेलना पड़ता है।

आप पूर्णणकर्ताओं को जोड़ते हैं, तो आपके पास ऐसा कुछ होना चाहिए ... फिर भी अगर आप यहां पर जो कुछ भी देखते हैं, तो अपने कोड की जांच करें और देखें कि आपने क्या मिस किया है।

अब हमारे साथ काम करने के लिए layers का एक बड़ा सेट है। वे सभी अच्छी तरह से निहित हैं और चिकनी CSS3 के effects हैं तो हम आगे बढ़ते हैं और इस बच्चे को काम करते हैं!


Step 2: नेविगेशन मेनू आइटम और उप मेनू आइटम

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

कोड:

मेनू को सक्रिय रखने के लिए एक हॉवर ब्लॉक होता है, जैसा कि आप अपने माउस के साथ व्हील से गुजरते हैं और हम यह सुनिश्चित करना चाहते हैं कि पूरे व्हील को कवर किया जाए, इसलिए IE संगतता के लिए हम 0.01 opacity के साथ एक बैकग्राउंड जोड़ देंगे अन्यथा IE जीत 'टी पहचान है कि तत्व भी वहाँ है।

मार्जिन-बाएं का उपयोग करना: 76px सुनिश्चित करता है कि आपके पास मुख्य मेनू और उप-मेन्यू पर मंडराने के लिए पर्याप्त जगह है और साथ ही किसी भी चीज़ के बिना व्हील को पार कर सकते हैं।

अब हम प्रत्येक मेनू आइटम से बुलेट अंक निकालना चाहते हैं या [ली]। हम यह भी सुनिश्चित करना चाहते हैं कि वे नैव-होल्डर के रिलेटिव हैं।

आप थोड़े अतिरिक्त स्टाइल के लिए एक सीमा रेडियस जोड़ सकते हैं। हम बैकग्राउंड का एक ठोस रंग बनाते हैं और मेनू आइटम को बाईं ओर ले जाते हैं ताकि वे नैव-होल्डर धारक के किनारों को मुश्किल से छू रहे हों।

पैडिंग, टेक्स्ट इंडेंट और रंग अतिरिक्त स्टाइल के लिए हैं और मेन्यू के लिए फ़ंक्शन करने की आवश्यकता नहीं है।

अब, उप-मेन्यू में थोड़ा सा ग्रेडिएंट डालें और उसे दाहिने ओर धकेलें और पहले उप-मेन्यू आइटम को टक्कर दें, जो ब्लेड के किनारे तक ही सीमित है।

एक बॉक्स-छाया जोड़ने से हमें उप-मेनू आइटमों के इफ़ेक्ट को प्रभावित करने में मदद मिलेगी, जो कि उनके संबंधित लेयर्स के नीचे हैं।

प्रत्येक उप मेनू आइटम पर मार्जिन लगाए जाने से हमें और अधिक विभाजन मिल जाएगा और प्रत्येक एक अलग लेयर के नीचे होने का इफ़ेक्ट दे देंगे।

आप प्रत्येक आइटम के लिए opacity को जोड़ सकते हैं ताकि इसे ऊपर से बीच तक और नीचे से मध्य तक फीका कर दिया जा सके, जहां मध्य वस्तु में पूर्ण opacity है।

ठीक है, आपने अपना उप-मेनू जोड़ा है लेकिन यह अभी भी किसी भी मुख्य मेनू के बिना दिखाया गया है। इसे ठीक करने के लिए हमें केवल किसी भी प्रदर्शन को [ul] में जोड़ना होगा।

तो अब यह बिल्कुल दिखाई नहीं देता! ठीक है, आगे बढ़ो और इसे मुख्य आइटम के ऊपर प्रदर्शित होने के बाद प्रदर्शित करें। li का उपयोग करके: hover > ul हम यह बता सकते हैं कि जब एक मुख्य मेनू [li] ऊपर रखा गया हो तो हम display:block का उपयोग करके उपयुक्त उप मेनू के लिए [ul] दिखाएंगे।

प्रत्येक मुख्य मेनू आइटम के लिए स्टाइलिंग।

शुद्ध सौंदर्यशास्त्र के लिए हम एक सीमा रेडियस, बॉक्स छाया और बैकग्राउंड जोड़ सकते हैं। ऊंचाई, चौड़ाई, पूर्ण स्थिति और शीर्ष मार्जिन बनाने के लिए क्या आवश्यक है।

शीर्ष मार्जिन हमें पहले मेनू आइटम को नीचे धकेल दिया जाता है जहां हम चाहते हैं, तो हम बाकी आइटम्स को नीचे धकेलने के लिए कम मार्जिन का उपयोग कर सकते हैं।

शेष 3 मेनू आइटम्स के लिए हम उन दोनों के बीच एक रिक्ति और एक मार्जिन को अलग-अलग लेयर्स के खिलाफ टक्कर देने के लिए प्रत्येक के लिए एक शीर्ष हाशिया को जोड़ते हैं।

इसके बाद हमें हर वस्तु में रोटेशन को जोड़ना सुनिश्चित करना है ताकि हम व्हील के चारों ओर मेनू को अच्छी तरह फिट कर सकें।

मुख्य मेनू आइटमों की देखभाल करने के बाद हम मेनू आइटम को व्हील के चारों ओर ले जाने के बजाय उप-मेन्यू के लिए एक ही काम करने जा रहे हैं, हम चाहते हैं कि वे सीधे और नीचे हों। ऐसा करने के लिए हमें प्रत्येक उप-मेनू में रोटेशन जोड़कर मुख्य मेनू के रोटेशन की भरपाई करने की आवश्यकता होती है।

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

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

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

यदि आप प्रत्येक व्यक्तिगत उप-मेन्यू को और स्टाइल में लिखना चाहते हैं तो आप निम्न कोड का उपयोग कर सकते हैं ...

आपके अंतिम भाग को समाप्त करने के बाद, आपको कुछ ऐसा होना चाहिए ... एक बार फिर अगर आपकी तस्वीर नीचे दिखे, तो चिंता न करें, वापस जाएं और अपना कोड जांचें।

क्रेडिट: केंद्र इमेज envato संपत्ति पुस्तकालय से है।


What about IE?

IE के लिए अच्छी तरह से हम एक अलग स्टाइलशीट में CSSPIE का उपयोग कर सकते हैं। मैं इसमें बहुत अधिक नहीं जाऊंगा क्योंकि यह ठीक IE के साथ भी ठीक से प्रदर्शित नहीं होता है। यदि आप एक बेहतर सुधार के बारे में जानते हैं, तो कृपया मुझे टिप्पणियों में बताएं।

व्यवहार का उपयोग करके हम IE को बताने के लिए csspie php फ़ाइल को कॉल कर सकते हैं कि CSS3 के स्टाइल्स का इस्तेमाल करना ठीक है। तो यह है कि यह कैसे काम करेगा ...

कुछ अन्य IE फिक्स इस तरह चलते हैं ...


आपने सब कुछ कर लिया!

तो मुझे आशा है कि आप लोग इस ट्यूटोरियल का आनंद लेंगे! याद रखें कि CSS3 का समर्थन सीमित है और यदि आप कभी भी बनाए गए सभी ब्राउज़रों में संगतता चाहते हैं तो इमेजेज और कुछ javascript का उपयोग करने के समान कार्य पूरा करने के अन्य तरीके भी हैं। यदि आप अन्य मेनू स्टाइल्स में एक ट्यूटोरियल चाहते हैं, तो javascript वर्शन का उपयोग कैसे करें या सिर्फ और अधिक बहुत बडिया CSS3 इफेक्ट्स का उपयोग कैसे करें, मुझे टिप्पणियों में बताएं और मैं आपके लिए कुछ व्हिप दूँगा! Leave your comments and questions below;)

धीरज रखो और सीखते रहो और इससे पहले कि आप जानते हों, आप जो कुछ भी करते हैं, उसके लिए आप एक मास्टर होंगे!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.