हमारे ब्लॉग

लेखन, साझा ज्ञान, समाचार, Tutorials

एक वेब डेवलपर के रूप में, क्या आपको सबसे कोडन मज़ा आता है?
- XHTML
- PHP
- सीएसएस
- जावास्क्रिप्ट (jQuery तरह पुस्तकालयों शामिल हैं, Moo उपकरण आदि)
- अन्य
देखें परिणाम
लोड हो रहा है ...

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

, 14 अक्तूबर 2009 - सुमित तक

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

लाइव डेमो डाउनलोड

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

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

तो मैं एक में कोडिंग करने की कोशिश की और यह सफल html मैं तुम सब के साथ साझा करने के बारे में सोचा के बाद.

ऊपर 1.Gearing कदम

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

अब मुझे निर्दिष्ट करें कि 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" /> <CSS कड़ी href =" / styles.css "रिलायंस एनर्जी stylesheet =" "प्रकार पाठ =" / सीएसएस "/> </ सिर> <body> <div id="page-wrap"> <ul id="main-nav"> <ली वर्ग =" "मौजूदा> <a href="index.html"> मुख पृष्ठ </ a> </ ली> <li class="portfolio"> <a href="portfolio.html"> पोर्टफोलियो </ a> </ ली> < ली वर्ग = "सेवाओं"> <a href="services.html"> सेवा </ a> </ ली> <li <a class="about"> href="about.html"> हमारे बारे में </ a> </> <li <a class="contact"> ली href="contact.html"> संपर्क करें </ a> ली </> उल </> <div class="clear"> </> div <div id "= विशेषताओं"> <div id="featured-content"> </ div> </ div> </ div> </ body> html </>

हमारे मुख्य नेविगेशन मेनू को देखो देता है. मैं किसी अन्य नेविगेशन पट्टी के रूप में एक सरल unordered सूची का इस्तेमाल किया है और स्टाइल यह है की सूची हाइपरलिंक टैग के लिए एक पृष्ठभूमि छवि का उपयोग कर.

 <ul id="main-nav">
	 <li <a class="current"> href="index.html"> मुख पृष्ठ </ a> <लि />
	 <li <a class="portfolio"> href="portfolio.html"> पोर्टफोलियो </ a> <लि />
	 <li <a class="services"> href="services.html"> सेवा </ a> <लि />
	 <li class="about"> हमारे बारे में <a href="about.html"> </ a> <लि />
	 <li <a class="contact"> href="contact.html"> संपर्क करें </ a> <लि />
 <उल />

 उल # मुख्य एनएवी ली (
	 फ्लोट: छोड़ा;
	 स्थिति: रिश्तेदार,
	 प्रदर्शन: इनलाइन;
 )

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

 उल # मुख्य एनएवी ली एक (
	 स्थिति: रिश्तेदार,
	 width: 110px;
	 ऊँचाई: 29px;
	 प्रदर्शन: ब्लॉक;
	 पृष्ठभूमि छवि: url ('../ images / tabs.png ');
	 पृष्ठभूमि-स्थिति: केंद्र केंद्र;
	 रंग # 44403b:;
	 पाठ सजावट: कोई नहीं;
	 font-size: 14px;
	 padding-टॉप: 12px;
	 पाठ बाएँ संरेखित करें:;
	 padding-छोड़ दिया 30px:;
	 font-weight: bold;
 )
 उल # मुख्य एनएवी li.home एक (
	 छवियाँ पृष्ठभूमि छवि: url ('../ / टैब home.png ');
 )
 उल # मुख्य एनएवी li.current एक (
	 पृष्ठभूमि-स्थिति: शीर्ष;
	 रंग: # ffffff;
 )
 उल # मुख्य एनएवी एक ली: hover (
	 पृष्ठभूमि-स्थिति: नीचे;
	 रंग: # 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:;
 )
 उल # मुख्य एनएवी ली (
	 फ्लोट: छोड़ा;
	 स्थिति: रिश्तेदार,
	 मार्जिन-left: 20px-;
	 प्रदर्शन: इनलाइन;
 )

मिशन पूरा

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

टैग: सीएसएस, कैसे, मेनू, नेविगेशन, पर आगोश में

