50+ अच्छा साफ सीएसएस टैब आधारित नेविगेशन लिपियों

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

अच्छी तरह से डिज़ाइन किया गया नेविगेशन टैब न केवल उपयोगकर्ताओं को यह जानने में मदद करता है कि कहां जाना है, बल्कि आपकी वेबसाइट या ब्लॉग के आंतरिक पृष्ठों पर ट्रैफ़िक चलाना भी महत्वपूर्ण है.

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

बूटस्ट्रैप-टैब-x - बूटस्ट्रैप टैब के शीर्ष पर बनाया गया एक विस्तारित टैब प्लगइन। यह टैब को संरेखित करें, शीर्षक को घुमाएं, AJAX के माध्यम से सामग्री लोड करें, और कई और अधिक सुविधाएँ। [डेमो]

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

बद गप्पी - टैबी आपको सरल टॉगल टैब बनाने देता है, जो वीडियो सहित किसी भी सामग्री को दिखा सकता है। यह विभिन्न प्रदान करता है उन्नत विकल्प और एनपीएम और बोवर का समर्थन करता है भी। [डेमो]

उत्तरदायी Tabbed नेविगेशन - जेएस और सीएसएस द्वारा समर्थित एक आधुनिक, आसान टैब्ड नेविगेशन, जिसे मोबाइल-प्रथम को ध्यान में रखकर बनाया गया है क्षैतिज और साथ ही ऊर्ध्वाधर स्थिति शैलियों का समर्थन करता है. [डेमो]

Toggler - टॉगलर एक शुद्ध जावास्क्रिप्ट प्लगइन है जिसमें टॉगल-सक्षम तत्व शामिल हैं समझौते और टैब. इसके अलावा, आप पृष्ठ पर किसी भी आइटम को दिखा / छिपा सकते हैं। [डेमो]

शुद्ध सीएसएस टैब्स - ए सीएसएस और जेएस का उपयोग करके सरल टैब स्निपेट बनाया गया. हालांकि उदाहरण कोड सादे टैब दिखाता है लेकिन आप सीएसएस का उपयोग करके अपनी स्टाइल को बदलकर टैब को सुशोभित कर सकते हैं। [डेमो]

टैबी सीएसएस - टैब जैसी सरल टॉगल घटक बनाने के लिए एक सीएसएस-ओनली लाइब्रेरी। यह पुस्तकालय, ऊपर के कुछ के विपरीत, किसी भी निर्भरता की आवश्यकता नहीं है - यहां तक ​​कि कोई भी जेएस कोड भी नहीं। [डेमो]

Tabbis.js - Tabbis एक सरल अभी तक उन्नत प्लगइन है। इसके उन्नत कॉन्फ़िगरेशन विकल्पों का उपयोग करके, आप कर सकते हैं नेस्टेड टैब बनाएं और कॉलबैक को परिभाषित करें भी। [डेमो]

उत्तरदायी शुद्ध सीएसएस टैब्स [डेमो]

सीएसएस टैब्स [डेमो]

पित्या का उपयोग करते हुए टैब - पिटया का उपयोग करने वाले टैब आपको बनाने में मदद करते हैं एनिमेटेड संक्रमण टैब आसानी से. हालाँकि, आपको पिटाई को शामिल करना चाहिए, जो अपने आप में एक पुस्तकालय है और लोड समय को बढ़ाता है। [डेमो]

jTabs - jTabs शुद्ध टैब का उपयोग करके निर्मित एक टैब लाइब्रेरी है। इसका मतलब है कि यह के साथ बनाया गया है jQuery जैसी कोई बाहरी निर्भरता नहीं और कुछ विन्यास विकल्पों का भी समर्थन करता है। [डेमो]

उत्तरदायी Flexbox टैब [डेमो]

टैब अकॉर्डियन [डेमो]

tabs.js - tabs.js एक शुद्ध जावास्क्रिप्ट टैब लाइब्रेरी है, जो Bourbon Refills के Accordion / Tabs से प्रेरित है। यह ऐसा है कि उत्तरदायी है छोटे पर्दे पर टैक्सेज में परिवर्तन होते हैं. [डेमो]

WellTabber - WellTabber टैबी की तरह एक और सरल जावास्क्रिप्ट प्लगइन है। बाद की तरह, यह टैब को कॉन्फ़िगर करने के लिए विभिन्न विकल्पों का समर्थन करता है. इसके अलावा, आप नेविगेशन तीर दिखा सकते हैं। [डेमो]

3 डी क्यूब टैब्ड इंटरफ़ेस [डेमो]

ES6 के लिए टैब मॉड्यूल [डेमो]

सीएसएस टैब्स के साथ चर ऊंचाई [डेमो]

सामग्री डिजाइन टैब - वेनिला जावास्क्रिप्ट का उपयोग करके निर्मित एक सामग्री डिज़ाइन प्रेरित टैब स्निपेट। यह है उपयोग करने के लिए सरल और साथ ही अनुकूलन. हालाँकि, इसमें उन्नत विकल्पों की सुविधा नहीं है। [डेमो]

एनिमेटेड सीएसएस टैब्स - एनिमेटेड सीएसएस टैब्स एक सीएसएस-ओनली टैब सिस्टम है जो आपको सरल, लाइट टैब बनाने की सुविधा देता है। टैबी या वेलटैबर के विपरीत, यह कोई उन्नत कॉन्फ़िगरेशन प्रदान नहीं करता है. [डेमो]

pureTabs [डेमो]

वेनिला जावास्क्रिप्ट एक्सेसिबल टैब [डेमो]

स्किफी-शैली एनिमेटेड टैब [डेमो]

