हमारा ब्लॉग
लेखन, ज्ञान साझा करना, समाचार ट्यूटोरियल,
लोड हो रहा है ...
कैसे एक अतिव्यापी Tabbed मुख्य मेनू कोड
14 अक्तूबर, 2009 - सुमित करके
मुख्य नेविगेशन मेनू है कि एक वेबसाइट डिजाइन कि पूरी साइट देखने के जीवंत और पूरा का हिस्सा है. लेकिन नेविगेशन मेनू शैली का सबसे आम प्रकार अभी भी एक बहुत tabbed नेविगेशन मेनू इस्तेमाल किया जा रहा है. यहाँ कैसे एक अतिव्यापी tabbed मेनू कोड पर एक ट्यूटोरियल है.
वहाँ एक tabbed नेविगेशन मेनू बनाने के विभिन्न शैलियों और तकनीकों रहे हैं और उनमें से एक tabbed overlaying या छा शैली है जिसमें प्रत्येक टैब पर झूठ बोल दूसरे को हो सकता है और इसलिए पूरे मेनू एक बहुत यथार्थवादी महसूस दे प्रकट होता है. जबकि मेरी साइट डिजाइनिंग, मैं प्रेरणा और tutorials के बहुत के माध्यम से चला गया. उनमें से एक था यह कहा जाता है ट्यूटोरियल से फ़ोटोशॉप कागज बनावट तो स्क्रैच इसके साथ एक grungy वेब डिजाइन बनाएँ! से Collis द्वारा लिखित NetTuts.com यह समाप्त अपनी साइट के लिए मुख्य प्रेरणा जा रहा है और जबकि ट्यूटोरियल के माध्यम से जा रहा मैं Collis पाया कह है कि:
"अब अगर मैं ऐसा कहते हैं कि अपने आप को इन टैब भयानक लग रही है, और कारण है कि वे करते है क्योंकि वे ओवरलैप. दुर्भाग्य से यह भी उन्हें करने के लिए HTML में साथ काम कठिन बना देता है. लेकिन आप पारदर्शी PNGs के साथ चीजों की एक किस्म कर सकते हैं, या एकांतर बस rollovers में पाठ बदलने के लिए रंग बनाने के लिए टैब रंग बदलने के बारे में चिंता करने की ज़रूरत नहीं है और. किसी भी तरह यह इस ट्यूटोरियल के दायरे से परे एक सा है . इतना कहना मेनू एक बिट का निर्माण करने के लिए मुश्किल हो सकता है. "
तो मैं HTML में एक कोडन की कोशिश की और मैं सफल करने के बाद यह आप सभी के साथ साझा करने के बारे में सोचा.
1.Gearing चरण
तो html / सीएसएस कोड में एक tabbed नेविगेशन के इस तरह के कोड शुरू करने से पहले, आप पहली बार जानने के लिए कैसे बनाने के लिए एक फ़ोटोशॉप पहला में है. उपरोक्त ट्यूटोरियल बहुत विस्तृत है और Collis कैसे Photoshop में इस तरह के किसी मेनू का निर्माण करने के लिए शिक्षण में एक महान काम करता है. मैं एक साधारण एक विशेष रूप से इस ट्यूटोरियल के लिए बनाया है.
अब मुझे निर्दिष्ट है कि वहाँ tab.The निष्क्रिय राज्य के तीन राज्यों में भूरा रंग है, सक्रिय राज्य गहरे नीले रंग का है और हॉवर राज्य प्रकाश इस्पात नीला रंग है. इसलिए, प्रत्येक टैब के लिए तीन छवियों टुकड़ा करने की क्रिया के बजाय, हम बाहर एक छवि प्रेत टुकड़ा कर सकते हैं.
चरण 2. PSD से टैब टुकड़ा करने की क्रिया
खड़ी ग्रिड का उपयोग कर के रूप में ऊपर छवि में दिखाया गया है टैब्स संरेखित करें. तुम भी टैब क्षैतिज बजाय खड़ी की तुलना में संरेखित कर सकते हैं लेकिन फिर सीएसएस पृष्ठभूमि छवि एक अलग तरह की स्थिति में पहुँचा जा जाएगा. पसंद के व्यक्ति को दूसरे व्यक्ति के लिए निर्भर करता है लेकिन दोनों काम पूरी तरह से. जबकि फसल छवि दिशा निर्देशों का ठीक से पालन करें और ध्यान दें कि मैं पारदर्शी पृष्ठभूमि बना दिया है क्योंकि हम एक पारदर्शी पृष्ठभूमि की जरूरत हो जाएगा अगर हम टैब्स ओवरलैप की जरूरत है. छवि फसल और यह PNG24 प्रारूप में वेब को बचाने के लिए. एक बिंदु करने के लिए ध्यान दें जबकि छवियों टुकड़ा करने की क्रिया है कि 'होम' टैब यानी प्रथम टैब निष्क्रिय राज्य में अपने बाएँ किनारे पर किसी भी छाया नहीं कर होना चाहिए. इसलिए, कि विशिष्ट टैब के लिए हम में छाया के बिना एक प्रेत बनाने की है.
चरण 3. दूर कोड
अब जब कि हमारे टुकड़ा करने की क्रिया पूरा हो गया है और हम सभी छवियों की जरूरत है हम हमारे नेविगेशन बार कोडिंग शुरू कर सकते हैं. बस उदाहरण अच्छे लग रहे बनाने के लिए, मैं का निर्माण किया है एक नमूना पर छा नेविगेशन पट्टी के साथ सामग्री क्षेत्र लेआउट विशेष रुप से प्रदर्शित. पूरे लेआउट इस तरह दिखता है:
<DOCTYPE html सार्वजनिक "- / / / / DTD XHTML 1.0 संक्रमणकालीन / / EN" डब्ल्यू .3 सी.! "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href="css/styles.css" rel="stylesheet" type="text/css" /> </ सिर> <body> <div id="page-wrap"> <ul id="main-nav"> <li class="current"> <a href="index.html"> होम </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> पोर्टफोलियो </ a> </ li> class="services"> <li <a href="services.html"> सेवा </ a> </ li> हमारे बारे में <li class="about"> <a href="about.html"> </ a> </ li> <li class="contact"> <a href="contact.html"> संपर्क </ a> </ li> </ Ul> class="clear"> <div </ div> <div id="featured"> <div id="featured-content"> </ Div> </ Div> </ Div> </ Body> </ Html>
चलो हमारे मुख्य नेविगेशन मेनू में देखो. मैं किसी भी अन्य नेविगेशन पट्टी के रूप में एक साधारण unordered सूची का इस्तेमाल किया है और यह सूची हाइपरलिंक टैग के लिए एक पृष्ठभूमि छवि का उपयोग स्टाइल.
<ul id="main-nav"> <li class="current"> <a href="index.html"> होम </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> पोर्टफोलियो </ a> </ li> class="services"> <li <a href="services.html"> सेवा </ a> </ li> हमारे बारे में <li class="about"> <a href="about.html"> </ a> </ li> <li class="contact"> <a href="contact.html"> संपर्क </ a> </ li> </ Ul>
उल # मुख्य नव ली { फ्लोट: छोड़ा; स्थिति: रिश्तेदार; प्रदर्शन: इनलाइन; }
याद रखें कि हम जो में सबसे ऊपर टैब सक्रिय राज्य का प्रतिनिधित्व करता है टैब के लिए एक छवि प्रेत का उपयोग कर रहे हैं, मध्य निष्क्रिय राज्य का प्रतिनिधित्व करता है और नीचे मंडराना राज्य का प्रतिनिधित्व करता है. इसलिए, हम ठीक से निम्नानुसार उनके संबंधित राज्य के लिए छवियों जगह 'पृष्ठभूमि स्थिति की संपत्ति का उपयोग करें:
उल # मुख्य नव ली एक { स्थिति: रिश्तेदार; चौड़ाई: 110px; ऊँचाई: 29px; प्रदर्शन: ब्लॉक; पृष्ठभूमि छवि: url ('../ छवियों / 'tabs.png); पृष्ठभूमि स्थिति: केंद्र केंद्र; रंग: 44403b #; पाठ - सजावट: कोई नहीं; फ़ॉन्ट आकार: 14px; पैडिंग - शीर्ष: 12px; पाठ align: left; पैडिंग - बाएँ: 30px; font-वजन: बोल्ड; } उल # मुख्य नव li.home एक { पृष्ठभूमि छवि: url ('../ छवियों / 'टैब home.png); } उल # li.current मुख्य नव { पृष्ठभूमि की स्थिति: शीर्ष; रंग: # FFFFFF; } उल मुख्य नव # ली एक: मंडराना { पृष्ठभूमि - स्थिति: नीचे; रंग: # FFFFFF; } उल मुख्य नव # li.current: मंडराना { पृष्ठभूमि स्थिति: शीर्ष; / * मंडराना पर बदलते रंग से वर्तमान टैब रोकें * / रंग: # FFFFFF; }
आप देखेंगे कि मैं सूची तत्वों के प्रत्येक के लिए एक प्रासंगिक वर्ग और वर्ग टैब है जो वर्तमान पृष्ठ के लिए है 'वर्तमान' नाम दिया है. यह किया जाता है इतना है कि मैं अलग z-सूचकांक मान ऐसी है कि प्रत्येक टैब यह निम्नलिखित टैब की तुलना में एक उच्च z-अक्ष पर स्थित है एक आरोही क्रम में प्रत्येक टैब के लिए असाइन कर सकते हैं. 'वर्तमान' वर्ग के साथ टैब z-अक्ष के सर्वोच्च क्रम पर झूठ है क्योंकि यह वर्तमान पृष्ठ का प्रतिनिधित्व करता है और हमेशा सूची में यह स्थिति के शीर्ष चाहे पर रहेगी. Z-सूचकांक मूल्यों को लागू करने से पहले, सुनिश्चित करें कि सूची तत्व के लिए स्थिति विशेषता सापेक्ष सेट है. किसी भी स्थिति मूल्य के बिना z-सूचकांक संपत्ति सब पर काम नहीं करेगा.
उल # मुख्य नव li.current { z-सूचकांक: 100; } उल मुख्य नव li.home # { z-सूचकांक: 100; } उल li.portfolio # मुख्य नव { z-सूचकांक: 99; } उल # मुख्य नव li.services { z-सूचकांक: 98; } उल # मुख्य नव li.about { z-सूचकांक: 97; } उल # मुख्य - नव li.contact { z-सूचकांक: 96; }
हालांकि हम अलग z-सूचकांक टैब में मान सौंपा है, वे अभी भी आगोश में अधिक नहीं दिखाई देते हैं और इस तरह दिखेगा:
हमारे नेविगेशन पट्टी के लिए परिष्करण छू दे, हम दूसरे के शीर्ष पर प्रत्येक टैब धक्का है. हम बाएँ से दाएँ अवरोही क्रम में z-सूचकांक मान सौंपा है. इसलिए, हम सिर्फ # मुख्य नव ली उल 'एक' नकारात्मक मार्जिन छोड़ दिया 'संपत्ति जोड़कर ठीक से प्रत्येक के बारे में अपनी बाईं ओर 20px शुरू टैब धक्का होगा और पूरे नेविगेशन पट्टी धक्का बाईं सूची unordered एक सकारात्मक 20px 'मार्जिन - बाएँ' को जोड़ने के लिए पट्टी के बाईं ओर वार्ड आंदोलन उठा देना.
उल मुख्य नव # { मार्जिन बाएँ: 20px; } उल # मुख्य नव ली { फ्लोट: छोड़ा; स्थिति: रिश्तेदार; मार्जिन बाएँ: 20px; प्रदर्शन: इनलाइन; }
मिशन पूरा
सभी सीएसएस और XHTML के साथ कोडांतरण के बाद, हम हमारे छा tabbed मुख्य नेविगेशन मेनू उपयोग के लिए तैयार होगा. यह कैसे एक मेनू के इस तरह बनाने के लिए पर मेरी ले जाओ और यकीन है कि वहाँ कई बेहतर तरीके के लिए भी ऐसा ही कर रहे हैं रहा हूँ था. मुझे खुशी होगी यदि आप ऐसा करने का कोई अन्य तरीका साझा या सिर्फ इस प्रक्रिया में ही कुछ सुधार पर चर्चा सकता है.
यहाँ कुछ साइट है जो अपने मुख्य नेविगेशन मेनू के रूप में नजर lapping से अधिक उपयोग कर रहे हैं:
ILove2Design.at
HiddenDepth.ie
HotCards.com
टैग: सीएसएस , कैसे , मेनू , नेविगेशन , आगोश में अधिक
के बारे में लेखक
सुमित कोड दोस्त के संस्थापक है. वह एक वेब डेवलपर के रूप में काम करता है, एक कट्टर प्रोग्रामर, workaholic, मजेदार आदमी है और उसके परिवार को प्यार करता है. उस पर का पालन करें चहचहाना और Facebook.
आप किसी भी प्रतिक्रियाओं के माध्यम से इस प्रविष्टि का पालन कर सकते हैं आरएसएस 2.0 फ़ीड के . तुम एक प्रतिक्रिया छोड़ सकते हैं , या trackback अपनी खुद की साइट से.
ज्ञान साझा करें
अन्य डाक आपको पसंद आ सकते हैं
47 प्रतिक्रियाएँ
Trackbacks और Pingbacks
- kopfkribbeln वेब डिज़ाइन - ब्लॉग »Überlappendes Tabmenü
- मुंहतोड़ पत्रिका - 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक «सामाजिक - प्रेस
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | TipTe.com
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट - तकनीक | Tutorial51
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक »Shai Perednik.com
- 45 शक्तिशाली / सीएसएस जावास्क्रिप्ट - तकनीक | moreInet.com | webdesign, पटाया में ग्राफिक डिजाइन सेवा
- अतिव्यापी टैब | वेब डिजाइन दो
- 45种有用的सीएसएस / जावास्क्रिप्ट技巧| नार्को
- CSSFind
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | DX ब्लॉग
- designfloat.com
- zabox.net
- joyoge.com
- 100 ग्रेट सीएसएस मेनू Tutorials
- JQuery के प्रभाव के साथ 50 सर्वश्रेष्ठ सीएसएस मेनू Tutorials | ज्ञान की दुनिया Desua
- 100 ग्रेट सीएसएस मेनू Tutorials - pocongseXy: कला और Dezign::
- 100 ग्रेट सीएसएस मेनू Tutorials | डिजाइनर मलेशिया
- ई sitesweb »45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक
एक उत्तर दें छोड़ दो
ब्राउज़ करें
- JqTransform और इसके समाधान का उपयोग करने के बाद समस्या 'चुनें' 71 टिप्पणी (s)
- कैसे एक अतिव्यापी Tabbed मुख्य मेनू कोड 47 टिप्पणी (s)
- WP ई - वाणिज्य गोल्ड कार्ट गैलरी बादल ज़ूम के साथ घालमेल 31 टिप्पणी (ओं )
- ग्रुंज खाका 19 टिप्पणी (s)
- iPhone अनुप्रयोग टेम्पलेट 19 टिप्पणी (ओं)
- Listify, एचटीएमएल तत्व कच्चे पाठ में कनवर्ट 17 टिप्पणी (ओं )
- व्यापार खाका 16 टिप्पणी (s)
-
$ ('Select.jqTransformHidden') रहते हैं ('परिवर्तन', समारोह () {var thiz = ($ टी. ..
-
Suppppppppppper .... ट्यूटोरियल एक बहुत बहुत धन्यवाद ...............
-
हाय, मैं एक पंजीकरण फार्म, मैं बनाने के लिए jqtransform प्लगइन का इस्तेमाल किया है ..
-
नमस्ते, क्या आप "OptionGroup का उपयोग करने के लिए एक हल मिल गया है "?...
उत्कृष्ट ट्यूटोरियल और अच्छी तरह से लिखा है. शेयर के लिए धन्यवाद.
आप Pliggs धन्यवाद .. यह एक सम्मान था FaqPal पर ट्यूटोरियल भी पोस्ट
रूस से नमस्ते!
क्या मैं आप के लिए लिंक के साथ अपने ब्लॉग में एक पोस्ट बोली?
हाय अरे भारत से!
आप के रूप में ब्लॉग से एक पोस्ट बोली चाहते हैं? एक विशेष वाक्य, वाक्यांश, या क्या बोली? 
अच्छा ट्यूटोरियल! ... वास्तव में मददगार
मैं एप्पल iphone और Ipod टच के लिए आवेदन करना चाहते हैं. आवेदनों की सभी प्रकार की, लेकिन मैं नहीं जानता कैसे शुरू करने के लिए और कहाँ से शुरू करने के लिए किसी ने मुझे कुछ मदद दे सकते हैं
मैं कैसे iPhone के लिए कार्यक्रम के लिए सीखने में दिलचस्पी रहा हूँ. विंडोज भाषा कि सबसे निकट iPhone प्रोग्रामिंग भाषा जैसा दिखता है क्या होगा. मैं फिर से एक पूरी प्रोग्रामिंग भाषा जानने के बिना दोनों Windows मशीनों और iPhones के लिए लिखने के लिए करना चाहते हैं.
________________
[Url = http://unlockiphone22.com/] अनलॉक iphone url [/]
अच्छी तरह से, यदि आप भाषा की फांसी मिल तो आप किसी भी प्रोग्रामिंग भाषा में कोड कर सकते हैं. सी सभी प्रोग्रामिंग भाषाओं की माँ की तरह है.
चाहते हैं 2 पता है जो वेबसाइट की किताब, या अन्य सामान मैं Adobe Photoshop से एक वेबसाइट डिजाइन करने के लिए उपयोग ... ... अग्रिम में यू का शुक्र है .. plz मुझे मेल अगर यू सकते हैं ..: D
अच्छी तरह से सीखने के डिजाइन के लिए सबसे अच्छा संसाधन इंटरनेट है. यह नवीनतम रुझानों और ट्यूटोरियल के साथ हर मिनट नवीनीकृत हो जाता है.
यहाँ कुछ लिंक कर रहे हैं पाने के लिए आप के साथ शुरू
http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
आप फ़ोटोशॉप का उपयोग कर की मूल बातें कौशल होना चाहिए. अंत क्या वास्तव में मामले में रचनात्मकता के स्तर पर आप है.
हाय, मैं बस का कहना है कि हालांकि यह एक दिलचस्प मेनू है, आप एक कड़ी के रूप में वर्तमान पृष्ठ टैब नहीं होना चाहिए कर सकते हैं. यह एक UX और पहुँच बड़ा कोई नहीं है.
नमस्कार,
कौन सा हिस्सा आप बात कर रहे हैं? मैं सूची तत्व पर वर्तमान पृष्ठ वर्ग नहीं है और लिंक तत्व है.
एस: मैं यह नहीं कर सकते हैं
पता नहीं कैसे
आप कृपया मेरी मदद कर सकते हैं
वह भी png24 है बाहर मेरी स्लाइस नहीं ले करता है
मैं सीएसएस के साथ इतना अच्छा नहीं हूँ, और मैं वास्तव में इस पर छा मेनू चाहते हैं
मैं केवल 2 छवियों का उपयोग करें और के रूप में एक ही नाम दिया तुमने किया
काम नहीं करता, लेकिन
मेरी छवि एक थोड़ा कम लेकिन lil अब
आप कृपया मेरी मदद कर सकते हैं?
क्या आप इसे बनाने के लिए कृपया मुझे?
ठीक है, तो अब मैं फ्लैश में साइट बना रहा हूँ
लेकिन अभी भी नेविगेशन के साथ समस्याओं
मैं इसे कैसे करते माउस दे अधिक + सामने सक्रिय लिंक?
अरे हाय, माफ करना, मैं फ्लैश के साथ बहुत अनुभव नहीं है. लेकिन अगर आप ठीक से ट्यूटोरियल का पालन करें और z-सूचकांक मान ठीक भी मांगे. मुझे नहीं लगता कि आप किसी भी समस्या होगी ...
Wonerful! मैं प्यार कैसे इस ब्लॉग को हमेशा ताजा content.I के साथ अद्यतन किया जाता है मेरे दोस्तों की सदस्यता तीन btw, योग्य बनाया
आप यह कैसे डाउनलोड कर सकता हूँ
यह एक शाश्वत पाश है
माफ करना के लिए असुविधा का कारण बना. लेकिन आप इसे डाउनलोड बटन पर क्लिक करने के बाद डाउनलोड कर सकते हैं. यदि आप की सदस्यता की इच्छा नहीं है, बस पॉप अप विंडो बंद करें और डाउनलोड शुरू होगा.
प्रतिक्रिया हमेशा स्वागत है
बहुत बहुत धन्यवाद. मैं देने के मूल डिजाइन ट्यूटोरियल से नेविगेशन कोडन के बारे में था. यह मुझे एक बहुत मदद की!
मुझे खुशी है कि मैं मदद टॉम के किया जा सकता है
उदाहरण अच्छी तरह से काम करता है और वास्तव में शानदार है देख.
तथापि, यह के रूप में अच्छी तरह से IE6 पर काम नहीं करता पिंग फ़ाइल के रूप में (. Png)
समर्थन वहाँ नहीं है. क्या किसी IE6 के लिए एक workaround है कि
इस उदाहरण के साथ काम करता है?
बढ़िया है, मैं वास्तव में मेनू के इस तरह की तरह, मैं अपने वेब साइट करने के लिए जोड़ा
http://www.ajaxshake.com
धन्यवाद
लुकास पिछले .. ब्लॉग छद्म 3D प्रभाव शुद्ध सीएसएस के साथ
Heya. विस्मयकारी ट्यूटोरियल. मैं बस एक ब्लॉग बनाया है. फिर भी में राज्य डिजाइन. मैं वास्तव में इस बात का उपयोग करने के लिए चाहता हूँ.
लेकिन मैं थोड़े बहुस्तर ड्रॉप - डाउन मेनू के लिए आदी हूँ. क्या यह संभव है करने के लिए इस कोड को संशोधित करने के लिए? इसलिए कि एक बहुस्तर ड्रॉपडाउन मेनू प्राप्त किया जा सकता है?
Thanx और संबंध है.
फीनिक्स पिछले ब्लॉग .. लेकिन फिर न तो पोस्टिंग था
हाँ, आप आसानी से इसे संशोधित कर सकते हैं बहु स्तरीय मेनू जोड़. वहाँ से बाहर किसी भी बहु स्तरीय मेनू ट्यूटोरियल के लिए देखो. असल में, ली तत्व हाइपरलिंक के साथ एक उल तत्व होगा. उल तत्व उप मेनू के रूप में कार्य (ड्रॉप डाउन मेनू)
बस आप सूरज, महान जानकारी की घाटी से एक चिल्लाओ देना चाहता था. बहुत सराहना की.
मैं सिर्फ मुंहतोड़ पत्रिका से इस पार आया था. इस महान ट्यूटोरियल के लिए धन्यवाद.
तुम्हें क्या लगता है मेनू टैब्स की अधिकतम संख्या है कि मैं मेरी वेबसाइट के शीर्ष भर में डाल सकते हैं - मैं वास्तव में से 13 की तरह होता है - यह है कि कई करने के लिए?
Suppppppppppper ... ट्यूटोरियल बहुत बहुत धन्यवाद ... ... ... ...