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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tablist {}

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

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

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

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

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

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

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

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

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

.tablist li {}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

शैलियों को आप जोड़ना चाहिए .tablist ली ए नियम हैं: -webkit-बॉर्डर-शीर्ष-दाईं-त्रिज्या: 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 अनुरूप ब्राउज़र में अच्छे मुद्रित टैब की तरह दिखता है। अगला पृष्ठ आपको एक और विकल्प देता है जिसका उपयोग आप इसे और भी तैयार करने के लिए कर सकते हैं।

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

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

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

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

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