शुद्ध सीएसएस बूटस्ट्रैप अनुकूली टैब - एक बूटस्ट्रैप से प्रेरित टैब सिस्टम जिसे सिर्फ CSS और कोई जावास्क्रिप्ट का उपयोग करके बनाया गया है। यह किस विशिष्ट विशेषता को लाता है स्क्रीन में ओवरफिटिंग को ड्रॉपडाउन सूची में ले जाया जाता है. [डेमो]

फोल्डेबल टैब बार - इस सूची में विभिन्न प्लगइन्स की तरह शुद्ध CSS3 और कोई जावास्क्रिप्ट पर आधारित एक टैब विजेट। क्या दिलचस्प बनाता है इसका टैब एक है अच्छी लग रही है foldable संक्रमण. [डेमो]

बहुत बढ़िया सीएसएस एनिमेटेड टैब [डेमो]

जावास्क्रिप्ट सारणी - केवल जावास्क्रिप्ट के साथ बनाया गया एक उन्नत टैब प्लगइन। यह आपको एक डिफ़ॉल्ट टैब सेट करने देता है, टैब को गतिशील रूप से बदल सकता है, और onLoad और onClick इवेंट कॉलबैक फ़ंक्शंस जोड़ें. [डेमो]

कंकाल की खाल [डेमो]

Tabtastic - Tabtastic CSS और JS का उपयोग करके टैब को कार्यान्वित करने का एक आसान प्लगइन है। यह सिमेंटिक मार्कअप का उपयोग करता है, स्क्रीन पाठकों के लिए सुलभ है, और एक पृष्ठ पर नेस्टेड टैब का समर्थन करता है। [डेमो]

CSS3 और jQuery फ़ोल्डर टैब - यह आसान ट्यूटोरियल (डाउनलोड करने योग्य कोड के साथ) के बारे में साझा करता है CSS3 और jQuery का उपयोग करके फ़ोल्डर टैब बनाना. यह मुझे Google Chrome जैसे ब्राउज़रों में दिखाए गए टैब की याद दिलाता है। [डेमो]

टैब्ड सामग्री [डेमो]

समान-चौड़ाई वाला नेविगेशन टैब - समान चौड़ाई के नेविगेशन टैब बनाने के लिए एक कोड स्निपेट, सादे सीएसएस के उपयोग को प्रदर्शित करता है। आप ऐसा कर सकते हैं देखो अनुकूलित करें, लेकिन यह बॉक्स से बाहर उन्नत विकल्प प्रदान नहीं करता है. [डेमो]

JQuery और CSS के साथ टैब की गई सामग्री [डेमो]

ट्विटर बूटस्ट्रैप विजार्ड - Twitter बूटस्ट्रैप विजार्ड एक टैब्लेबल स्ट्रक्चर के विजार्ड्स बनाने के लिए एक प्लगइन है। मैंने देखा कि आप अगले और पिछले बटन को छिपाकर या हटाकर सिर्फ टैब बना सकते हैं। [डेमो]

शुद्ध सीएसएस टैब्स [डेमो]

उत्तरदायी सीएसएस टैब्स [डेमो]

बस एक और सीएसएस टैब्स - एक सुंदर रूप से तैयार की गई टैब संरचना, जो सीएसएस के साथ निर्मित है, जो आधुनिक ब्राउज़रों पर काम करता है. हालांकि, ऊपर दिए गए कुछ शक्तिशाली प्लगइन्स के विपरीत, इसमें कोई उन्नत विकल्प नहीं है। [डेमो]

टैब्स के लिए उत्तरदायी समझौता - टैब के लिए उत्तरदायी अकॉर्डियन, जैसा कि नाम से पता चलता है, स्क्रीन की चौड़ाई के आधार पर समझौते या टैब के रूप में काम करता है। यह यदि आकार छोटा है तो टैब को दिखा सकते हैं यदि संभव हो तो अन्य अनुरूपण. [डेमो]

CardTabs - CardTabs एक है jQuery पर आधारित अल्ट्रा-लाइट टैब प्लगइन, जो कई विषयों के साथ आता है। आप नए थीम भी बना सकते हैं और सक्रिय टैब को गतिशील रूप से सेट कर सकते हैं। [डेमो]

आरि ताब [डेमो]

न्यूनतम और सेक्सी टैब्स - एक सुंदर, नया टैब स्निपेट है दो रंग योजनाओं में उपलब्ध है - प्रकाश और अंधेरे. यह jQuery का उपयोग करके बनाया गया है, इसलिए यह ऊपर सूचीबद्ध कुछ अन्य प्लगइन्स के समान प्रकाश नहीं है। [डेमो]

टैब्ड विजेट [डेमो]

अनुकूली टैब - अनुकूली टैब एक सरल, सुंदर टैब स्निपेट है। आधुनिक डिजाइन के अलावा, इसमें और अधिक सुविधाएँ नहीं हैं जो ऊपर दिए गए कुछ उन्नत प्लगइन्स में उपलब्ध हैं। [डेमो]

ट्री स्टाइल टैब [डेमो]

Tabulous.js [डेमो]

jQuery के टैब - jQuery टैब टैब बनाने के लिए एक सरल प्लगइन है। जैसा कि इसके नाम से पता चलता है, यह है कुछ ऊपर सूचीबद्ध प्लगइन्स के विपरीत jQuery का उपयोग करके बनाया गया है जो कि शुद्ध CSS या JavaScript के साथ बनाया गया है। [डेमो]

jQuery के rTabs [डेमो]

संपादक की टिप्पणी: यह पोस्ट मूल रूप से जून 2008 में प्रकाशित हुई थी और अप्रैल 2018 में नई सामग्री के आधार पर अपडेट की गई थी.