सीएसएस और कोई छवियों के साथ टैब्ड नेविगेशन कैसे बनाएँ

06 में से 01

सीएसएस और कोई छवियों के साथ टैब्ड नेविगेशन कैसे बनाएँ

वेब पृष्ठों पर नेविगेशन एक सूची का एक रूप है, और टैबड नेविगेशन एक क्षैतिज सूची की तरह है। सीएसएस के साथ क्षैतिज टैबड नेविगेशन बनाना काफी आसान है, लेकिन सीएसएस 3 हमें कुछ और टूल्स देता है ताकि उन्हें अच्छे लगने लगे।

यह ट्यूटोरियल आपको एक सीएसएस टैबबड मेनू बनाने के लिए आवश्यक HTML और CSS के माध्यम से ले जाएगा। यह लिंक देखने के लिए उस लिंक पर क्लिक करें।

यह टैबबड मेनू कोई छवियों , बस HTML और CSS 2 और CSS 3 का उपयोग नहीं करता है। इसे अधिक टैब जोड़ने या उनमें टेक्स्ट बदलने के लिए आसानी से संपादित किया जा सकता है।

ब्राउज़र समर्थन

यह टैब मेनू सभी प्रमुख ब्राउज़रों में काम करेगा। इंटरनेट एक्सप्लोरर गोलाकार कोनों को नहीं दिखाएगा, लेकिन अन्यथा, यह फ़ायरफ़ॉक्स, सफारी, ओपेरा और क्रोम जैसे टैब दिखाएगा।

06 में से 02

अपनी मेनू सूची लिखें

सभी नेविगेशन मेनू और टैब वास्तव में सिर्फ एक अनियमित सूची हैं। तो सबसे पहले आप जो करना चाहते हैं वह लिंक की एक अनियमित सूची लिखना है जहां आप अपनी टैब्ड नेविगेशन जाना चाहते हैं।

यह ट्यूटोरियल यह मान रहा है कि आप अपने एचटीएमएल को एक टेक्स्ट एडिटर में लिख रहे हैं और आप जानते हैं कि अपने वेब पेज पर अपने मेनू के लिए एचटीएमएल कहां रखना है।

इस तरह की अपनी अनियंत्रित सूची लिखें:

• वर्ग = "tablist">
  • सीएसएस 3
  • आईडी = "वर्तमान"> टैब
  • के लिये
  • मेनू

  आप देखेंगे कि कोड दो चीजें कहता है: वर्ग = "टैबलेट" और आईडी = "वर्तमान"। पहला आवश्यक है । यदि आप अपनी अनियंत्रित सूची में टैबलेट क्लास नहीं डालते हैं, तो टैब काम नहीं करेंगे। दूसरा वैकल्पिक है। उस पृष्ठ पर id = "current" को जिस भी टैब पर हाइलाइट करना चाहते हैं उसे रखें। मैं आमतौर पर उस पेज को हाइलाइट करने के लिए इसका उपयोग करता हूं, लेकिन आप इसका उपयोग सबसे महत्वपूर्ण टैब को हाइलाइट करने के लिए कर सकते हैं। या आप इसे पूरी तरह से हटा सकते हैं।

06 का 03

अपनी स्टाइल शीट संपादित करना प्रारंभ करें

आप या तो बाहरी स्टाइल शीट या एक आंतरिक स्टाइल शीट का उपयोग कर सकते हैं। नमूना मेनू पृष्ठ दस्तावेज़ के में एक आंतरिक स्टाइल शीट का उपयोग करता है।

सबसे पहले हम खुद को यूएल स्टाइल करेंगे

यह वह जगह है जहां हम क्लास टैबलेट का उपयोग करते हैं। HTML में। यूएल टैग स्टाइल करने की बजाय, जो आपके पृष्ठ पर सभी अनियमित सूचियों को स्टाइल करेगा, आपको केवल यूएल क्लास शैली बनाना चाहिए। tablist तो आपके सीएसएस में पहली प्रविष्टि होना चाहिए:

.tablist {}

मुझे समय से पहले घुंघराले ब्रेस (}) में रखना पसंद है, इसलिए मैं इसे बाद में नहीं भूलता।

जबकि हम टैब मेनू सूची के लिए एक अनॉर्डर्ड सूची टैग का उपयोग कर रहे हैं, लेकिन हम नहीं चाहते कि कोई भी गोलियां या संख्याएं रेंग रही हों। तो आपको जो पहली शैली जोड़नी चाहिए वह है। सूची-शैली: कोई नहीं; यह ब्राउज़र को बताता है कि यह एक सूची है, यह एक पूर्व निर्धारित शैलियों (जैसे गोलियां या संख्या) के साथ एक सूची है।

