জাভাস্ক্রিপ্ট ছাড়া সিএসএস দিয়ে ট্যাব (Tabs) তৈরি করা

<!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> 

ইনসার্ট (insert) করব এবং প্রতিটাকে ক্লাস দেব tab। এটি প্রতিটি চারটি ট্যাবকে রিপ্রেজেন্ট করে যা আমরা আজ লিখব। এটাতে থাকবে আমাদের ইনপুট (input), ট্যাব লেবেল (tab labels) এবং ট্যাব কন্টেন্ট (tab content)। চলুন সেগুলোর জন্য খালি কন্টেইনার বানাই:

<!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> 

content ক্লাস নামের ভিতরে থাকবে আমাদের কন্টেন্ট। আপনি যেকোনো কন্টেন্ট ব্যবহার করতে পারেন, কিন্তু স্ট্যান্ডার্ড প্র্যাক্টিস (standard practice) হচ্ছে একটি ট্যাবে অ্যাসোসিয়েটেড কন্টেন্ট ব্যবহার করা।

সিএসএস লেখা শুরু করা যাক:

সিএসএস লেখার সময়, সবচেয়ে বড় কন্টেইনার থেকে শুরু করে সবচেয়ে ছোট কন্টেইনার পর্যন্ত যান। এখানে মিনিমাম (minimum) যা করতে হবে সেটা কাজ করার জন্য:

1. একটি وا일্ডকার্ড (wild card) সিলেক্টরকে box-sizing: border-box সেট করুন।
2. মেইন কন্টেইনারে, আমাদের display প্রপার্টি flex সেট করতে হবে এবং position relative সেট করতে হবে। Display: flex ট্যাবগুলোকে একসাথে রো (row) এ লেয় করতে দেয় এবং relative position মূলত একটি বাউন্ডারি বা ফেন্স (boundary or fence) হিসেবে কাজ করে যা ট্যাবের কন্টেন্টকে কন্টেইন (contain) করে।

এই পয়েন্টে আপনি দেখবেন যা চারটি টেক্সট ব্লক দেখাচ্ছে রেডিও বাটন এবং কিছু কন্টেন্টের সাথে। এরপর আমাদের চেকড (checked) ব্লকটি শো (show) করা এবং অন্যান্য ব্লকগুলো হাইড (hide) করার উপায় বের করতে হবে।

3. .tab কন্টেইনারে, আমরা লেবেলের (label) জন্য স্টাইলিং সেটআপ করব:
   1. ১px স olid বর্ডার যেকোনো রঙে যা আপনি চান।
   2. Padding: 5px, 10px – লেবেল টেক্সটের চারদিকে স্পেস যোগ করবে।
   3. Border-radius 10px, 10px, 0px, 0px – এটি লেবেলকে একটি পারম্পরিক ট্যাবের মত দেখাবে।

আপনি যদি এখন আপনার কাজ চেক করেন, তবে দেখবেন লেবেলগুলোর বামপাশে সার্কুলার রেডিও বাটন আছে। তাই এটা আরও পারম্পরিক ট্যাবের মত দেখাচ্ছে, কিন্তু রেডিও বাটনের চেকড অ্যাট্রিবিউট (checked attribute) রাখতে হলে, আমাদের রেডিও বাটনের সার্কুলার অংশটি হাইড (hide) করতে হবে।

4. বাটনটি সিলেক্ট করতে, আমরা .tab [type='radio'] ব্যবহার করি। এটাকে হাইড করতে, display none সেট করি।

এরপর, আমাদের আসলে কন্টেন্টটাকে নিপটাতে হবে যাতে একবারে শুধু একটি ট্যাব শো করে।

5. content div সিলেক্ট করুন এবং position absolute সেট করুন। যখন absolute position সেট করা হয়, divটি রিলেটিভ প্যারেন্টের (relative parent) ভিতরে যেকোনো জায়গায় সেট করা যায়। top, right, left এবং bottom ব্যবহার করে, আপনি কন্টেন্টকে প্যারেন্ট div-এ যেখানেই চান সেট করতে পারেন। এই কেসে, left এবং right প্রপার্টিগুলো ০ সেট করুন। আমরা একটি বর্ডারও তৈরি করব এবং একটি নন-ট্রান্সপেরেন্ট (non-transparent) ব্যাকগ্রাউন্ড রঙ সেট করব।

6. সিলেক্টেড ট্যাবের z-index সেট করলে সেটার প্যানেল (panel) টপে (on top) আসবে। এটা করতে, চেকড বাটন এবং এর কন্টেন্ট সিলেক্ট করুন। এটা করতে আমরা ব্যবহার করি [type='radio']:checked ~ label ~ .content। সিএসএস-এ এলিমেন্টের মাঝপথে "~" বলে আমাদের বুঝায় যে আমরা সেটা content ক্লাস চাই যা একটি লেবেল এলিমেন্টের পরে আসে যা একটি চেকড রেডিও বাটনের পরে আসে।

7. কোন ট্যাবটি একটিভ (active) সেটা দেখানোর জন্য, [type='radio']:checked ~ label কে একটি ভিন্ন ব্যাকগ্রাউন্ড রঙ দিন।

এখন যখন ইউজার প্রতিটি ট্যাবে ক্লিক করবে, তবে সেগুলো সফলভাবে একট থেকে অন্যটিতে যেতে পারবে অন্য প্যানেলের কন্টেন্ট না দেখে। এটি মিনিমাম যা ট্যাবড নেভিগেশন কাজ করার জন্য লাগে। সিএসএস-এ খেলে দেখুন স্টাইলিং চেঞ্জ করতে! একটি ওয়ার্কিং ইমপ্লিমেন্টেশন (working implementation) নিচে কোড আউট করা আছে:

<!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>