हमारे ब्लॉग
लेखन, ज्ञान बांटने, समाचार, Tutorials
लोड हो रहा है ...
कोड के लिए कैसे एक मुख्य मेनू Tabbed अतिव्यापी
14 अक्टूबर 2009 सुमित से -
मुख्य नेविगेशन मेनू एक वेबसाइट डिजाइन कि पूरी साइट बनाता का हिस्सा है कि जीवंत और पूरा देखो. लेकिन नेविगेशन मेनू शैली का सबसे आम प्रकार अभी भी एक बहुत प्रयोग किया जा रहा tabbed नेविगेशन मेनू है. यहाँ कैसे कोड के लिए एक मेनू tabbed अतिव्यापी पर एक ट्यूटोरियल है.
वहाँ विभिन्न शैलियों और एक tabbed नेविगेशन मेनू बनाने और उनमें से एक की तकनीकों tabbed overlaying छा या शैली जिसमें प्रत्येक टैब के लिए खत्म हो गया लगता है झूठ बोल रहे हैं और इसलिए अन्य पूरे मेनू एक बहुत यथार्थवादी महसूस दे रही है. जबकि मेरी साइट डिजाइनिंग, मैं प्रेरणा और tutorials के बहुत सारे के माध्यम से चला गया. उनमें से बुलाया गया था इस ट्यूटोरियल बनावट स्क्रैच से पेपर तो यह grungy Photoshop वेब डिजाइन के साथ एक बनाएँ! से Collis द्वारा लिखित NetTuts.com यह समाप्त हो गया साइट प्रेरणा के लिए अपने मुख्य किया जा रहा है और जब तक ट्यूटोरियल के माध्यम से जा रहा है कि मैंने पाया Collis कह:
"अब अगर मैं ऐसा भयानक कहना तो अपने आप ये देखो टैब, और इस कारण वे करते हैं क्योंकि वे ओवरलैप. दुर्भाग्य से यह भी HTML में काम करता है के साथ उन्हें करने के लिए कठिन. आप कर सकते हैं या PNGs, पारदर्शी के साथ बातें करते हैं लेकिन एक किस्म की एकांतर सिर्फ पाठ में rollovers रंग परिवर्तन और रंग टैब के बारे में चिंता नहीं बदलते. किसी भी तरह से इस ट्यूटोरियल के इस दायरे से परे एक सा है सब. कहने के लिए पर्याप्त मेनू बनाने के लिए मुश्किल हो सकता है एक सा. "
तो मैं HTML में एक कोडन और मैं इसे आप सभी के साथ साझा करने के बारे में सोचा सफल होने के बाद की कोशिश की.
ऊपर 1.Gearing कदम
इतना करने के लिए पहले HTML / सीएसएस कोड में एक tabbed नेविगेशन के इस तरह के कोड शुरू, आपको पहले एक बनाने के लिए Photoshop में पहली कैसे सीखना है. ट्यूटोरियल ऊपर बहुत विस्तृत और Collis इस तरह के एक मेनू बनाने के लिए Photoshop में शिक्षण में एक अच्छा काम करता है. मैं इस ट्यूटोरियल के लिए विशेष रूप से एक सरल एक निर्माण किया है.
अब मुझे निर्दिष्ट है कि वहाँ tab.The निष्क्रिय राज्य के तीन राज्यों कर रहे हैं रंग में भूरा है, सक्रिय राज्य गहरे नीले और हॉवर राज्य है प्रकाश इस्पात नीला रंग है. इसलिए, बल्कि प्रत्येक टैब के लिए तीन छवियों, हम एक छवि टुकड़ा टुकड़ा करने की क्रिया कर सकते हैं प्रेत से अधिक है.
चरण 2. टुकड़ा करने की क्रिया से टैब्स PSD
संरेखित खड़ी ग्रिड का उपयोग टैब के रूप में ऊपर छवि में दिखाया गया है. आप भी पंक्ति क्षैतिज पट्टियों से खड़ी बल्कि सकता है, लेकिन फिर सीएसएस स्थिति पृष्ठभूमि छवि एक अलग तरीके से पहुँचा जा जाएगा. पसंद व्यक्ति पर निर्भर करता है व्यक्ति के लिए लेकिन दोनों पूरी तरह से काम करते हैं. जबकि छवि फसल ठीक दिशा निर्देशों का पालन करें और ध्यान दें कि मैं पारदर्शी पृष्ठभूमि बना दिया है क्योंकि हम एक पारदर्शी पृष्ठभूमि की जरूरत होगी अगर हम जरूरत टैब ओवरलैप. फसल छवि और यह PNG24 प्रारूप में वेब के लिए बचाने के लिए. एक और बात करते समय छवियों टुकड़ा करने की क्रिया ध्यान दें करने के लिए कि पहले टैब यानी 'होम' टैब अपने निष्क्रिय अवस्था में बाएँ किनारे पर कोई छाया नहीं होने चाहिए. इसलिए, यह है कि विशिष्ट टैब हम इसे में एक और प्रेत के साये के बिना बनाने के लिए किया है.
चरण 3. कोड दूर
अब जब कि हमारे टुकड़ा करने की क्रिया पूरी हो चुकी है और हम सभी छवियों हम अपने नेविगेशन पट्टी कोडन शुरू कर सकते हैं की जरूरत है. बस के उदाहरण बनाने के लिए अच्छा देखो, मैं एक नमूना निर्माण किया छा नेविगेशन पट्टी के साथ सामग्री क्षेत्र लेआउट छपा. पूरे लेआउट इस तरह दिखता है:
<DOCTYPE HTML सार्वजनिक है! "- / / W3C / / DTD XHTML 1.0 संक्रमणकालीन / / EN" 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> < <li class="services"> <a href="services.html"> सेवा </ a> / li> < <li हमारे बारे में </ a> </ li> class="about"> <a href="about.html"> <li class="contact"> <a href="contact.html"> संपर्क करें </ a> / li> < </ Ul> <div class="clear"> </ 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> < <li class="services"> <a href="services.html"> सेवा </ a> / li> < <li हमारे बारे में </ a> </ li> class="about"> <a href="about.html"> <li class="contact"> <a href="contact.html"> संपर्क करें </ a> / li> < </ Ul>
उल # मुख्य नव-li ( फ्लोट: छोड़ा; स्थिति: रिश्तेदार; प्रदर्शन: इनलाइन; )
याद रखें कि हम टैब्स सबसे ऊपर जो टैब में सक्रिय राज्य का प्रतिनिधित्व करता है के लिए एक छवि का उपयोग कर रहे प्रेत, मध्य निष्क्रिय राज्य का प्रतिनिधित्व करता है और नीचे हॉवर राज्य का प्रतिनिधित्व करता है. इस प्रकार इसलिए, हम 'पृष्ठभूमि' की स्थिति संपत्ति का उपयोग करने के लिए ठीक से अपने संबंधित राज्य के लिए छवियों के रूप में जगह जाएगा:
उल # मुख्य-li एक नव ( स्थिति: रिश्तेदार; चौड़ाई: 110px; 29px: ऊंचाई; प्रदर्शन: ब्लॉक; पृष्ठभूमि छवि:) url ('../ images / tabs.png '; पृष्ठभूमि स्थिति: केंद्र केंद्र; 44403b #: रंग; पाठ सजावट: कोई नहीं; font-14px आकार:; पैडिंग टॉप: 12px; पाठ: छोड़ा पंक्ति; padding-left: 30px; font-वजन: साहसिक; ) उल # मुख्य-नव li.home एक ( पृष्ठभूमि छवि: url ('../ images / टैब home.png '); ) उल # मुख्य-नव li.current एक ( पृष्ठभूमि: स्थिति शीर्ष; रंग: # FFFFFF; ) उल # मुख्य नव-li मंडराना: एक ( पृष्ठभूमि स्थिति: नीचे; रंग: # 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 के बारे में एक नकारात्मक मार्जिन 'बाईं जोड़ने संपत्ति' करने के लिए उल # मुख्य नव-li 'और बाईं करने के लिए द्वारा पूरे नेविगेशन पट्टी unordered सूची धक्का द्वारा छोड़ा इसकी शुरुआत टैब धक्का होगा जोड़कर एक सकारात्मक '20px मार्जिन बाईं' करने के लिए पट्टी के बाईं वार्ड आंदोलन उठा देना.
उल # मुख्य-नव ( मार्जिन-left: 20px; ) उल # मुख्य नव-li ( फ्लोट: छोड़ा; स्थिति: रिश्तेदार; हाशिया: बाएं 20px; प्रदर्शन: इनलाइन; )
मिशन पूरा
सभी सीएसएस और XHTML साथ कोडांतरण के बाद, हम अपने छा होगा मुख्य नेविगेशन मेनू का उपयोग करने के लिए तैयार tabbed. इस पर अपना ले गया एक मेनू के इस प्रकार बनाने के लिए और यकीन है कि वहाँ बहुत बेहतर करने के लिए एक ही तरीके हैं रहा हूँ. मुझे खुशी है कि अगर आप इस या इस प्रक्रिया के स्वयं में कुछ सुधार के बारे में बात कर के किसी अन्य तरीके से साझा किया जा सकता है.
यहाँ कुछ साइट है जो उनके मुख्य नेविगेशन मेनू के रूप में lapping टैब पर उपयोग कर रहे हैं:
ILove2Design.at
HiddenDepth.ie
HotCards.com
टैग: सीएसएस , कैसे करने के लिए , मेनू , नेविगेशन , पर आगोश में
के बारे में लेखक
सुमित दोस्त-कोड में से एक है संस्थापक. वह एक वेब डेवलपर के रूप में काम करता है, एक कट्टर प्रोग्रामर, workaholic, मज़ा लड़का है और उसके परिवार के प्यार करता है. पर का पालन करें उसे चहचहाना और Facebook.
आप के माध्यम से इस प्रविष्टि के लिए किसी भी प्रतिक्रियाओं का पालन कर सकते हैं आरएसएस 2.0 फ़ीड कर सकते हैं. तुम एक प्रतिक्रिया छोड़ दें , या trackback अपनी खुद की साइट से.
ज्ञान साझा करें
अन्य पदों तुम्हें पसंद कर सकते हैं
34 उत्तर
Trackbacks और pingbacks
- kopfkribbeln Tabmenü webdesign Überlappendes-ब्लॉग »
- 45 शक्तिशाली तकनीक सीएसएस / जावास्क्रिप्ट - पत्रिका मुंहतोड़
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक प्रेस «सामाजिक
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | TipTe.com
- 45 शक्तिशाली तकनीक सीएसएस / जावास्क्रिप्ट | Tutorial51
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक Perednik.com »Shai
- 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | moreInet.com | Webdesign, सेवा में Pattaya ग्राफिक डिजाइन
- अतिव्यापी दो टैब्स | डिजाइन वेब
- 45种有用的सीएसएस / जावास्क्रिप्ट技巧| नार्को
- CSSFind
- 45 DX ब्लॉग शक्तिशाली जावास्क्रिप्ट तकनीकों | सीएसएस /
- designfloat.com
- zabox.net
- joyoge.com
एक उत्तर दें छोड़ दो
ब्राउज़ करें
- मेनू करने के लिए कैसे कोड एक अतिव्यापी Tabbed मुख्य 34 टिप्पणी (ओं)
- 'के बाद समस्या का उपयोग चुनें' jqTransform और उसके समाधान में 34 टिप्पणी (ओं)
- सीएसएस का उपयोग स्पाइस ऊपर आपके चहचहाना फ़ीड बॉक्स प्रदर्शित 13 टिप्पणी (ओं)
- निजी सहायक कम्प्यूटर 8 टिप्पणी (ओं)
- व्यापार खाका 6 टिप्पणी (ओं)
- ऑरेंज 4 टिप्पणी (ओं)
- प्यार की गर्मी में 3 टिप्पणी (ओं)
-
हाय, मैं .. इस प्रयास में डालने के लिए एक सच में आधुनिक उपयोगी - धन्यवाद है
-
मैं एक ही समस्या है, सिवाय इसके कि मैं विकल्प मान नहीं है, वें की जरूरत है ...
-
आप क्यों नहीं बुलाया वर्ग बना सकता हूँ 'छिपाने' जो 'के एक प्रदर्शन है: एन ..
-
हाय, मैं jqtransform जिसमें वहाँ .. एस के बहुत सारे हैं के साथ एक फार्म बनाने हूँ
उत्कृष्ट ट्यूटोरियल और अच्छी तरह से लिखा है. शेयर के लिए धन्यवाद.
शुक्र है कि तुम .. Pliggs यह एक FaqPal पर ट्यूटोरियल पोस्ट सम्मान भी
रूस से नमस्ते!
मैं अपने ब्लॉग में आप लिंक के साथ एक पद उद्धृत कर सकते हैं?
हे भारत से हाय!
आप के रूप में ब्लॉग से एक पोस्ट बोली करना चाहते हैं? एक विशेष वाक्य, वाक्यांश या बोली क्या है? 
ट्यूटोरियल अच्छा! ... वास्तव में उपयोगी है.
मैं एप्पल iPhone और आइपॉड टच के लिए आवेदन करना चाहते हैं. आवेदन के सभी प्रकार, लेकिन मैं नहीं जानता कैसे और शुरू करने के लिए शुरू से किसी ने मुझे कुछ मदद दे सकते हैं जहाँ
मैं कार्यक्रम को कैसे iPhone के लिए सीखने में दिलचस्पी है. क्या विंडोज भाषा है कि सबसे निकट iPhone प्रोग्रामिंग भाषा जुलता होगा. मैं करने के लिए फिर से एक पूरा प्रोग्रामिंग भाषा सीखने के लिए बिना दोनों Windows मशीनों और iPhones के लिए लिखने के लिए चाहेंगे.
________________
[Url = http://unlockiphone22.com/] / url] iphone [अनलॉक
वैसे, अगर आप सी भाषा की फांसी तो आप किसी भी प्रोग्रामिंग भाषा में कोड प्राप्त कर सकते हैं. सभी सी प्रोग्रामिंग भाषाओं की माँ की तरह है.
जानना चाहते है जो 2 वेबसाइट, अन्य सामान या पुस्तक के लिए अग्रिम में मैं Adobe Photoshop ... ... धन्यवाद u से एक वेबसाइट .. 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 और पहुँच बड़ा कोई नहीं.
नमस्कार,
कौन सा हिस्सा आप की बात कर रहे हैं? मैं इस सूची पर वर्तमान पृष्ठ वर्ग तत्व नहीं है और कड़ी तत्व है.
मैं नहीं आ s: कर सकते हैं
पता नहीं कैसे
मुझे तुम्हारी मदद कर सकता हूँ
वह भी मेरे स्लाइस बाहर नहीं ले करता है png24
मैं तो सीएसएस के साथ अच्छा नहीं हूँ और मैं वास्तव में इस पर छा मेनू चाहते हैं
मैं केवल 2 छवियों का उपयोग करें और आप के रूप में एक ही नाम दे दिया था
लेकिन काम नहीं करता है
मेरी छवि थोड़ा कम है लेकिन अब lil
आप मेरी मदद कर सकते हैं?
तुम मेरे लिए कर सकते हैं?
ठीक है, तो अब मैं फ्लैश में साइट बना रहा हूँ
लेकिन अभी भी नेविगेशन के साथ समस्याओं
मैं कैसे यह कर सामने + सक्रिय लिंक पर माउस दे?
अरे हाय, क्षमा करें, मैं फ्लैश के साथ ज़्यादा अनुभव नहीं है. लेकिन अगर आप ठीक से ट्यूटोरियल का पालन करें और z-सूचकांक ठीक भी मांगे. मैं तुम्हें कोई समस्या होगी नहीं लगता ...
Wonerful! मैं प्यार कैसे इस ब्लॉग को हमेशा ताजा content.I के साथ अद्यतन किया जाता है बनाया है तीन मेरे दोस्तों की सदस्यता btw, lol
आप कैसे इस डाउनलोड करना
यह एक शाश्वत पाश है
असुविधा के लिए खेद है कारण होता है. लेकिन आप इसे डाउनलोड बटन पर क्लिक करने के बाद डाउनलोड कर सकते हैं. यदि आप की सदस्यता के लिए, इच्छा नहीं है तो बस खिड़की के ऊपर पॉप बंद करें और डाउनलोड शुरू होगा.
आपके सुझाव हमेशा स्वागत किया है
बहुत बहुत धन्यवाद. मैं हार ट्यूटोरियल मूल डिजाइन से नेविगेशन कोडन के बारे में था. यह मुझे बहुत मदद की!
खुशी है कि मैं मदद की जा सकती है टॉम