() translation by (you can also view the original English article)
ऑरमैन क्लार्क की कोडित PSD श्रृंखला में अगला उसके अद्भुत दिखते Vertical Navigation Menu है। संभव है कि हम इमेजेज के न्यूनतम मात्रा का उपयोग करते हुए इसे CSS3 और jQuery के साथ पुन: बनाएँ।
केवल उन इमेजेज को हम आइकॉन के लिए उपयोग कर रहे हैं - मैं SpriteRight नामक एक नए उपकरण का उपयोग कर एक स्प्राइट का निर्माण करूँगा, लेकिन यह वैकल्पिक है। इसके अतिरिक्त, मैं अपनी CSS3 के ग्रेडियेंट बनाने के लिए GradientApp का उपयोग कर रहा हूं, लेकिन फिर यह वैकल्पिक है।
Step 1: मूल HTML मार्कअप
आइए कुछ बुनियादी मार्कअप शुरू करें, एक खाली HTML5 डॉक्यूमेंट:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
|
6 |
<title>Vertical Navigation Menu: CSS3 Coded</title> |
7 |
|
8 |
<link rel="stylesheet" href="css/styles.css"> |
9 |
|
10 |
</head>
|
11 |
<body>
|
12 |
|
13 |
</body>
|
14 |
</html>
|
और अब हमारे मेनू के लिए मार्कअप; युक्त आवरण के भीतर एक unordered list।
1 |
<div id="wrapper"> |
2 |
|
3 |
<ul class="menu"> |
4 |
<li class="item1"><a href="#">Friends <span>340</span></a></li> |
5 |
<li class="item2"><a href="#">Videos <span>147</span></a></li> |
6 |
<li class="item3"><a href="#">Galleries <span>340</span></a></li> |
7 |
<li class="item4"><a href="#">Podcasts <span>222</span></a></li> |
8 |
<li class="item5"><a href="#">Robots <span>16</span></a></li> |
9 |
</ul>
|
10 |
|
11 |
</div>
|
अन्त में, हम अपने मौजूदा सूची आइटमों में से प्रत्येक के अंदर स्थित एक unordered list डालकर submenus बनाते हैं।
1 |
<div id="wrapper"> |
2 |
|
3 |
<ul class="menu"> |
4 |
<li class="item1"><a href="#">Friends <span>340</span></a> |
5 |
<ul>
|
6 |
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> |
7 |
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> |
8 |
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> |
9 |
</ul>
|
10 |
</li>
|
11 |
<li class="item2"><a href="#">Videos <span>147</span></a> |
12 |
<ul>
|
13 |
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> |
14 |
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> |
15 |
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> |
16 |
</ul>
|
17 |
</li>
|
18 |
<li class="item3"><a href="#">Galleries <span>340</span></a> |
19 |
<ul>
|
20 |
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> |
21 |
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> |
22 |
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> |
23 |
</ul>
|
24 |
</li>
|
25 |
<li class="item4"><a href="#">Podcasts <span>222</span></a> |
26 |
<ul>
|
27 |
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> |
28 |
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> |
29 |
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> |
30 |
</ul>
|
31 |
</li>
|
32 |
<li class="item5"><a href="#">Robots <span>16</span></a> |
33 |
<ul>
|
34 |
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> |
35 |
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> |
36 |
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> |
37 |
</ul>
|
38 |
</li>
|
39 |
</ul>
|
40 |
|
41 |
</div>
|
ठीक है, वहाँ बहुत सारे लग सकते हैं लेकिन इसे आप को भ्रमित न करें। सबसे पहले हमने पांच सूची आइटमों के साथ एक unordered list बनाई है, प्रत्येक में anchor tag के अंदर। फिर हमने नेस्टेड unordered lists, प्रत्येक तीन सूची आइटमों के साथ जोड़ दी हैं।
मैंने प्रत्येक सूची आइटम के लिए एक class भी जोड़ा है, बस यह स्टाइल को बाद में आसान बना देगा। अंत में, संख्याओं के लिए हमने प्रत्येक anchor tag के अंदर एक span tag बनाया है। यदि आप इसे अपने ब्राउज़र में देखते हैं तो इसे इस तरह दिखना चाहिए:
Step 2: द्रव फ़ॉन्ट्स
हम पहले सुनिश्चित करेंगे कि हमारे मेनू सही ढंग से प्रदर्शित हो। इन नियमों को css/styles.css में जोड़ें, वे हमारे सभी ul s के margin और padding को 0 पर सेट करेंगे, और सूची स्टाइल को हटा दें।
1 |
ul, |
2 |
ul ul { |
3 |
margin: 0; |
4 |
padding: 0; |
5 |
list-style: none; |
6 |
}
|
हमारे मेनू स्टाइल करना शुरू करने से पहले हम एक निश्चित चौड़ाई और 13px के एक font-size (em यूनिट्स में व्यक्त) के साथ एक रेपर बनाएंगे। सबसे पहले हम शरीर को एक नियम जोड़ देंगे, font-size:100% ;। यह सुनिश्चित करेगा कि हमारा स्टाइल ब्राउज़र डिफ़ॉल्ट font-size (आमतौर पर 16px) पर आधारित है।
अब यह समझाने के लिए कि रैपर font-size कैसे कार्य करता है। हमें इसे em के रूप में व्यक्त करना है; अपने पैरेंट के font-size के साइज के आनुपातिक। हम 13px के लिए लक्ष्य कर रहे हैं, इसलिए पैरेंट के साइज को 16px मानते हुए, हमारा परिणामी 13 /16 = 0.8125 है। 13px है 0.8125 * 16px।
यूनिट्स में हमारे फोंट (और अन्य तत्व) को मापने से उन्हें द्रव बना दिया जाएगा। अब अगर हम रैपर फ़ॉन्ट साइज (या हमारे ब्राउज़र डिफ़ॉल्ट साइज) को बदलते हैं तो पूरे मेनू उस बेस के संबंध में समायोजित होगा। यह आपको भ्रमित करने की कोशिश न करें, अगर आपको अपने फोंट को बदलने में मदद की ज़रूरत है तो मेरा सुझाव है कि आप pxtoem.com पर जाएं।
1 |
body { |
2 |
font-size: 100%; |
3 |
}
|
4 |
a { |
5 |
text-decoration: none; |
6 |
}
|
7 |
ul, |
8 |
ul ul { |
9 |
margin: 0; |
10 |
padding: 0; |
11 |
list-style: none; |
12 |
}
|
13 |
#wrapper { |
14 |
width: 220px; |
15 |
margin: 100px auto; |
16 |
font-size: 0.8125em; |
17 |
}
|
हमने आवरण को 220px की एक निश्चित चौड़ाई दी है और इसे मार्जिन जोड़कर कुछ शीर्ष के साथ केंद्रित किया है margin:100px auto;।
Step 3: मुख्य मेनू CSS
आगे हम मेनू के लिए कुछ स्टाइल जोड़ देंगे। हम मेनू ul auto की चौड़ाई और ऊंचाई बनाते हैं, फिर पूरी चीज़ की छाया लागू करें। ऊंचाई को ऑटो के रूप में जोड़कर, स्लाइडर खुलने पर छाया एडजस्ट हो जाएगी।
फिर एंकर टैग; हम 100% की चौड़ाई जोड़ देंगे जिसका मतलब है कि वे आवरण के 220px चौड़ाई तक फैले होंगे। ऊंचाई के लिए हम ems का उपयोग करेंगे, तो हमारे मुख्य फ़ॉन्ट-आकार 13px के बारे में सोचें। हमारा.psd 36px की ऊंचाई दर्शाता है, इसलिए हमारा लक्ष्य है। हम 36 ले लेंगे और इसे 13 से विभाजित करेंगे जो लगभग 2.75em (36 / 13 = 2.76923077) के लिए बाहर आता है। हम रेखा की ऊंचाई (सभी टेक्स्ट को लंबवत केन्द्रित करने के लिए) के लिए 2.75em का भी इस्तेमाल करेंगे, फिर टेक्स्ट को पुश करने के लिए कुछ टेक्स्ट-इंडेंट लागू करें, बाद में हमारे आइकन के लिए जगह बनाये।
हम बैकग्राउंड के लिए एक CSS3 के ग्रेडिएंट को जोड़ देंगे, मैंने आगे बढ़कर GradientApp के साथ इसे बनाया था। इसके बाद हम फ़ॉन्ट को बदल देंगे, हम एक टेक्स्ट छाया के साथ Helvetica Neue font और एक सफ़ेद रंग लागू करेंगे। ध्यान दें कि हमने यहां एक फ़ॉन्ट-साइज का उपयोग नहीं किया था। ऐसा इसलिए है क्योंकि हमारे बेस फ़ॉन्ट 13px के आवरण के लिए है जो हमारे एंकर को विरासत में मिला है, इसलिए इसे इसमें जोड़ने की कोई आवश्यकता नहीं है।
1 |
body { |
2 |
font-size: 100%; |
3 |
}
|
4 |
a { |
5 |
text-decoration: none; |
6 |
}
|
7 |
ul, |
8 |
ul ul { |
9 |
margin: 0; |
10 |
padding: 0; |
11 |
list-style: none; |
12 |
}
|
13 |
#wrapper { |
14 |
width: 220px; |
15 |
margin: 100px auto; |
16 |
font-size: 0.8125em; |
17 |
}
|
18 |
.menu { |
19 |
width: auto; |
20 |
height: auto; |
21 |
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); |
22 |
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); |
23 |
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); |
24 |
}
|
25 |
.menu > li > a { |
26 |
background-color: #616975; |
27 |
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); |
28 |
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); |
29 |
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); |
30 |
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); |
31 |
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); |
32 |
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); |
33 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); |
34 |
border-bottom: 1px solid #33373d; |
35 |
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98; |
36 |
-moz-box-shadow: inset 0px 1px 0px 0px #878e98; |
37 |
box-shadow: inset 0px 1px 0px 0px #878e98; |
38 |
width: 100%; |
39 |
height: 2.75em; |
40 |
line-height: 2.75em; |
41 |
text-indent: 2.75em; |
42 |
display: block; |
43 |
position: relative; |
44 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
45 |
font-weight: 600; |
46 |
color: #fff; |
47 |
text-shadow: 0px 1px 0px rgba(0,0,0,.5); |
48 |
}
|
ठीक है! अब यह बेहतर दिखना शुरू कर रहा है और हमें कुछ संरचना भी मिल रही है! लेकिन कैसे हम एक बैकग्राउंड रंग जोड़ते हैं, ताकि मेनू बेहतर तरीके से खड़ा होगा ..
1 |
body { |
2 |
background:#32373d; |
3 |
}
|
टिप: EMs याद रखना
ऊपर CSS से आप देख सकते हैं कि यह भूलना आसान है कि आपकी यूनिट्स का वास्तव में क्या अर्थ है। आपके मूल गणना की टिप्पणियां छोड़ना एक अच्छा विचार है, ताकि जब आप भविष्य में अपने कोड पर वापस आएं, तो आप अभी भी जो भी हो रहा है उसका पता चल सकता है। सूत्र को याद रखें: desired px / parent px = resultant em और अनुमानित प्रतीक (≈) का उपयोग करें यदि आप परिणाम को गोल कर रहे हैं।
1 |
#wrapper { |
2 |
font-size: 0.8125em; /* 13/16 = 0.8125*/ |
3 |
}
|
4 |
|
5 |
.menu > li > a { |
6 |
height: 2.75em; /* 36/13 ≈ 2.75*/ |
7 |
line-height: 2.75em; /* 36/13 ≈ 2.75*/ |
8 |
text-indent: 2.75em; /* 36/13 ≈ 2.75*/ |
9 |
}
|
Step 4: सबमेनु CSS
सफेद सबमेनु के लिए कुछ CSS जोड़ने का समय। हमें कुछ ग्रे सीमाओं के साथ एक सफेद बैकग्राउंड जोड़ने की आवश्यकता होगी। आखिरी बार के लिए नोटिस में इसकी कोई सीमा नहीं है, इसलिए हम उसे इसे हटाने के लिए :last-child भाषण चयनकर्ता के साथ लक्षित करेंगे। इसमें एक गहरे नीले रंग का बॉर्डर है, इसलिए हम भूरे रंग को हटा दें, नीले रंग का एक जोड़ दें।
अगला कदम पिछले के समान होगा; हम ऊंचाई और चौड़ाई को फिर से जोड़ देंगे, हम बैकग्राउंड को सफेद रंग में बदल देंगे। इस बार हमें फॉण्ट-साइज बदलने की आवश्यकता है। हम 12px के लिए लक्ष्य कर रहे हैं, ताकि desired px / parent px = resultant em हमारे परिणाम की गणना कर सकें हम उन्हें 0.923em।
चलिए टेक्स्ट रंग को ग्रे में भी बदलते हैं। ध्यान दें हमने display:block। अगर हम float:left का इस्तेमाल करते हैं मेनू छोड़कर आसानी से चेतन नहीं होता, इसलिए हम डिस्प्ले ब्लॉक का इस्तेमाल करते हैं ताकि उन्हें अच्छी और आसानी से स्थानांतरित किया जा सके। आप यह भी देखेंगे कि हमने एक अतिरिक्त स्टाइल जोड़ दी है; हम इसे sub-ul के आखिरी चाइल्ड के लिए आवेदन कर रहे हैं। हमें ऐसा करने की आवश्यकता है ताकि हम सीमा रंग को बदल सकें।
1 |
.menu ul li a { |
2 |
background: #fff; |
3 |
border-bottom: 1px solid #efeff0; |
4 |
width: 100%; |
5 |
height: 2.75em; |
6 |
line-height: 2.75em; |
7 |
text-indent: 2.75em; |
8 |
display: block; |
9 |
position: relative; |
10 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
11 |
font-size: 0.923em; |
12 |
font-weight: 400; |
13 |
color: #878d95; |
14 |
}
|
15 |
.menu ul li:last-child a { |
16 |
border-bottom: 1px solid #33373d; |
17 |
}
|
अब यह वाकई अच्छा दिखना शुरू कर रहा है!
Step 5: होवर और सक्रिय स्टाइलिंग
हम अब कुछ हॉवर और सक्रिय स्टाइलिंग को जोड़ देंगे, विशेष रूप से जब एॉर्डियनियन खुले हैं! हम सक्रिय मेनू में एक सीमा नीचे भी जोड़ देंगे। अब अगर आप सोच रहे हैं, "हमने एक सक्रिय class क्यों नहीं जोड़ी?" अच्छी तरह से मेरे दोस्त, यह है कि jQuery के बाद में क्या हो रहा है।
1 |
.menu > li > a:hover, |
2 |
.menu > li > a.active { |
3 |
background-color: #35afe3; |
4 |
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219))); |
5 |
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); |
6 |
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); |
7 |
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); |
8 |
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); |
9 |
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); |
10 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); |
11 |
border-bottom: 1px solid #103c56; |
12 |
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; |
13 |
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; |
14 |
box-shadow: inset 0px 1px 0px 0px #6ad2ef; |
15 |
}
|
16 |
.menu > li > a.active { |
17 |
border-bottom: 1px solid #1a638f; |
18 |
}
|
Step 6: मुख्य मेनू प्रतीक
हम छद्म से :before आइकन का उपयोग करके जोड़ देंगे। पहले हम सभी sub-ul एंकर टैग को लक्षित करेंगे, हम बैकग्राउंड स्प्राइट को लागू करेंगे और इसे दोहराने के लिए नहीं सेट करेंगे। हम इसे 36px का फॉण्ट-साइज देंगे, हालांकि कोई टेक्स्ट नहीं है; हम 36px का उपयोग करेंगे ताकि हम 1 के चौड़ाई और ऊंचाई का उपयोग कर सकें जो अब 36px के बराबर होगा। तब हम तत्व को 50% नीचे धकेल देंगे और इसे बीच में ऊपर से 5 सेंटीमीटर से हटा दें।
प्रत्येक sub-ul सूची आइटम के लिए classes का उपयोग करके, हम उन्हें लक्षित करेंगे और उन्हें स्प्राइट के लिए उचित बैकग्राउंड की स्थिति देंगे।
नोट: मै स्प्राइट के साथ बेला बनाना चाहता हूँ, तो मैंने स्प्राइटराइट नामक नये ऐप का उपयोग करके इस स्प्राइट को बनाया है, मैंने स्रोत फ़ाइलों में इमेजेज और प्रोजेक्ट फ़ाइलों को शामिल किया है।
1 |
.menu > li > a:before { |
2 |
content: ''; |
3 |
background-image: url(../images/sprite.png); |
4 |
background-repeat: no-repeat; |
5 |
font-size: 36px; |
6 |
height: 1em; |
7 |
width: 1em; |
8 |
position: absolute; |
9 |
left: 0; |
10 |
top: 50%; |
11 |
margin: -.5em 0 0 0; |
12 |
}
|
13 |
.item1 > a:before { |
14 |
background-position: 0 0; |
15 |
}
|
16 |
.item2 > a:before { |
17 |
background-position: -38px 0; |
18 |
}
|
19 |
.item3 > a:before { |
20 |
background-position: 0 -38px; |
21 |
}
|
22 |
.item4 > a:before { |
23 |
background-position: -38px -38px; |
24 |
}
|
25 |
.item5 > a:before { |
26 |
background-position: -76px 0; |
27 |
}
|
Step 7: मुख्य मेनू नंबर
ठीक है, उन स्पेन्स को याद रखें जो हमने जोड़ा? ये नंबर बनाएंगे!
सबसे पहले हम 11px का एक फ़ॉन्ट-आकार जोड़ देंगे (जो मोटे तौर पर 0.857em में परिवर्तित होता है)। हम उन्हें पूरी तरह से स्थान देंगे, और उन्हें दाहिनी ओर से 1 em तक धक्का देंगे, एक बार फिर - इस तरल पदार्थ को बनाने के लिए। हम इसे ऊपर से 50% नीचे धक्का देंगे और मार्जिन-टॉप को केंद्र से निकाल देंगे। एक बैकग्राउंड कुछ बॉक्स छाया, एक इंसेट और एक के साथ जोड़ दिया जाएगा।
एक बार फिर यह द्रव बनाने के लिए, हम चौड़ाई और ऊंचाई बनाने के लिए padding का उपयोग करेंगे। हमने सीमा radius पर ems का इस्तेमाल भी किया है; हमें इसकी आवश्यकता होगी क्योंकि अगर टेक्स्ट को बड़ा किया जाता है तो वे असंगत दिखाई देंगे। जब होवेरिंग या एक सक्रिय class को लिंक पर लागू किया जाता है तो मैंने एक और स्टाइल भी जोड़ दी है।
1 |
.menu > li > a span { |
2 |
font-size: 0.857em; |
3 |
display: inline-block; |
4 |
position: absolute; |
5 |
right: 1em; |
6 |
top: 50%; |
7 |
background: #48515c; |
8 |
line-height: 1em; |
9 |
height: 1em; |
10 |
padding: .4em .6em; |
11 |
margin: -.8em 0 0 0; |
12 |
color: #fff; |
13 |
text-indent: 0; |
14 |
text-align: center; |
15 |
-webkit-border-radius: .769em; |
16 |
-moz-border-radius: .769em; |
17 |
border-radius: .769em; |
18 |
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); |
19 |
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); |
20 |
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); |
21 |
text-shadow: 0px 1px 0px rgba(0,0,0,.5); |
22 |
font-weight: 500; |
23 |
}
|
24 |
.menu > li > a:hover span, .menu > li a.active span { |
25 |
background: #2173a1; |
26 |
}
|
Step 8: सबमेनु अंक और एरो
यह प्रक्रिया पिछले स्टेप के समान होगी, इसलिए मैं ज्यादा विस्तार में नहीं जाऊंगा। यहां मुख्य अंतर हैं कि मैंने बैकग्राउंड का रंग हटा दिया है, सीमा बदल दी है और फ़ॉन्ट रंग बदल दिया है। हमें उस एरो को भी जोड़ना होगा और एक बार फिर से दुबला होगा: psuedo से :before। हम एक चौड़ाई और ऊंचाई को परिभाषित करते हैं और यह सुनिश्चित करने के लिए कि यह द्रव है, ems का उपयोग करते हुए कुछ बाएं पोजीशनिंग को जोड़ते हैं।
अन्त में, एक हॉवर स्टेट (उन टिप्पणियों के लिए धन्यवाद जिन्होंने अपनी प्रारंभिक अनुपस्थिति को बताया)। हम केवल एक गहरे रंग (#32373D) एंकर टेक्स्ट सूडो एरो और अवधि के भीतर संख्या को लागू करते हैं।
1 |
.menu ul > li > a span { |
2 |
font-size: 0.857em; |
3 |
display: inline-block; |
4 |
position: absolute; |
5 |
right: 1em; |
6 |
top: 50%; / |
7 |
background: #fff; |
8 |
border: 1px solid #d0d0d3; |
9 |
line-height: 1em; |
10 |
height: 1em; |
11 |
padding: .4em .7em; |
12 |
margin: -.9em 0 0 0; |
13 |
color: #878d95; |
14 |
text-indent: 0; |
15 |
text-align: center; |
16 |
-webkit-border-radius: .769em; |
17 |
-moz-border-radius: 769em; |
18 |
border-radius: 769em; |
19 |
text-shadow: 0px 0px 0px rgba(255,255,255,.01)); |
20 |
}
|
21 |
.menu > li > ul li a:before { |
22 |
content: '▶'; |
23 |
font-size: 8px; |
24 |
color: #bcbcbf; |
25 |
position: absolute; |
26 |
width: 1em; |
27 |
height: 1em; |
28 |
top: 0; |
29 |
left: -2.7em; |
30 |
}
|
31 |
|
32 |
.menu > li > ul li:hover a, |
33 |
.menu > li > ul li:hover a span, |
34 |
.menu > li > ul li:hover a:before { |
35 |
color: #32373D; |
36 |
}
|
तो यह अब बहुत अच्छा लग रहा है सही है? मुझे लगता है कि हम इस समय कुछ कार्यक्षमता जोड़ चुके हैं!
Step 9: jQuery का समय
क्या आप यहाँ पाने के लिए इंतजार कर रहे हैं ?! ठीक है हम अंत में jQuery के बिंदु पर हैं। हमें पहली बार Google द्वारा होस्ट किए गए एक का उपयोग करके, jQuery पुस्तकालय से लिंक करना होगा। वर्तमान नवीनतम अनुवाद 1.7.1 है। अपने HTML पृष्ठ के मुख्य भाग में निम्नलिखित को जोड़ें:
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
अब समापन </body> टैग से पहले अपने html डॉक्यूमेंट के निचले हिस्से में निम्नलिखित को जोड़ें। चिंता मत करो अगर यह भ्रामक दिखता है, तो मैं इसे एक मिनट में समझाऊंगा।
1 |
<script type="text/javascript"> |
2 |
$(function() {
|
3 |
|
4 |
var menu_ul = $('.menu > li > ul'),
|
5 |
menu_a = $('.menu > li > a');
|
6 |
|
7 |
menu_ul.hide(); |
8 |
|
9 |
menu_a.click(function(e) {
|
10 |
e.preventDefault(); |
11 |
if(!$(this).hasClass('active')) {
|
12 |
menu_a.removeClass('active');
|
13 |
menu_ul.filter(':visible').slideUp('normal');
|
14 |
$(this).addClass('active').next().stop(true,true).slideDown('normal');
|
15 |
} else {
|
16 |
$(this).removeClass('active');
|
17 |
$(this).next().stop(true,true).slideUp('normal');
|
18 |
} |
19 |
}); |
20 |
|
21 |
}); |
22 |
</script> |
1 |
var menu_ul = $('.menu > li > ul'),
|
2 |
menu_a = $('.menu > li > a');
|
पहले हम सबमेनु और मुख्य मेनू एंकर टैग को दो अलग-अलग वेरिएबल्स में संग्रहीत कर रहे हैं, यह केवल बाद में उन्हें संदर्भित करना आसान बनाता है।
1 |
|
2 |
menu_ul.hide(); |
यह पेज लोड होने पर सभी सबमेनु छुपाएगा।
1 |
|
2 |
menu_a.click(function(e) {
|
सबसे पहले हम इसे कुछ करने के लिए कहेंगे जब हम एक मुख्य मेनू के एंकर टैग पर क्लिक करेंगे।
1 |
|
2 |
e.preventDefault(); |
यहां हम एंकर टैग को किसी भी लिंक का पालन करने या एड्रेस बार में पता बदलने से रोक रहे हैं। जैसे अगर आपने कभी '#' की एक लिंक के साथ एक एंकर टैग बनाया है, जब आप इसे क्लिक करते हैं, तो यह अब एड्रेस बार में दिखाई नहीं देगा। एंकर टैग मूलतः अक्षम हैं।
1 |
|
2 |
if(!$(this).hasClass('active')) {
|
3 |
menu_a.removeClass('active');
|
अब हम यह निर्देश देंगे कि यदि menu_a class 'सक्रिय' है, तो इसे हटा दें।
1 |
|
2 |
menu_ul.filter(':visible').slideUp('normal');
|
यहां हम '.filter' और '.visible' का उपयोग करते हैं यदि एक मेनू खुले है, तो उसे सामान्य की गति के साथ स्लाइड करें।
1 |
|
2 |
$(this).addClass('active').next().stop(true,true).slideDown('normal');
|
यदि मेनू बंद है, तो class 'active' जोड़ें (ताकि हम अच्छी CSS स्टाइल तक पहुंच सकें) और सामान्य की गति के साथ इसे नीचे स्लाइड करें।
1 |
|
2 |
} else {
|
3 |
$(this).removeClass('active');
|
4 |
$(this).next().stop(true,true).slideUp('normal');
|
अब, हमें हमारे सशर्त बयान के भाग के रूप में एक ELSE का उपयोग करने की आवश्यकता होगी। इसलिए, ELSE class को सक्रिय करता है, और इसे छुपाने के लिए मेनू को स्लाइड करें। यह सिर्फ इसलिए है कि पेज को पुनः लोड किए बिना हम किसी भी मेनू को कोड कर सकते हैं।
नोट: यदि आप स्लाइड की गति को बदलना चाहते हैं, तो सामान्य रूप से परिवर्तन करें, e.g. '500'। यह 500 मिलीसेकेंड पर स्लाइड करेगा।
यदि आप स्क्रैच से jQuery सीखने में दिलचस्पी रखते हैं, तो आपको अच्छी तरह से सलाह दी जानी चाहिए कि Learn jQuery in 30 Days का कोर्स ट्यूट्सप्लस डॉट कॉम से निःशुल्क सीखें।
निष्कर्ष
खैर हमने इसे अंत तक बनाया! हमने CSS3 और jQuery का इस्तेमाल करते हुए ऑर्मन के सुंदर वर्टीकल नेविगेशन मेनू को कोडित किया है! लक्ष्य को छद्म चयनकर्ता के साथ केवल CSS3 के साथ कैसे बना सकता है, इस पर एक त्वरित टिप के लिए बने रहें:
#wrapper {width: 440px; font-size: 1em} मुझे आशा है कि आपने इस ट्यूटोरियल का आनंद लिया होगा, पढ़ने के लिए धन्यवाद!
