हमारे ब्लॉग

लेखन, ज्ञान बांटने, समाचार, Tutorials

  • एक वेब डेवलपर के रूप में, क्या आप सबसे अधिक आनंद कोडन?

    Loading ... लोड हो रहा है ...
Overlapping Tabs Tutorial Thumbnail

कोड के लिए कैसे एक मुख्य मेनू Tabbed अतिव्यापी

मुख्य नेविगेशन मेनू एक वेबसाइट डिजाइन कि पूरी साइट बनाता का हिस्सा है कि जीवंत और पूरा देखो. लेकिन नेविगेशन मेनू शैली का सबसे आम प्रकार अभी भी एक बहुत प्रयोग किया जा रहा tabbed नेविगेशन मेनू है. यहाँ कैसे कोड के लिए एक मेनू tabbed अतिव्यापी पर एक ट्यूटोरियल है.

जीना डेमो डाउनलोड

अरे वहाँ!

यह बहुत अच्छा होगा अगर तुम भी हमारे फ़ीड की सदस्यता करेगा ...

वहाँ विभिन्न शैलियों और एक tabbed नेविगेशन मेनू बनाने और उनमें से एक की तकनीकों tabbed overlaying छा या शैली जिसमें प्रत्येक टैब के लिए खत्म हो गया लगता है झूठ बोल रहे हैं और इसलिए अन्य पूरे मेनू एक बहुत यथार्थवादी महसूस दे रही है. जबकि मेरी साइट डिजाइनिंग, मैं प्रेरणा और tutorials के बहुत सारे के माध्यम से चला गया. उनमें से बुलाया गया था इस ट्यूटोरियल बनावट स्क्रैच से पेपर तो यह grungy Photoshop वेब डिजाइन के साथ एक बनाएँ! से Collis द्वारा लिखित NetTuts.com यह समाप्त हो गया साइट प्रेरणा के लिए अपने मुख्य किया जा रहा है और जब तक ट्यूटोरियल के माध्यम से जा रहा है कि मैंने पाया Collis कह:

"अब अगर मैं ऐसा भयानक कहना तो अपने आप ये देखो टैब, और इस कारण वे करते हैं क्योंकि वे ओवरलैप. दुर्भाग्य से यह भी HTML में काम करता है के साथ उन्हें करने के लिए कठिन. आप कर सकते हैं या PNGs, पारदर्शी के साथ बातें करते हैं लेकिन एक किस्म की एकांतर सिर्फ पाठ में rollovers रंग परिवर्तन और रंग टैब के बारे में चिंता नहीं बदलते. किसी भी तरह से इस ट्यूटोरियल के इस दायरे से परे एक सा है सब. कहने के लिए पर्याप्त मेनू बनाने के लिए मुश्किल हो सकता है एक सा. "

तो मैं HTML में एक कोडन और मैं इसे आप सभी के साथ साझा करने के बारे में सोचा सफल होने के बाद की कोशिश की.

ऊपर 1.Gearing कदम

इतना करने के लिए पहले HTML / सीएसएस कोड में एक tabbed नेविगेशन के इस तरह के कोड शुरू, आपको पहले एक बनाने के लिए Photoshop में पहली कैसे सीखना है. ट्यूटोरियल ऊपर बहुत विस्तृत और Collis इस तरह के एक मेनू बनाने के लिए Photoshop में शिक्षण में एक अच्छा काम करता है. मैं इस ट्यूटोरियल के लिए विशेष रूप से एक सरल एक निर्माण किया है.

menu-image

अब मुझे निर्दिष्ट है कि वहाँ tab.The निष्क्रिय राज्य के तीन राज्यों कर रहे हैं रंग में भूरा है, सक्रिय राज्य गहरे नीले और हॉवर राज्य है प्रकाश इस्पात नीला रंग है. इसलिए, बल्कि प्रत्येक टैब के लिए तीन छवियों, हम एक छवि टुकड़ा टुकड़ा करने की क्रिया कर सकते हैं प्रेत से अधिक है.