इस प्रविष्टि बुधवार, अक्तूबर 14, 2009 1:09 पर पर तैनात है और ब्लॉग के तहत दायर किया गया है Tutorials,. तुम आरएसएस 2.0 फ़ीड के माध्यम से इस प्रविष्टि के लिए किसी भी प्रतिक्रियाओं का पालन कर सकते हैं. आप अपनी साइट से एक प्रतिक्रिया, या Trackback छोड़ कर सकते हैं .

प्रतिक्रिया

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

उत्तर []
सुमित चावला उत्तर दें:
10:01 पर अक्टूबर, 17 2009 हूँ
तुम Pliggs .. धन्यवाद यह एक सम्मान की बात FaqPal पर ट्यूटोरियल भी पोस्ट किया गया
उत्तर []
Polprav

अक्टूबर 17
रूस से नमस्ते!
मैं अपने ब्लॉग में एक के बाद आप लिंक के साथ उद्धृत कर सकते हैं?
उत्तर []
सुमित चावला उत्तर दें:
12:21 पर अक्टूबर, 18 2009 हूँ
हे भारत से हाय! तुम में से एक ब्लॉग पोस्ट उद्धृत करना चाहते हैं? एक विशेष वाक्य, वाक्यांश या बोली क्या है?
उत्तर []
राकेश
अक्टूबर 20
अच्छा! ट्यूटोरियल .... सच में मददगार
उत्तर []
knoli
अक्टूबर 25
मैं Apple IPhone और आइपॉड टच के लिए आवेदन करना चाहते हैं. आवेदन के सभी प्रकार की, लेकिन मुझे पता है न और कैसे शुरू करने के लिए, जहाँ किसी ने मुझसे कुछ दे सकता हूँ मदद से शुरू करने के लिए