फिर, आप जिस स्थान को भरना चाहते हैं उससे मेल खाने के लिए अपनी सूची की ऊंचाई निर्धारित कर सकते हैं। मैंने अपनी ऊंचाई के लिए 2em चुना, क्योंकि यह मानक फ़ॉन्ट आकार से दोगुना है, और टैब के पाठ के ऊपर और नीचे आधा एएम देता है। ऊंचाई: 2em; लेकिन आप अपनी चौड़ाई को जो भी आकार चाहते हैं उसे सेट कर सकते हैं। यूएल टैग स्वचालित रूप से चौड़ाई का 100% ले लेंगे, इसलिए जब तक कि आप वर्तमान कंटेनर से छोटे न हों, तो आप चौड़ाई को छोड़ सकते हैं।

अंत में, यदि आपके मास्टर स्टाइल शीट में यूएल और ओएल टैग के लिए प्रीसेट नहीं हैं, तो आप उन्हें अंदर रखना चाहते हैं। इसका मतलब है कि आपको अपने यूएल पर सीमाओं, मार्जिन और पैडिंग को बंद करना चाहिए। गद्दी: 0; मार्जिन: 0; सीमा: कोई नहीं; यदि आपने पहले से ही यूएल टैग रीसेट कर दिया है, तो आप मार्जिन, पैडिंग या सीमा को अपने डिज़ाइन के साथ फिट करने के लिए बदल सकते हैं।

आपका अंतिम। प्रतिष्ठित वर्ग इस तरह दिखना चाहिए:

। कलाकार {सूची-शैली: कोई नहीं; ऊंचाई: 2em; गद्दी: 0; मार्जिन: 0; सीमा: कोई नहीं; }

06 में से 04

एलआई सूची आइटम संपादित करना

एक बार जब आप अपनी अनियंत्रित सूची को स्टाइल कर लेते हैं, तो आपको इसके अंदर LI टैग्स को स्टाइल करने की आवश्यकता होती है। अन्यथा, वे एक मानक सूची की तरह कार्य करेंगे और प्रत्येक टैब को आपके टैब को सही तरीके से रखे बिना अगली पंक्ति में ले जाएगा।

सबसे पहले, अपनी शैली की संपत्ति सेट करें:

.tablist li {}

फिर आप अपने टैब को फ़्लोट करना चाहते हैं ताकि वे क्षैतिज विमान पर लाइन हो जाएं। बाईंओर तैरना;

और टैब के बीच कुछ मार्जिन जोड़ने के लिए मत भूलना, इसलिए वे एक साथ विलय नहीं करते हैं। मार्जिन-सही: 0.13em;

आपकी ली शैलियों को इस तरह दिखना चाहिए:

.tablist ली {फ्लोट: बाएं; मार्जिन-सही: 0.13em; }

06 में से 05

टैब्स बनाना सीएसएस 3 के साथ टैब की तरह दिखता है

इस स्टाइल शीट में भारी भारोत्तोलन करने के लिए, मैं अनियंत्रित सूची के भीतर लिंक को लक्षित कर रहा हूं। ब्राउज़र पहचानते हैं कि लिंक अन्य टैग की तुलना में किसी वेब पेज पर अधिक करते हैं, इसलिए पुराने ब्राउज़र को होवर राज्यों जैसी चीजों का अनुपालन करना आसान होता है यदि आप उन्हें एंकर टैग (लिंक) से जोड़ते हैं। तो पहले अपनी शैली गुण लिखें:

.tablist li a {} .tablist li a: होवर {}

चूंकि इन टैबों को किसी एप्लिकेशन में टैब की तरह कार्य करना चाहिए, आप चाहते हैं कि टैब का पूरा क्षेत्र क्लिक करने योग्य हो, न केवल लिंक किए गए टेक्स्ट पर। ऐसा करने के लिए, आपको ए टैग को अपने सामान्य " इनलाइन " स्थिति से ब्लॉक तत्व में परिवर्तित करना होगा। प्रदर्शन क्षेत्र; (यदि आप अंतर के बारे में अधिक जानने में रुचि रखते हैं, तो ब्लॉक-स्तर बनाम इनलाइन तत्व पढ़ें।)

फिर, अपने टैब को एक दूसरे के साथ सममित करने के लिए मजबूर करने का एक आसान तरीका है, लेकिन पाठ की चौड़ाई फिट करने के लिए अभी भी फ्लेक्स सही और बाएं पैडिंग करना है। मैंने पैडिंग शॉर्टेंड प्रॉपर्टी का उपयोग शीर्ष और नीचे 0 पर सेट करने के लिए किया और दाएं और बाएं 1em तक सेट किया। पैडिंग: 0 1em;

मैंने लिंक रेखांकित को भी हटाने का विकल्प चुना है, ताकि टैब लिंक की तरह कम दिखें। लेकिन अगर आपके दर्शकों को उसमें भ्रमित किया जा सकता है, तो इस लाइन को छोड़ दें। लिंक-सजावट: कोई नहीं;

टैब के चारों ओर एक पतली सीमा डालकर, यह उन्हें टैब की तरह दिखता है। मैंने सीमा के चारों तरफ सीमा पार करने के लिए सीमा शॉर्टेंड संपत्ति का उपयोग किया: 0.06em ठोस # 000; और फिर नीचे से इसे हटाने के लिए सीमा-नीचे की संपत्ति का उपयोग किया। सीमा-नीचे: 0;