चरण 2. टुकड़ा करने की क्रिया से टैब्स PSD

tab-sprite

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

no-shadow-sprite

चरण 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-सूचकांक मूल्य टैब्स को सौंपा है, वे अभी भी ऊपर आगोश में प्रकट नहीं करते हैं और इस तरह दिखेगा:

non-overlapped-tabs

हमारे नेविगेशन पट्टी करने के लिए परिष्करण छू दे, हम दूसरे के शीर्ष पर प्रत्येक टैब धक्का है. हम सही करने के लिए बाएँ से अवरोही क्रम में z-सूचकांक मूल्य सौंपा है. इसलिए, हम सिर्फ एक सही से 20px के बारे में एक नकारात्मक मार्जिन 'बाईं जोड़ने संपत्ति' करने के लिए उल # मुख्य नव-li 'और बाईं करने के लिए द्वारा पूरे नेविगेशन पट्टी unordered सूची धक्का द्वारा छोड़ा इसकी शुरुआत टैब धक्का होगा जोड़कर एक सकारात्मक '20px मार्जिन बाईं' करने के लिए पट्टी के बाईं वार्ड आंदोलन उठा देना.

 उल # मुख्य-नव (
	 मार्जिन-left: 20px;
 )
 उल # मुख्य नव-li (
	 फ्लोट: छोड़ा;
	 स्थिति: रिश्तेदार;
	 हाशिया: बाएं 20px;
	 प्रदर्शन: इनलाइन;
 )

मिशन पूरा

सभी सीएसएस और XHTML साथ कोडांतरण के बाद, हम अपने छा होगा मुख्य नेविगेशन मेनू का उपयोग करने के लिए तैयार tabbed. इस पर अपना ले गया एक मेनू के इस प्रकार बनाने के लिए और यकीन है कि वहाँ बहुत बेहतर करने के लिए एक ही तरीके हैं रहा हूँ. मुझे खुशी है कि अगर आप इस या इस प्रक्रिया के स्वयं में कुछ सुधार के बारे में बात कर के किसी अन्य तरीके से साझा किया जा सकता है.
यहाँ कुछ साइट है जो उनके मुख्य नेविगेशन मेनू के रूप में lapping टैब पर उपयोग कर रहे हैं:
ILove2Design.at
HiddenDepth.ie
HotCards.com

टैग: , , , ,

अन्य पदों तुम्हें पसंद कर सकते हैं

