() translation by (you can also view the original English article)
एक वास्तविक परियोजना पर अपने हाथों को गंदे होने के बजाय CSS3 सीखने का कोई बेहतर तरीका नहीं है और यही ठीक है कि हम क्या करने जा रहे हैं। मैं आपको सिखाने जा रहा हूं कि एडवांस्ड CSS तकनीकों के लिए कुछ शुरुआती का उपयोग करके एक बहुत बढ़िया, स्तरित CSS3 के व्हील मेनू का निर्माण कैसे किया जाए। तो अपने पसंदीदा टेक्स्ट एडिटर या IDE को तोड़ दें और चलो कुछ CSS3 जादू पर आरंभ करें!
आज आप सीखेंगे कि कैंडी गन्ना टिडरडॉफ़ को कई अलग-अलग स्टाइल्स और उपलब्ध रंग भिन्नताओं से बाहर कैसे बनाएं। आपको स्रोत फ़ाइलों में सभी बदलाव प्राप्त होंगे। साथ ही एक अतिरिक्त बोनस के रूप में मैंने वैकल्पिक जावास्क्रिप्ट का एक छोटा सा जोड़ा है ताकि आप अपने इमेजेज को घुमाने के लिए hovered मेनू आइटम के आधार पर कर सकें। स्रोत फ़ाइल भी अपने दस्तावेज़ों के साथ आता है!
नोट: इस समय IE के लिए समर्थन सीमित है। हम इस लिफाफे को आगे बढ़ाने के उद्देश्य से इसके माध्यम से जा रहे हैं कि हम CSS3 में क्या कर सकते हैं ... लेकिन व्यावहारिकता के किनारे पर सभी चीजों के साथ, इसका मतलब थोड़ा स्थिरता का त्याग करना है। हम ट्यूटोरियल के अंत में IE विषय को संबोधित करेंगे!
वीडियो ट्यूटोरियल
हम आज दो अलग तरह के ट्यूटोरियल की पेशकश कर रहे हैं: एक वीडियो और नीचे एक पूर्ण लिखित ट्यूटोरियल। आप जो भी सीखने की पद्धति (या दोनों!) के साथ पालन करें और हम आपको किसी भी समय अंत तक पहुंचेंगे!
लिखित ट्यूटोरियल
लिखित ट्यूटोरियल स्टेप ब्य स्टेप नीचे है। पूर्ण डाउनलोड करने योग्य स्रोत के रूप में अच्छी तरह से हड़पने के लिए सुनिश्चित करें!
Step 1: लेयर्स
पहली चीज जिसे हम करना चाहते हैं, कुछ लेयर्स बनाते हैं जो एक-दूसरे को overlap कर लेते हैं और यथासंभव कम कोड का प्रयोग करते हुए जगह में रहेंगे। यह बहुत महत्वपूर्ण है कि आपके कोड को बहुत सारे ब्लोट के साथ भरने न दें और बहुत सारे न बनाएं।
अनावश्यक फ्लोट या पूर्ण स्थिति वाले तत्व हैं, इसलिए हम जितना संभव हो उतने रिश्तेदार रहने की कोशिश करेंगे।
कोड:
1 |
|
2 |
<!-- the layers !-->
|
3 |
<div id="menu-wrap"> |
4 |
<div class="wrap1"> |
5 |
<div class="wrap2"> |
6 |
<div class="wrap3"> |
7 |
<div class="wrap4"> |
8 |
<!-- center image goes here !-->
|
9 |
<div class="completer"></div> |
10 |
<div class="completer2"></div> |
11 |
<div class="wrap5"> |
12 |
<div class="nav-holder"> |
13 |
|
14 |
<!-- this space will be used for the menu !-->
|
15 |
|
16 |
</div><!-- nav holder !--> |
17 |
</div><!-- wrap5 !--> |
18 |
</div><!-- wrap4 !--> |
19 |
</div><!-- wrap3 !--> |
20 |
</div><!-- wrap2 !--> |
21 |
</div><!-- wrap1 !--> |
22 |
</div><!-- menu-wrap !--> |
जैसा कि आप देख सकते हैं कि कोड बहुत सीधा-आगे है। हमने अनिवार्य रूप से एक लेयर एक दूसरे के ऊपर रखी है और इस तरह वे अपने पदों को पकड़ने में सक्षम होंगे।
अगला हम इस व्हील के केंद्र में एक इमेज जोड़ना चाहते हैं, या इस मामले में टेयरड्रॉप। ऐसा करने के लिए हम केवल wrap4 वर्ग और पूर्णांक वर्ग के बीच में निम्न कोड जोड़ देंगे। यह इमेज कैनवास के केंद्र में लॉक करेगा। हम इस के लिए सिर्फ एक चकाचौंध इमेज का उपयोग करेंगे क्योंकि वे अद्भुत हैं!
1 |
|
2 |
<span class="img1"><img class="orbit orbit-frame" src="images/card18.jpg" alt="card08" /></span> |
अब हम प्रत्येक स्तर पर एक के लिए कुछ स्टाइल जोड़ना चाहेंगे।
#मेनू-व्रैप:
यह आपके व्हील मेनू के लिए मुख्य कंटेनर होगा इसमें किसी भी सार्वभौमिक फ़ॉन्ट्स और फ़ॉन्ट आकार शामिल हैं जो कि div id = "menu-wrap" के अंदर है।
1 |
|
2 |
#menu-wrap{ |
3 |
background:#e7e7e7; /* This isn't needed */ |
4 |
height:600px; /* This is important and keeps the wheel in place when hovering over elements */ |
5 |
font-family:sans-serif, Franklin Gothic Medium,Helvetica, Arial; /* If not using Franklin, it will automatically go to the next font in the family */ |
6 |
font-size:14px; /* Establishes the global font size */ |
7 |
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */ |
8 |
}
|
हम आगे बढ़ेंगे और सुनिश्चित करेंगे कि हमारे केंद्र इमेज को व्हील के बीच में margins का उपयोग करके इसे सही ढंग से व्यवस्थित किया गया है, इसमें कुछ dimensions और एक border शामिल है।
1 |
|
2 |
#menu-wrap .orbit{ |
3 |
height: 210px; |
4 |
margin: 32px; /* Pushes the images in the display to the center */ |
5 |
position: absolute; |
6 |
width: 210px; |
7 |
}
|
8 |
|
9 |
#menu-wrap .orbit-frame{ |
10 |
border:2px solid #999; /* Creates a division between the image and wrap5 */ |
11 |
}
|
सभी रैपर: हम कुछ स्टाइल्स को बनाना चाहते हैं जो एक सार्वभौमिक सीमा के रेडियस जोड़कर सभी मुख्य आवरण पर लागू होते हैं, इन्हें सभी को केंद्र में डालकर, एक रिलेटिव स्थिति जोड़कर ताकि सब कुछ खत्म हो गया हो और उन्हें नीचे की तरफ ले जाने के लिए भी दबाया जा सके इफ़ेक्ट।
1 |
|
2 |
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */ |
3 |
-moz-border-radius: 220px 0 200px 220px; /* firefox */ |
4 |
-webkit-border-radius: 220px 0 200px 220px; /* webkit */ |
5 |
border-radius: 220px 0 200px 220px; /* opera */ |
6 |
margin:0 auto; /* centers all the wrappers relative to each other */ |
7 |
position:relative !important; /* Do not touch unless you know what you are doing */ |
8 |
top:20px; |
9 |
}
|
wrap1:
ये आपकी सबसे बड़ी लेयर है जो सभी दूसरों के पीछे बैठ जाती है। हम एक ग्रेडिएंट लाल बैकग्राउंड बनाने जा रहे हैं और बड़े ब्रॉवर्स के लिए ठोस लाल फ़ॉलबैक का उपयोग कर रहे हैं। हम IE बनाने के लिए भी CSSpie का प्रयोग करेंगे कि इन स्टाइल्स का इस्तेमाल करना ठीक है। उसके बाद हमें जो कुछ करना है, वह चौड़ाई और ऊंचाई जोड़ती है और आप काम कर रहे हैं। आप यह सुनिश्चित करना चाहते हैं कि चौड़ाई और ऊंचाई सभी अन्य लेयर्स से बड़ी हो, ताकि यह उनके पीछे दिखाया जा सके।
1 |
|
2 |
.wrap1{ |
3 |
background: #FF0000; /* old browsers */ |
4 |
background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */ |
5 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */ |
6 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */ |
7 |
background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/ |
8 |
-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/ |
9 |
height:394px; |
10 |
width:394px; |
11 |
}
|
.wrap2:
अब व्रैप 2 के लिए हम सटीक एक ही काम करने जा रहे हैं केवल हम ग्रेडिएंट के रूप में सफेद की भिन्नताओं का उपयोग करेंगे, और थोड़े bevel effect और बैकग्राउंड शैडो बनाने के लिए एक बाहरी और इनर बॉक्स शैडो जोड़ें। फिर हमें चौड़ाई और ऊंचाई को मुख्य लेयर की तुलना में 40px छोटा बनाने की जरूरत है, जिससे यह और भी अच्छा हो सके।
1 |
|
2 |
.wrap2{ |
3 |
background: #FFFFFF; /* old browsers */ |
4 |
background: -moz-linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /* firefox */ |
5 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCBE8F)); /* webkit */ |
6 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCBE8F',GradientType=0 ); /* ie */ |
7 |
background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*future CSS3 browsers*/ |
8 |
-pie-background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*IE fix using Pie*/ |
9 |
height:354px; |
10 |
width:354px; |
11 |
-moz-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset; |
12 |
-webkit-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset; |
13 |
box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset; |
14 |
}
|
.wrap3 & 4:
अब हम सभी अन्य रैपरों के लिए प्रक्रिया को दोहराने के लिए अलग-अलग रंग का ग्रेडिएंट्स दोहराएंगे और प्रत्येक लेयर 40px को आखिरी की तुलना में छोटा करते हैं।
1 |
|
2 |
.wrap3{ |
3 |
background: #FF0000; /* old browsers */ |
4 |
background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */ |
5 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */ |
6 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */ |
7 |
background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/ |
8 |
-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/ |
9 |
height:314px; |
10 |
width:314px; |
11 |
}
|
12 |
|
13 |
.wrap4{ |
14 |
border: 2px solid #FF0000; |
15 |
background: #990000; /* old browsers */ |
16 |
background: -moz-linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /* firefox */ |
17 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(55%,#CC0000), color-stop(57%,#FF0000)); /* webkit */ |
18 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#FF0000',GradientType=0 ); /* ie */ |
19 |
background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*future CSS3 browsers*/ |
20 |
-pie-background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*IE fix using Pie*/ |
21 |
-moz-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset; |
22 |
-webkit-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset; |
23 |
box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset; |
24 |
height:274px; |
25 |
width:274px; |
26 |
}
|
.wrap5 .nav-holder:
अब हम रैप 5 और नैव-होल्डर स्टाइल कर सकते हैं जो जगह में और कैंडेकन स्टाइल के लिए सभी मेनू आइटम रखेगी, हम काले रंग को एक अच्छा तटस्थ विपरीत जोड़ते हैं जबकि रैप 5 सफेद हो जाएगा और इसके लिए कंटेनर के रूप में काम करेगा केंद्र की इमेज हम यहां क्या कर रहे हैं। बैकग्राउंड को बाहर काट रहे हैं ताकि आप रैप 5 और नैव-होल्डर के माध्यम से देख सकें, जिससे अन्य लेयर्स इसके पीछे और साथ ही केंद्र की इमेज के सामने दिखाई देंगी। इसे ट्रांसपेरेंट बनाने के बाद हम एनएच-धारक और एक सफेद बॉर्डर को व्रैप 5 में एक काला बॉर्डर जोड़ देंगे। नैव-होल्डर की सीमा को दाहिनी ओर (उप मेनू के लिए) छिपाया जाना चाहिए, दोगुनी होनी चाहिए। बाईं ओर (मुख्य मेन्यू के लिए) और आराम करने के लिए ठोस एक अच्छा और आसान इफ़ेक्ट बनाते हुए हमे जोड़ना होगा। लेयर्स की मात्रा को कम करते हुए पारंपरिक रूप से इस आशय के साथ आप 5 या 6 नई लेयर्स को जोड़ सकते हैं, इससे बहुत सी कोड बचा है।
इस बार व्रैप 5 की चौड़ाई और ऊंचाई अन्य लेयर्स की तुलना में 60px कम होगी ताकि यह अच्छा हो सके। शीर्ष पर एक और 10px लेयर को अलाइन करने में मदद करेगा और एक आंतरिक बॉक्स छाया हमें व्रैप 5 और बीच की इमेज के बीच की दूरी का एक अच्छा दृष्टिकोण देगा।
नैव-होल्डर को 0 के शीर्ष से जोड़ना स्वचालित रूप से लेयर्स को दूसरों के साथ अलाइन करेगा। हम आगे की बाएं संरेखण के लिए एक नकारात्मक मार्जिन का भी उपयोग करेंगे और अन्य लेयर्स के ऊपर अच्छी तरह से फिट होने के लिए आनुपातिक ऊंचाई / चौड़ाई बनाएंगे।
1 |
|
2 |
.wrap5{ |
3 |
-moz-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75); |
4 |
-webkit-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75); |
5 |
box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75); |
6 |
border: 20px solid #FFF; /* creates the wrap to see the image behind it */ |
7 |
height: 214px; |
8 |
top: 10px; /* center the element */ |
9 |
width: 214px; |
10 |
}
|
11 |
|
12 |
.nav-holder{ |
13 |
background: none repeat scroll 0 0 transparent; |
14 |
border-color: #121212; /*** The border declarations are used to create the final wrapper, middle see through and hides the right border to show the submenus */ |
15 |
border-style: solid hidden solid double; |
16 |
border-width: 73px medium 73px 73px; |
17 |
height: 252px; |
18 |
margin: -92px; /* centers the object on relative elements */ |
19 |
top: 0; |
20 |
width: 324px; |
21 |
}
|
"नैव-होल्डर की सीमा को दाहिनी ओर (उप-मेनू के लिए) छिपाया जाना चाहिए, बाईं ओर दोगुनी (मुख्य मेनू के लिए) और बाकी के लिए ठोस एक अच्छा और आसान इफ़ेक्ट बनाते हुए लेयर्स की मात्रा को कम करते हुए हम जोड़ना है।"
ठीक है कि काफी आसान था इसलिए आप सभी को पूरा करने के बाद, उम्मीद है कि आपने पहले से ही अपने कौशल-सेट को जोड़ने के लिए कुछ नया सीख लिया है। हालांकि, यह वही है जो आप बना रहे हैं ऐसा दिखना चाहिए। अगर ऐसा नहीं दिखता है, तो कृपया कोड के माध्यम से फिर से देखें और देखें कि क्या आपको कुछ याद आ सकता है ... चिंता मत करो, शायद यह कुछ बहुत छोटा है।
परिसरों: हम्म ... क्या यह आपको अधूरा लग रहा है? हमें इसे पूरी तरह से बुलाए जाने वाले कुछ लेयर्स से ऊपर की जरूरत है ताकि हम केंद्र की इमेज के कुछ हिस्सों को छिपा सकें और एनएवी धारक को अन्य लेयर्स के चारों ओर एक अच्छा गोल इफ़ेक्ट बनाने और इसे बंद करने के लिए ला सकते हैं।
ऐसा करने के लिए जो मैंने अभी उल्लेख किया है, काफी सरल है। हम अधिकतम स्टाइल को कम कोड के लिए दोनों पूर्णांकियों पर लागू कर सकते हैं। चलो एक छोर पर एक अच्छे कर्वे को बनाने के लिए एक तरफ सीमा रेडियस जोड़ते हैं, तो फिर हम wrap1 और wrap5 के बीच पूर्णांक को संरेखित करने के लिए परिणत का उपयोग करेंगे। हमारे बैकग्राउंड का रंग जोड़ना बहुत महत्वपूर्ण है या कुछ भी नहीं दिखाई देगा। हमें इस लेयर को पूरी तरह से स्थान दिया गया है और इसे ठीक से ऊपर की ओर ले जाना है।
.completer1 में इस ट्राइड्रोप शैली के लिए कोई भी प्रदर्शन नहीं होगा I अन्य स्टाइल्स जैसे कि व्हील के रूप में हमने उस भाग को हटा दिया है ताकि वह प्रदर्शन कर सके।
.completer2 में थोड़ा अधिक रोटेशन होता है और हमें इसे फिट करने के लिए थोड़ा नीचे धकेलना पड़ता है।
1 |
|
2 |
.completer, .completer2{ /** absolute elements to hide the border of images **/ |
3 |
-moz-border-radius: 0 120px 0 113px; /* firefox */ |
4 |
-webkit-border-radius: 0 120px 0 113px; /* webkit */ |
5 |
border-radius: 0 120px 0 113px; /* opera */ |
6 |
-moz-transform: rotate(-20deg); /* firefox */ |
7 |
-webkit-transform: rotate(-21deg); /* webkit */ |
8 |
-o-transform: rotate(-20deg); /* opera */ |
9 |
-ms-transform: rotate(-20deg); /* ie9 and future versions */ |
10 |
transform: rotate(-20deg); /* older browsers */ |
11 |
background-color: #121212; |
12 |
background-image: none; |
13 |
background-position: 0 0; |
14 |
background-repeat: repeat; |
15 |
height: 135px; |
16 |
position: absolute; |
17 |
right: -24px; |
18 |
top: -56px; |
19 |
width: 130px; |
20 |
}
|
21 |
|
22 |
.completer{ |
23 |
display:none; |
24 |
}
|
25 |
|
26 |
.completer2{ |
27 |
-moz-transform: rotate(110deg); /* firefox */ |
28 |
-webkit-transform: rotate(111deg); /* webkit */ |
29 |
-o-transform: rotate(110deg); /* opera */ |
30 |
-ms-transform: rotate(110deg); /* ie9 and future versions */ |
31 |
transform: rotate(110deg); /* older browsers */ |
32 |
top: 195px; |
33 |
}
|
आप पूर्णणकर्ताओं को जोड़ते हैं, तो आपके पास ऐसा कुछ होना चाहिए ... फिर भी अगर आप यहां पर जो कुछ भी देखते हैं, तो अपने कोड की जांच करें और देखें कि आपने क्या मिस किया है।
अब हमारे साथ काम करने के लिए layers का एक बड़ा सेट है। वे सभी अच्छी तरह से निहित हैं और चिकनी CSS3 के effects हैं तो हम आगे बढ़ते हैं और इस बच्चे को काम करते हैं!
Step 2: नेविगेशन मेनू आइटम और उप मेनू आइटम
अब हम नेविगेशन लिंक जोड़ना चाहते हैं जो विभिन्न लेयर्स के पीछे दिखते हैं। बाईं ओर (डबल सीमा में) हम मुख्य मेनू आइटम और दाईं ओर (खुली जगह में) चाहते हैं, हम चाहते हैं कि मुख्य आइटम के बाद उप मेनू आइटम दिखाई दें। आप आश्चर्यचकित होंगे कि यह कितना आसान है, इसलिए हम इसे खोदते हैं।
कोड:
मेनू को सक्रिय रखने के लिए एक हॉवर ब्लॉक होता है, जैसा कि आप अपने माउस के साथ व्हील से गुजरते हैं और हम यह सुनिश्चित करना चाहते हैं कि पूरे व्हील को कवर किया जाए, इसलिए IE संगतता के लिए हम 0.01 opacity के साथ एक बैकग्राउंड जोड़ देंगे अन्यथा IE जीत 'टी पहचान है कि तत्व भी वहाँ है।
मार्जिन-बाएं का उपयोग करना: 76px सुनिश्चित करता है कि आपके पास मुख्य मेनू और उप-मेन्यू पर मंडराने के लिए पर्याप्त जगह है और साथ ही किसी भी चीज़ के बिना व्हील को पार कर सकते हैं।
1 |
|
2 |
ul.menuBuild, ul.menuBuild ul { |
3 |
width: 80px; /* sets the size of the menu blocks */ |
4 |
background: rgb(0, 0, 0); |
5 |
/* RGBa with 0.01 opacity */
|
6 |
background: rgba(0, 0, 0, 0.01); /* - a bg-color MUST be included for IE to work properly! */ |
7 |
padding-left: 0px; /* stops the usual indent from ul */ |
8 |
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */ |
9 |
}
|
अब हम प्रत्येक मेनू आइटम से बुलेट अंक निकालना चाहते हैं या [ली]। हम यह भी सुनिश्चित करना चाहते हैं कि वे नैव-होल्डर के रिलेटिव हैं।
आप थोड़े अतिरिक्त स्टाइल के लिए एक सीमा रेडियस जोड़ सकते हैं। हम बैकग्राउंड का एक ठोस रंग बनाते हैं और मेनू आइटम को बाईं ओर ले जाते हैं ताकि वे नैव-होल्डर धारक के किनारों को मुश्किल से छू रहे हों।
पैडिंग, टेक्स्ट इंडेंट और रंग अतिरिक्त स्टाइल के लिए हैं और मेन्यू के लिए फ़ंक्शन करने की आवश्यकता नहीं है।
1 |
|
2 |
ul.menuBuild li { |
3 |
list-style-type: none; /* removes the bullet points */ |
4 |
position: relative; |
5 |
-webkit-border-radius: 0px 20px 20px 0px; /* webkit browsers */ |
6 |
-moz-border-radius: 0px 20px 20px 0px; /* firefox */ |
7 |
border-radius: 0px 20px 20px 0px; /* opera */ |
8 |
background: none repeat scroll 0 0 #464646; |
9 |
height: 14px; |
10 |
left: -177px; |
11 |
padding: 8px; |
12 |
margin: 6px 0 0; |
13 |
width:140px; |
14 |
text-indent:5px; /* How far the text is from the left edge of the menu */ |
15 |
color: #fff; /* sets the default font colour to white */ |
16 |
}
|
अब, उप-मेन्यू में थोड़ा सा ग्रेडिएंट डालें और उसे दाहिने ओर धकेलें और पहले उप-मेन्यू आइटम को टक्कर दें, जो ब्लेड के किनारे तक ही सीमित है।
एक बॉक्स-छाया जोड़ने से हमें उप-मेनू आइटमों के इफ़ेक्ट को प्रभावित करने में मदद मिलेगी, जो कि उनके संबंधित लेयर्स के नीचे हैं।
1 |
|
2 |
ul.menuBuild ul.submenu li{ |
3 |
background: #f2f2f2; /* old browsers */ |
4 |
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */ |
5 |
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */ |
6 |
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/ |
7 |
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/ |
8 |
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */ |
9 |
color:#464646; |
10 |
position:relative; |
11 |
left:296px; /* This is how the menu ends up on the other side of the wheel */ |
12 |
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */ |
13 |
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */ |
14 |
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */ |
15 |
}
|
प्रत्येक उप मेनू आइटम पर मार्जिन लगाए जाने से हमें और अधिक विभाजन मिल जाएगा और प्रत्येक एक अलग लेयर के नीचे होने का इफ़ेक्ट दे देंगे।
आप प्रत्येक आइटम के लिए opacity को जोड़ सकते हैं ताकि इसे ऊपर से बीच तक और नीचे से मध्य तक फीका कर दिया जा सके, जहां मध्य वस्तु में पूर्ण opacity है।
1 |
|
2 |
ul.menuBuild ul.submenu li.first{ |
3 |
margin-left: -12px; |
4 |
opacity: 0.70; |
5 |
}
|
6 |
|
7 |
ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third{ margin-left:-12px; |
8 |
opacity: 0.85; |
9 |
}
|
10 |
|
11 |
ul.menuBuild ul.submenu li.last{ |
12 |
margin-left:55px; |
13 |
opacity: 0.70; |
14 |
}
|
ठीक है, आपने अपना उप-मेनू जोड़ा है लेकिन यह अभी भी किसी भी मुख्य मेनू के बिना दिखाया गया है। इसे ठीक करने के लिए हमें केवल किसी भी प्रदर्शन को [ul] में जोड़ना होगा।
1 |
|
2 |
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */ |
3 |
display: none; /* make child blocks hover without leaving space for them */ |
4 |
top: -169px; |
5 |
position: absolute; |
6 |
right: -86px; |
7 |
color:#565656; |
8 |
width: 160px; |
9 |
-webkit-border-radius: 0 4px 4px 0; /* webkit */ |
10 |
-moz-border-radius: 0 4px 4px 0; /* firefox */ |
11 |
border-radius: 0 4px 4px 0; /* opera */ |
12 |
padding:50px; |
13 |
height: 24px; |
14 |
background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */ |
15 |
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */ |
16 |
}
|
तो अब यह बिल्कुल दिखाई नहीं देता! ठीक है, आगे बढ़ो और इसे मुख्य आइटम के ऊपर प्रदर्शित होने के बाद प्रदर्शित करें। li का उपयोग करके: hover > ul हम यह बता सकते हैं कि जब एक मुख्य मेनू [li] ऊपर रखा गया हो तो हम display:block का उपयोग करके उपयुक्त उप मेनू के लिए [ul] दिखाएंगे।
1 |
|
2 |
ul.menuBuild li:hover > ul { /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */ |
3 |
display: block; /* makes the child block visible - one of the most important declarations */ |
4 |
position:absolute; |
5 |
left:0; |
6 |
width:400px; |
7 |
height:200px; |
8 |
}
|
प्रत्येक मुख्य मेनू आइटम के लिए स्टाइलिंग।
शुद्ध सौंदर्यशास्त्र के लिए हम एक सीमा रेडियस, बॉक्स छाया और बैकग्राउंड जोड़ सकते हैं। ऊंचाई, चौड़ाई, पूर्ण स्थिति और शीर्ष मार्जिन बनाने के लिए क्या आवश्यक है।
शीर्ष मार्जिन हमें पहले मेनू आइटम को नीचे धकेल दिया जाता है जहां हम चाहते हैं, तो हम बाकी आइटम्स को नीचे धकेलने के लिए कम मार्जिन का उपयोग कर सकते हैं।
1 |
|
2 |
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4{ |
3 |
-webkit-border-radius: 20px 0 0 20px; /* webkit */ |
4 |
-moz-border-radius: 20px 0 0 20px; /* firefox */ |
5 |
border-radius: 20px 0 0 20px; /* opera */ |
6 |
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */ |
7 |
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */ |
8 |
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */ |
9 |
background: #F0000F; /* old browsers */ |
10 |
background: -moz-linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /* firefox */ |
11 |
background: -webkit-gradient(linear, left top, right top, color-stop(52%,#F0000F), color-stop(60%,#CC0000), color-stop(84%,#990000), color-stop(84%,#FFF), color-stop(85%,#464646), color-stop(92%,#363636), color-stop(100%,#121212)); /* webkit */ |
12 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0000F', endColorstr='#121212',GradientType=1 ); /* ie */ |
13 |
background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*future CSS3 browsers*/ |
14 |
-pie-background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*IE fix using Pie*/ |
15 |
height: 18px; |
16 |
padding: 8px; |
17 |
position: absolute; |
18 |
margin-top:100px; |
19 |
width:138px; |
20 |
}
|
शेष 3 मेनू आइटम्स के लिए हम उन दोनों के बीच एक रिक्ति और एक मार्जिन को अलग-अलग लेयर्स के खिलाफ टक्कर देने के लिए प्रत्येक के लिए एक शीर्ष हाशिया को जोड़ते हैं।
इसके बाद हमें हर वस्तु में रोटेशन को जोड़ना सुनिश्चित करना है ताकि हम व्हील के चारों ओर मेनू को अच्छी तरह फिट कर सकें।
1 |
|
2 |
ul.menuBuild li#menu2{ |
3 |
-webkit-transform:rotate(-10deg); /* webkit */ |
4 |
-moz-transform:rotate(-10deg); /* firefox */ |
5 |
-o-transform:rotate(-10deg); /* opera */ |
6 |
-ms-transform: rotate(-10deg); /* ie9 and future versions */ |
7 |
transform: rotate(-10deg); /* older browsers */ |
8 |
margin-top: 141px; |
9 |
margin-left:5px; |
10 |
}
|
11 |
|
12 |
ul.menuBuild li#menu3{ |
13 |
-webkit-transform:rotate(-21deg); /* webkit */ |
14 |
-moz-transform:rotate(-21deg); /* firefox */ |
15 |
-o-transform:rotate(-21deg); /* opera */ |
16 |
-ms-transform: rotate(-21deg); /* ie9 and future versions */ |
17 |
transform: rotate(-21deg); /* older browsers */ |
18 |
margin-top: 181px; |
19 |
margin-left:18px; |
20 |
}
|
21 |
|
22 |
ul.menuBuild li#menu4{ |
23 |
-moz-transform: rotate(-32deg); /* firefox */ |
24 |
-ms-transform: rotate(-32deg); /* ie9 and future versions */ |
25 |
transform: rotate(-32deg); /* older browsers */ |
26 |
-webkit-transform: rotate(-32deg); /* webkit */ |
27 |
-o-transform: rotate(-32deg); /* opera */ |
28 |
margin-top: 218px; |
29 |
margin-left:38px; |
30 |
}
|
मुख्य मेनू आइटमों की देखभाल करने के बाद हम मेनू आइटम को व्हील के चारों ओर ले जाने के बजाय उप-मेन्यू के लिए एक ही काम करने जा रहे हैं, हम चाहते हैं कि वे सीधे और नीचे हों। ऐसा करने के लिए हमें प्रत्येक उप-मेनू में रोटेशन जोड़कर मुख्य मेनू के रोटेशन की भरपाई करने की आवश्यकता होती है।
मुख्य मेनू के समान हमें प्रत्येक शीर्ष के बीच की दूरी को बाहर करने के लिए एक शीर्ष हाशिया जोड़ने और प्रत्येक उप-मेनू आइटम को दाईं ओर धक्का देना होगा ताकि वे अपनी संबंधित लेयर्स के करीब हो।
1 |
|
2 |
ul.menuBuild li#menu1 > ul{ |
3 |
margin-top:0; |
4 |
left:20px; |
5 |
}
|
6 |
|
7 |
ul.menuBuild li#menu2 > ul{ |
8 |
-webkit-transform:rotate(10deg); /* webkit */ |
9 |
-moz-transform:rotate(10deg); /* firefox */ |
10 |
-o-transform:rotate(10deg); /* opera */ |
11 |
-ms-transform: rotate(-10deg); /* ie9 and future versions */ |
12 |
transform: rotate(-10deg); /* older browsers */ |
13 |
left: 24px; |
14 |
margin-top: 6px; |
15 |
}
|
16 |
|
17 |
ul.menuBuild li#menu3 > ul{ |
18 |
-webkit-transform:rotate(21deg); /* webkit */ |
19 |
-moz-transform:rotate(21deg); /* firefox */ |
20 |
-o-transform:rotate(21deg); /* opera */ |
21 |
-ms-transform: rotate(-21deg); /* ie9 and future versions */ |
22 |
transform: rotate(-21deg); /* older browsers */ |
23 |
left: 27px; |
24 |
margin-top: 16px; |
25 |
}
|
26 |
|
27 |
ul.menuBuild li#menu4 > ul{ |
28 |
-webkit-transform:rotate(32deg); /* webkit */ |
29 |
-moz-transform:rotate(32deg); /* firefox */ |
30 |
-o-transform:rotate(32deg); /* opera */ |
31 |
-ms-transform: rotate(32deg); /* ie9 and future versions */ |
32 |
transform: rotate(32deg); /* older browsers */ |
33 |
left: 28px; |
34 |
margin-top: 27px; |
35 |
}
|
आखिर में हम कुछ वैकल्पिक स्टाइल जोड़ सकते हैं ताकि फोंट को मोटा और ठोस किया जाए। इससे प्रत्येक आइटम को उपयोगकर्ता के सामने लाया जाएगा, जब वे इसके पीछे हो जाएंगे।
मेनू के लिए इन स्टाइल्स की आवश्यकता नहीं है, लेकिन वे कुछ अच्छे इफ़ेक्ट जोड़ते हैं और उपयोगिता बढ़ा देते हैं।
1 |
|
2 |
ul.menuBuild ul.submenu li a{ |
3 |
color:#464646; /* the color of submenu fonts */ |
4 |
opacity:0.65; /* This blends the font in with the background */ |
5 |
filter:alpha(opacity=65); |
6 |
}
|
7 |
|
8 |
ul.menuBuild ul.submenu li a:hover{ |
9 |
opacity:1.0; /* and this brings the font opacity back to 100% */ |
10 |
filter:alpha(opacity=100) |
11 |
}
|
12 |
|
13 |
ul.menuBuild li a { /* for the main menu links */ |
14 |
color: #FFBE8F; |
15 |
display: block; |
16 |
width: 100%; |
17 |
}
|
18 |
|
19 |
ul.menuBuild li:hover > a { |
20 |
color: #fff; |
21 |
border-left:double 5px #880000; /* the indicator for when an item is hovered over */ |
22 |
} /* do not use display: block; */ |
यदि आप प्रत्येक व्यक्तिगत उप-मेन्यू को और स्टाइल में लिखना चाहते हैं तो आप निम्न कोड का उपयोग कर सकते हैं ...
1 |
|
2 |
.sub1, .sub2, .sub3, .sub4{ |
3 |
}
|
आपके अंतिम भाग को समाप्त करने के बाद, आपको कुछ ऐसा होना चाहिए ... एक बार फिर अगर आपकी तस्वीर नीचे दिखे, तो चिंता न करें, वापस जाएं और अपना कोड जांचें।
क्रेडिट: केंद्र इमेज envato संपत्ति पुस्तकालय से है।
What about IE?
IE के लिए अच्छी तरह से हम एक अलग स्टाइलशीट में CSSPIE का उपयोग कर सकते हैं। मैं इसमें बहुत अधिक नहीं जाऊंगा क्योंकि यह ठीक IE के साथ भी ठीक से प्रदर्शित नहीं होता है। यदि आप एक बेहतर सुधार के बारे में जानते हैं, तो कृपया मुझे टिप्पणियों में बताएं।
व्यवहार का उपयोग करके हम IE को बताने के लिए csspie php फ़ाइल को कॉल कर सकते हैं कि CSS3 के स्टाइल्स का इस्तेमाल करना ठीक है। तो यह है कि यह कैसे काम करेगा ...
1 |
|
2 |
ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third, ul.menuBuild ul.submenu li.last, ul.menuBuild li > ul, ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2 > ul, ul.menuBuild li#menu3 > ul, ul.menuBuild li#menu4 > ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, |
3 |
.completer2{behavior: url(styles/csspie/PIE.php); } /* CSS3 IE fix - Supports 'border-radius', 'box-shadow', 'border-image', -pie-background', liinear-gradients', 'RGBA' */ |
कुछ अन्य IE फिक्स इस तरह चलते हैं ...
1 |
|
2 |
ul.menuBuild ul.submenu li{filter:alpha(opacity=70);} /* IE has too many problems for gradual opacity so we'll just use 70 for all submenus*/ |
3 |
|
4 |
.completer, .completer2{display:none;} /* transform doesn't work properly so we'll just hide the completers */ |
5 |
|
6 |
.nav-holder{ border-bottom-style:none; height:0px;} |
आपने सब कुछ कर लिया!
तो मुझे आशा है कि आप लोग इस ट्यूटोरियल का आनंद लेंगे! याद रखें कि CSS3 का समर्थन सीमित है और यदि आप कभी भी बनाए गए सभी ब्राउज़रों में संगतता चाहते हैं तो इमेजेज और कुछ javascript का उपयोग करने के समान कार्य पूरा करने के अन्य तरीके भी हैं। यदि आप अन्य मेनू स्टाइल्स में एक ट्यूटोरियल चाहते हैं, तो javascript वर्शन का उपयोग कैसे करें या सिर्फ और अधिक बहुत बडिया CSS3 इफेक्ट्स का उपयोग कैसे करें, मुझे टिप्पणियों में बताएं और मैं आपके लिए कुछ व्हिप दूँगा! Leave your comments and questions below;)
धीरज रखो और सीखते रहो और इससे पहले कि आप जानते हों, आप जो कुछ भी करते हैं, उसके लिए आप एक मास्टर होंगे!
