CSS टैब्स संबंधित जानकारी को एक आसानी से नेविगेट करने योग्य स्थान पर प्रदर्शित करने में वास्तव में महान हैं। वे अनिवार्य रूप से टैब्ड डिवाइडर्स की तरह दिखते हैं जो आप एक रेसिपी बॉक्स या बाइंडर में देखते हैं। यहां टैब्ड नेविगेशन का उपयोग करने वाली वेबसाइटों के कुछ उदाहरण हैं:
- साउथवेस्ट एयरलाइंस यूज़र को फ्लाइट के लिए चेक-इन करने, फ्लाइट बुक करने, या उनके रिजर्वेशन में होटल जोड़ने के बीच नेविगेट करने के लिए टैब्ड नेविगेशन का उपयोग करती है।
- एंटरप्राइज यूज़र को रेंट या खरीदने के बीच निर्णय लेने, और उनकी अन्य सेवाओं के बारे में जानने के लिए नेविगेशन के लिए टैब्स का उपयोग करता है।
इन दो साइट्स को देखते समय, सोचें कि ऐसी UI कंपोनेंट का उपयोग करने के क्या फायदे हैं। यह कौन सी समस्याएं हल करता है? टैब्ड नेविगेशन किस प्रकार की जानकारी के लिए एक अच्छा कार्यान्वयन होगा?
जब आपको एक UI संरचना की आवश्यकता होती है जो टेक्स्ट या जानकारी को सार्थक घटकों में व्यवस्थित करती है और उन्हें स्क्रीन पर बहुत अधिक स्थान लिए बिना प्रदर्शित करती है, तो टैब्ड नेविगेशन एक बुद्धिमान विकल्प है। हम जावास्क्रिप्ट, jQuery और/या बूटस्ट्रैप का उपयोग करते हुए टैब्ड नेविगेशन के बारे में अधिक गहराई से बात करेंगे, लेकिन एक कार्यान्वयन भी है जिसका उपयोग हम केवल HTML और प्योर CSS के साथ कर सकते हैं। आइए सेटअप पर एक नज़र डालते हैं:
अपना HTML सेटअप करें:
आगे बढ़ें और बॉडी के अंदर एक कंटेनर के साथ अपना बॉयलरप्लेट HTML सेट करें जो हमारे प्रोजेक्ट के लिए मुख्य कंटेनर के रूप में काम करेगा। आप इसे क्लास एट्रिब्यूट में जो चाहें कह सकते हैं, लेकिन मैं इसे class="tabs" कहूंगा। अब तक, आपका HTML ऐसा दिखना चाहिए:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Tabs</title> <style> /* No CSS to display yet */ </style> </head> <body> <div class="tabs"></div> <body> </html>
"tabs" <div> के अंदर, हम चार और <div>s डालेंगे और प्रत्येक को tab क्लास के साथ कॉल करेंगे। यह आज हमारे द्वारा लिखे जा रहे चार टैब्स में से प्रत्येक को दर्शाता है। इसमें हमारा इनपुट, टैब लेबल्स और टैब कंटेंट होगा। आइए उन सभी के लिए खाली कंटेनर बनाते हैं:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Tabs</title> <style> /* No CSS to display yet */ </style> </head> <body> <div class="tabs"> <div class="tab"> /* THIS IS OUR PLAN IN ACTION*/ /*input */ <input type="radio" id="tab-1" name="tab-group-1" checked/> /*label for input */ <label for="tab-1">Label 1</label> /* content */ <div class="content">Our content will go here</div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1" checked/> <label for="tab-2">Label 2</label> <div class="content gryffindor">Our content will go here</div> </div> <div class="tab">Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like!</div> <div class="tab"></div> </div> <body> </html>
कंटेंट क्लास नेम के अंदर हमारा कंटेंट होगा। आप जो चाहें कंटेंट उपयोग कर सकते हैं, लेकिन एक टैब पर संबंधित कंटेंट का उपयोग करना मानक अभ्यास है।
CSS शुरू करने का समय:
CSS लिखने की बात आती है, तो सबसे बड़े कंटेनर से शुरू करें और सबसे छोटे कंटेनर की ओर काम करें। यहां न्यूनतम है जो हमें इसे काम करने के लिए करने की आवश्यकता है:
- वाइल्ड कार्ड सेलेक्टर को box-sizing: border-box पर सेट करें।
- मुख्य कंटेनर पर, हमें डिस्प्ले प्रॉपर्टी को फ्लेक्स पर सेट करना होगा और पोजिशन को रिलेटिव पर सेट करना होगा। डिस्प्ले: फ्लेक्स टैब्स को एक पंक्ति में एक दूसरे के बगल में लेटने की अनुमति देता है और रिलेटिव पोजिशन मूल रूप से एक सीमा या बाड़ के रूप में कार्य करता है जो टैब के कंटेंट को समाहित करता है।
इस बिंदु पर आप देखेंगे कि चार टेक्स्ट ब्लॉक्स की तरह क्या दिखता है जिसमें एक रेडियो बटन और कुछ कंटेंट है। अगला हमें चेक्ड ब्लॉक को दिखाने और अन्य ब्लॉक्स को छुपाने का एक तरीका निकालना होगा।
- .tab कंटेनर पर, हम लेबल के लिए स्टाइलिंग सेट करेंगे:
- आप जो चाहें कलर में 1px सॉलिड बॉर्डर।
- पैडिंग: 5px, 10px - लेबल टेक्स्ट के चारों ओर कुछ स्पेस जोड़ेगा।
- बॉर्डर-रेडियस 10px, 10px, 0px, 0px - यह लेबल को पारंपरिक टैब की तरह दिखाएगा।
अगर आप अभी अपना काम चेक करते हैं, तो आप देखेंगे कि लेबल्स के बाईं ओर सर्कुलर रेडियो बटन्स हैं। तो यह एक पारंपरिक टैब की तरह अधिक दिखता है, लेकिन फिर भी बटन के चेक्ड एट्रिब्यूट को बनाए रखने के लिए, हमें रेडियो बटन के सर्कुलर हिस्से को छुपाने की आवश्यकता है।
- बटन को वास्तव में सेलेक्ट करने के लिए, हम .tab [type='radio'] का उपयोग करते हैं। इसे छुपाने के लिए, हम डिस्प्ले को none पर सेट करते हैं।
अब, हमें वास्तविक कंटेंट से निपटने की आवश्यकता है ताकि यह एक समय में केवल एक टैब दिखाए।
- कंटेंट div को सेलेक्ट करें और फिर पोजिशन को एब्सोल्यूट पर सेट करें। जब एब्सोल्यूट पोजिशन सेट की जाती है, तो div को रिलेटिव पैरेंट के अंदर कहीं भी सेट किया जा सकता है। टॉप, राइट, लेफ्ट और बॉटम का उपयोग करके, आप कंटेंट को पैरेंट div के अंदर जहां चाहें सेट कर सकते हैं। इस मामले में, लेफ्ट और राइट प्रॉपर्टीज को 0 पर सेट करें। हम एक बॉर्डर भी बनाना चाहते हैं और बैकग्राउंड कलर को नॉन-ट्रांसपेरेंट कलर पर सेट करना चाहते हैं।
- सेलेक्टेड टैब का z-index सेट करने से उस टैब का पैनल टॉप पर आ जाएगा। ऐसा करने के लिए, चेक्ड बटन और उसके कंटेंट को सेलेक्ट करें। ऐसा करने के लिए हम [type='radio']:checked ~ label ~ .content का उपयोग करते हैं। CSS में एलिमेंट्स के बीच "~" हमें बताता है कि हम उस कंटेंट क्लास को चाहते हैं जो एक लेबल एलिमेंट के बाद आता है जो एक चेक्ड रेडियो बटन के बाद आता है।
- यह दिखाने के लिए कि कौन सा टैब एक्टिव है, [type='radio']:checked ~ label को एक अलग बैकग्राउंड कलर पर सेट करें।
अब जब यूज़र प्रत्येक टैब पर क्लिक करता है, तो उन्हें अन्य पैनल्स का कंटेंट देखे बिना एक से दूसरे पर सफलतापूर्वक जाने में सक्षम होना चाहिए। टैब्ड नेविगेशन को काम करने के लिए आपको न्यूनतम यही चाहिए। CSS के साथ स्टाइलिंग बदलने के लिए खेलने की कोशिश करें! नीचे एक कार्यशील कार्यान्वयन दिया गया है:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Tabs</title> <style> * { box-sizing: border-box; } body { font-family: 'Roboto'; } .tabs { max-width: 700px; min-height: 100px; margin: 25px 0; width: 100%; display: flex; /* allows for tabs to be next to each other */ position: relative; /* relative here contains the width of the content */ } .tab label { padding: 5px 10px; border: 1px solid #ccc; cursor: pointer; border-radius: 10px 10px 0 0; } .tab [type='radio'] { display: none; /* this makes the radio buttons disappear - we are only keeping track if they are checked or not */ } h3 { margin: 10px 40px; } ul { list-style-type: none; } .content { padding: 10px; border-radius: 0px 10px 10px 10px; position: absolute; left: 0; right: 0; background: white; border: 1px solid #ccc; /* the left and right at 0 help the tabs to overlap each other */ } /* This allows the selected tab to be on top */ [type='radio']:checked ~ label ~ .content { z-index: 1; } [type="radio"]:checked ~ label { background: lightgrey; } /* color scheme for tabs */ [type='radio']:checked ~ #gryffindor { background: #ec9086; color: #241806; } [type='radio']:checked ~ #ravenclaw { background: #3054ca; color: #241806; } [type='radio']:checked ~ #slytherin { background: #089714; color: #252525; } [type='radio']:checked ~ #hufflepuff { background: #f0d695; color: #372e29; } [type='radio'] ~ #slytherin { background: #033807; color: #aaaaaa; } [type='radio'] ~ #hufflepuff { background: #f0c75e; color: #372e29; } [type='radio'] ~ #gryffindor { background: #9c1203; color: #e3a000; } [type='radio'] ~ #ravenclaw { background: #0e1a40; color: #946b2d; } .gryffindor { background: #9c1203; color: #e3a000; } .slytherin { background: #033807; color: #aaaaaa; } .hufflepuff { background: #f0c75e; color: #372e29; } .ravenclaw { background: #0e1a40; color: #946b2d; } </style> </head> <body> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked/> <label id="gryffindor" for="tab-1">Gryffindor</label> <div class="content gryffindor"> <h3>HP Chars in Gryffindor</h3> <ul class="gryffindor-students"> <li>Harry Potter</li> <li>Hermione Grainger</li> <li>Ron Weasley</li> <li>Albus Dumbledore</li> <li>Katie Bell</li> <li>Neville Longbottom</li> </ul> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"/> <label id="slytherin" for="tab-2">Slytherin</label> <div class="content slytherin"> <h3>HP Chars in Slytherin</h3> <ul class="slytherin-students"> <li>Draco Malfoy</li> <li>Narcissa Black</li> <li>Lucius Malfoy</li> <li>Severus Snape</li> <li>Tom Riddle</li> <li>Dolores Umbridge</li> </ul> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"/> <label for="tab-3" id="ravenclaw">Ravenclaw</label> <div class="content ravenclaw"> <h3>HP Chars in Ravenclaw</h3> <ul class="ravenclaw-students"> <li>Lisa Turpin</li> <li>Luna Lovegood</li> <li>Gilderoy Lockhart</li> <li>Garrick Ollivander</li> <li>Padma Patil</li> <li>Sybil Trelawney</li> </ul> </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4" id="hufflepuff">Hufflepuff</label> <div class="content hufflepuff"> <h3>HP Chars in Hufflepuff</h3> <ul class="hufflepuff-students"> <li>Cedric Diggory</li> <li>Newton Scamander</li> <li>Nymphadora Tonks</li> <li>Pomona Sprout</li> <li>Susan Bones</li> <li>Teddy Lupin</li> </ul> </div> </div> </div> </body> </html>