फिर मैंने टैब के फ़ॉन्ट, रंग और पृष्ठभूमि रंग में कुछ समायोजन किए। इन्हें अपनी साइट से मेल खाने वाली शैलियों पर सेट करें। फ़ॉन्ट: बोल्ड 0.88em / 2em एरियल, जीनेवा, हेल्वैटिका, सैन्स-सेरिफ़; रंग: # 000; पृष्ठभूमि का रंग: #ccc;

उपरोक्त सभी शैलियों को चयनकर्ता में जाना चाहिए। लीब ए, नियम, ताकि वे सामान्य रूप से एंकर टैग को प्रभावित कर सकें। फिर टैब को और अधिक क्लिक करने योग्य बनाने के लिए, आपको कुछ राज्य नियम जोड़ना चाहिए। कलाकार ली ए: होवर।

जब आप उस पर माउस डालते हैं तो टैब पॉप बनाने के लिए मैं टेक्स्ट और पृष्ठभूमि का रंग बदलना चाहता हूं। पृष्ठभूमि: # 3cf; रंग: #fff;

और मैंने ब्राउज़र में एक और अनुस्मारक शामिल किया कि मैं चाहता हूं कि लिंक रेखांकित न हो। text-decoration: कोई नहीं; एक और आम तरीका है जब आप टैब पर माउस पर अंडरलाइन को वापस चालू करते हैं। यदि आप ऐसा करना चाहते हैं, तो इसे टेक्स्ट-सजावट में बदलें: रेखांकित करें;

लेकिन सीएसएस 3 कहां है?

यदि आप ध्यान दे रहे हैं, तो आपने शायद देखा है कि स्टाइल शीट में उपयोग की जाने वाली कोई सीएसएस 3 शैलियों नहीं है। इंटरनेट एक्सप्लोरर सहित किसी भी आधुनिक ब्राउज़र में काम करने का इसका लाभ है। लेकिन यह टैब को स्क्वायर बॉक्स से ज्यादा कुछ नहीं दिखता है। एक सीनी 3 स्टाइल कॉल सीमा-त्रिज्या (और यह संबंधित ब्राउज़र-विशिष्ट कॉल) जोड़कर आप एक मनीला फ़ोल्डर पर टैब की तरह दिखने के लिए किनारों को गोल कर सकते हैं।

शैलियों को आपको एक शैली में जोड़ना चाहिए जो नियम है: -वेबकिट-सीमा-शीर्ष-दाएं-त्रिज्या: 0.50em; -webkit-बॉर्डर-शीर्ष-बाएं त्रिज्या: 0.50em; -moz-बॉर्डर-त्रिज्या-Topright: 0.50em; -moz-बॉर्डर-त्रिज्या-topleft: 0.50em; बॉर्डर-शीर्ष-दाईं-त्रिज्या: 0.50em; बॉर्डर-शीर्ष-बाएं त्रिज्या: 0.50em;

ये मैंने लिखा अंतिम शैली नियम हैं:

.tablist li एक {प्रदर्शन: ब्लॉक; पैडिंग: 0 1em; text-decoration: कोई नहीं; सीमा: 0.06em ठोस # 000; सीमा-नीचे: 0; फ़ॉन्ट: बोल्ड 0.88em / 2em एरियल, जीनेवा, हेल्वैटिका, सैन्स-सेरिफ़; रंग: # 000; पृष्ठभूमि का रंग: #ccc; / * सीएसएस 3 तत्व * / वेबकिट-सीमा-शीर्ष-दाएं-त्रिज्या: 0.50em; -webkit-बॉर्डर-शीर्ष-बाएं त्रिज्या: 0.50em; -moz-बॉर्डर-त्रिज्या-Topright: 0.50em; -moz-बॉर्डर-त्रिज्या-topleft: 0.50em; बॉर्डर-शीर्ष-दाईं-त्रिज्या: 0.50em; बॉर्डर-शीर्ष-बाएं त्रिज्या: 0.50em; }। कलाकार ली ए: होवर {पृष्ठभूमि: # 3 सीएफ; रंग: #fff; text-decoration: कोई नहीं; }

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

06 में से 06

वर्तमान टैब को हाइलाइट करें

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

मैं #current ए टैग के साथ-साथ # कुरेंट ए: होवर स्टै दोनों की शैली बनाता हूं ताकि दोनों थोड़ा अलग हों। आप उस तत्व के रंग, पृष्ठभूमि रंग, यहां तक ​​कि ऊंचाई, चौड़ाई और पैडिंग भी बदल सकते हैं। अपने डिजाइन में जो कुछ भी बदलाव करते हैं उसे बनाएं।

.tablist li # वर्तमान एक {पृष्ठभूमि रंग: # 777; रंग: # एफएफएफ; } .tablist li # वर्तमान ए: होवर {पृष्ठभूमि: # 3 9 सी; }

और आपने कल लिया! आपने अभी अपनी वेबसाइट के लिए एक टैबड मेनू बनाया है।