उत्तर []
kopfkribbeln webdesign-»Überlappendes Tabmenü ब्लॉग
अक्टूबर 29
Lässt [...]. Eine sehr häufiger कला der वेबसाइट-Navigation पहली दास टैब Navigation मीनू. Hier पहली ईआईऍन ट्यूटोरियल कितने आदमी ईआईऍन überlappendes Tabmenü [...]
knoli
नवम्बर 21
मैं iPhone के लिए कैसे प्रोग्राम को सीखने में दिलचस्पी है. विंडोज भाषा है कि सबसे अधिक निकट iPhone प्रोग्रामिंग भाषा जैसा दिखता है क्या होगा. मैं फिर से बिना दोनों Windows मशीनों और iPhones के लिए लिखने की तरह एक पूरे प्रोग्रामिंग भाषा सीखना होगा.
________________
url [= http://unlockiphone22.com/] iphone url [/ अनलॉक]
उत्तर []
सुमित चावला उत्तर दें:
नवम्बर 21, 2009 7:42 पर हूँ
अच्छा, अगर तुम भाषा सी रखता है तो आप किसी भी प्रोग्रामिंग भाषा में कोड कर सकते हैं. सी सभी प्रोग्रामिंग भाषाओं की माँ की तरह है.
उत्तर []
संतोष Pingale
दिसम्बर 22
2 चाहता हूँ पता है जो वेबसाइट, अन्य सामान मैं Adobe Photoshop से एक वेबसाइट ... अग्रिम ... धन्यवाद u डिजाइन .. plz मुझे अगर u कर सकते हैं .. मेल: डी का उपयोग करना चाहिए या पुस्तक
उत्तर []
सुमित चावला उत्तर दें:
दिसम्बर 23, 2009 11:28 पर हूँ
ठीक है, डिजाइनिंग सीखने के लिए सबसे अच्छा स्रोत इंटरनेट है. यह नवीनतम रुझानों और ट्यूटोरियल के साथ हर पल अद्यतन किया जाता है.
यहाँ कुछ लिंक आपको मिल रहे हैं के साथ शुरू
http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
तुम फ़ोटोशॉप का उपयोग कर की मूल बातें कौशल होना चाहिए. अंत में क्या वास्तव में मामले रचनात्मकता के स्तर पर आपके पास है.
उत्तर []
45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक - क्या बात पत्रिका
जनवरी 13
[...] त्रिकोण सभी CSS द्वारा लिखित. आप आसानी से सीएसएस में रंग बदल फ़ाइल और यह कोड को free.How के लिए इस्तेमाल एक अतिव्यापी Tabbed मुख्य MenuMain नेविगेशन मेनू एक वेबसाइट डिजाइन कि पूरे स्थल है का वह हिस्सा है और जीवंत देख सकते हैं [...]
45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक «सामाजिक प्रेस
जनवरी 13
[...] कोड कैसे एक अतिव्यापी Tabbed मुख्य मेन्यू मुख्य नेविगेशन मेनू एक वेबसाइट डिजाइन कि पूरे स्थल है का वह हिस्सा है जीवंत और पूरा देखो. पर नेविगेशन मेनू शैली का सबसे आम प्रकार अभी भी बहुत कुछ किया जा रहा है tabbed नेविगेशन मेनू है. यहाँ कैसे एक tabbed अतिव्यापी मेनू कोड पर एक ट्यूटोरियल है. [...]
45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | TipTe.com
जनवरी 14
[...] कोड कैसे एक अतिव्यापी Tabbed मुख्य MenuMain नेविगेशन मेनू एक वेबसाइट डिजाइन कि पूरे स्थल है का वह हिस्सा है जीवंत और पूरा देखो. पर नेविगेशन मेनू शैली का सबसे आम प्रकार अभी भी बहुत कुछ किया जा रहा है tabbed नेविगेशन मेनू है. यहाँ कैसे एक tabbed अतिव्यापी मेनू कोड पर एक ट्यूटोरियल है. [...]
45 शक्तिशाली सीएसएस / जावास्क्रिप्ट तकनीक | Tutorial51
जनवरी 14
[...] कोड कैसे एक अतिव्यापी Tabbed मुख्य MenuMain नेविगेशन मेनू एक वेबसाइट डिजाइन कि पूरे स्थल है का वह हिस्सा है जीवंत और पूरा देखो. पर नेविगेशन मेनू शैली का सबसे आम प्रकार अभी भी बहुत कुछ किया जा रहा है tabbed नेविगेशन मेनू है. यहाँ कैसे एक tabbed अतिव्यापी मेनू कोड पर एक ट्यूटोरियल है. [...]
LeGars
जनवरी 14
हाय, मैं कह सकता हूँ कि हालांकि यह एक दिलचस्प मेनू है, तो आप वर्तमान पृष्ठ टैब एक कड़ी के रूप में नहीं होनी चाहिए. यह एक UX और पहुंच है बड़ा कोई नहीं.
उत्तर []
सुमित चावला उत्तर दें:
14 जनवरी 2010 में 3:13
हैलो,
कौन सा हिस्सा आप की बात कर रहे हैं? मैं सूची तत्व पर मौजूदा पृष्ठ वर्ग और नहीं लिंक तत्व है.
उत्तर []
डीन
जनवरी 26
एस मैं यह नहीं कर सकते हैं:
कैसे पता नहीं
आप कृपया मेरी मदद करो
वह यह भी है png24 मेरे स्लाइस नहीं ले करता है
मैं सीएसएस के साथ अच्छा नहीं रहा हूँ तो और मैं इस चीजों पर छा मेनू चाहता हूँ
मैं केवल 2 छवियों का उपयोग करें और एक ही नाम के रूप में तुमने दिया
लेकिन काम नहीं करता
मेरी छवि को थोड़ा कम है, लेकिन अब lil है
क्या आप मेरी मदद कर सकता हूँ?
कृपया आप इसे मेरे लिए कर सकते हैं?
उत्तर []
डीन
जनवरी 30
ठीक है, तो अब मैं फ़्लैश में साइट बना रहा हूँ
लेकिन नेविगेशन के साथ अभी भी समस्याओं
कैसे मैं इस पर दे माउस + सामने सक्रिय लिंक?
उत्तर []
सुमित चावला उत्तर दें:
फ़रवरी 8, 2010 10:39 पर हूँ
अरे, हाय, माफ करना, मैं फ्लैश के साथ इतना अनुभव नहीं है. लेकिन अगर आप ट्यूटोरियल ठीक से पालन करें और मांगे Z-सूचकांक ठीक से भी महत्व देता है. मुझे नहीं लगता कि आप किसी भी समस्या होगी ...
उत्तर []