34 उत्तर

  1. उत्कृष्ट ट्यूटोरियल और अच्छी तरह से लिखा है. शेयर के लिए धन्यवाद.

  2. रूस से नमस्ते!
    मैं अपने ब्लॉग में आप लिंक के साथ एक पद उद्धृत कर सकते हैं?

  3. ट्यूटोरियल अच्छा! ... वास्तव में उपयोगी है.

  4. मैं एप्पल iPhone और आइपॉड टच के लिए आवेदन करना चाहते हैं. आवेदन के सभी प्रकार, लेकिन मैं नहीं जानता कैसे और शुरू करने के लिए शुरू से किसी ने मुझे कुछ मदद दे सकते हैं जहाँ

  5. मैं कार्यक्रम को कैसे iPhone के लिए सीखने में दिलचस्पी है. क्या विंडोज भाषा है कि सबसे निकट iPhone प्रोग्रामिंग भाषा जुलता होगा. मैं करने के लिए फिर से एक पूरा प्रोग्रामिंग भाषा सीखने के लिए बिना दोनों Windows मशीनों और iPhones के लिए लिखने के लिए चाहेंगे.

    ________________
    [Url = http://unlockiphone22.com/] / url] iphone [अनलॉक

    • वैसे, अगर आप सी भाषा की फांसी तो आप किसी भी प्रोग्रामिंग भाषा में कोड प्राप्त कर सकते हैं. सभी सी प्रोग्रामिंग भाषाओं की माँ की तरह है.

  6. जानना चाहते है जो 2 वेबसाइट, अन्य सामान या पुस्तक के लिए अग्रिम में मैं Adobe Photoshop ... ... धन्यवाद u से एक वेबसाइट .. plz मुझे मेल डिजाइन का उपयोग करना चाहिए अगर यू ..: D सकते हैं

  7. हाय, अभी मैं कर सकते हैं कि हालांकि यह एक दिलचस्प सूची है, तुम एक कड़ी के रूप में वर्तमान पृष्ठ टैब नहीं होना चाहिए. यह एक UX और पहुँच बड़ा कोई नहीं.

    • नमस्कार,
      कौन सा हिस्सा आप की बात कर रहे हैं? मैं इस सूची पर वर्तमान पृष्ठ वर्ग तत्व नहीं है और कड़ी तत्व है.

  8. मैं नहीं आ s: कर सकते हैं
    पता नहीं कैसे :-(

    मुझे तुम्हारी मदद कर सकता हूँ
    वह भी मेरे स्लाइस बाहर नहीं ले करता है png24

    मैं तो सीएसएस के साथ अच्छा नहीं हूँ और मैं वास्तव में इस पर छा मेनू चाहते हैं
    मैं केवल 2 छवियों का उपयोग करें और आप के रूप में एक ही नाम दे दिया था
    लेकिन काम नहीं करता है
    मेरी छवि थोड़ा कम है लेकिन अब lil

    आप मेरी मदद कर सकते हैं?

    तुम मेरे लिए कर सकते हैं?

  9. ठीक है, तो अब मैं फ्लैश में साइट बना रहा हूँ

    लेकिन अभी भी नेविगेशन के साथ समस्याओं
    मैं कैसे यह कर सामने + सक्रिय लिंक पर माउस दे?

    • अरे हाय, क्षमा करें, मैं फ्लैश के साथ ज़्यादा अनुभव नहीं है. लेकिन अगर आप ठीक से ट्यूटोरियल का पालन करें और z-सूचकांक ठीक भी मांगे. मैं तुम्हें कोई समस्या होगी नहीं लगता ... :)

  10. Wonerful! मैं प्यार कैसे इस ब्लॉग को हमेशा ताजा content.I के साथ अद्यतन किया जाता है बनाया है तीन मेरे दोस्तों की सदस्यता btw, lol

  11. आप कैसे इस डाउनलोड करना

    यह एक शाश्वत पाश है

    • असुविधा के लिए खेद है कारण होता है. लेकिन आप इसे डाउनलोड बटन पर क्लिक करने के बाद डाउनलोड कर सकते हैं. यदि आप की सदस्यता के लिए, इच्छा नहीं है तो बस खिड़की के ऊपर पॉप बंद करें और डाउनलोड शुरू होगा.

      आपके सुझाव हमेशा स्वागत किया है :)

  12. बहुत बहुत धन्यवाद. मैं हार ट्यूटोरियल मूल डिजाइन से नेविगेशन कोडन के बारे में था. यह मुझे बहुत मदद की!

Trackbacks और pingbacks

  1. kopfkribbeln Tabmenü webdesign Überlappendes-ब्लॉग »
  2. 45 शक्तिशाली तकनीक सीएसएस / जावास्क्रिप्ट - पत्रिका मुंहतोड़
  3. 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक प्रेस «सामाजिक
  4. 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | TipTe.com
  5. 45 शक्तिशाली तकनीक सीएसएस / जावास्क्रिप्ट | Tutorial51
  6. 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक Perednik.com »Shai
  7. 45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | moreInet.com | Webdesign, सेवा में Pattaya ग्राफिक डिजाइन
  8. अतिव्यापी दो टैब्स | डिजाइन वेब
  9. 45种有用的सीएसएस / जावास्क्रिप्ट技巧| नार्को
  10. CSSFind
  11. 45 DX ब्लॉग शक्तिशाली जावास्क्रिप्ट तकनीकों | सीएसएस /
  12. designfloat.com
  13. zabox.net
  14. joyoge.com

एक उत्तर दें छोड़ दो

CommentLuv Enabled