সিএসএস ট্যাবগুলি একটি সহজে-নেভিগেট জায়গায় সংশ্লিষ্ট তথ্য প্রদর্শনের জন্য সত্যিই দুর্দান্ত। এগুলি মূলত ট্যাবড ডিভাইডারগুলির মতো দেখতে যা আপনি একটি রেসিপি বাক্স বা একটি বাইন্ডারে দেখতে পাবেন। এখানে ট্যাবড নেভিগেশন ব্যবহার করে ওয়েবসাইটগুলির কিছু উদাহরণ রয়েছে:
- সাউথওয়েস্ট এয়ারলাইনস ট্যাবড নেভিগেশন ব্যবহার করে ব্যবহারকারীকে ফ্লাইটে চেক ইন করা, ফ্লাইট বুক করা বা তাদের রিজার্ভেশনে হোটেল যোগ করার মধ্যে নেভিগেট করতে দেয়।
- এন্টারপ্রাইজ নেভিগেশনের জন্য ট্যাবগুলি ব্যবহার করে যাতে ব্যবহারকারীরা ভাড়া নেওয়া বা কেনার মধ্যে সিদ্ধান্ত নিতে পারে এবং তাদের অন্যান্য পরিষেবাগুলি সম্পর্কেও শিখতে পারে৷
আপনি এই দুটি সাইট পর্যবেক্ষণ করার সময়, সাইটগুলিতে এই জাতীয় UI উপাদান ব্যবহার করার সুবিধাগুলি কী তা নিয়ে ভাবুন৷ এটা কি সমস্যা সমাধান করে? ট্যাবড নেভিগেশন কোন ধরনের তথ্যের জন্য একটি ভাল বাস্তবায়ন হবে?
যখন আপনাকে একটি UI কাঠামোর জন্য পৌঁছাতে হবে যা অর্থপূর্ণ উপাদানগুলিতে পাঠ্য বা তথ্যকে সংগঠিত করে এবং খুব বেশি জায়গা না নিয়ে সেগুলিকে স্ক্রিনে প্রদর্শন করে, তখন ট্যাবড নেভিগেশন একটি বুদ্ধিমান পছন্দ। আমরা জাভাস্ক্রিপ্ট, jQuery এবং/অথবা বুটস্ট্র্যাপ ব্যবহার করার সাথে সাথে ট্যাবড নেভিগেশন সম্পর্কে আরও গভীরভাবে কথা বলব, তবে এমন একটি বাস্তবায়নও রয়েছে যা আমরা ব্যবহার করতে পারি যার জন্য শুধুমাত্র HTML এবং বিশুদ্ধ CSS প্রয়োজন। আসুন সেটআপটি একবার দেখে নেওয়া যাক:
আপনার 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>-এর ভিতরে , আমরা আরও চারটি
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 লেখার কথা আসে, তখন সবচেয়ে বড় কন্টেইনার থেকে শুরু করুন এবং সবচেয়ে ছোট কন্টেইনারে আপনার পথে কাজ করুন। এটি কাজ করার জন্য আমাদের ন্যূনতম যা করতে হবে তা এখানে:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
- একটি ওয়াইল্ড কার্ড নির্বাচককে একটি বক্স-আকারে সেট করুন:বর্ডার-বক্স৷ ৷
- প্রধান কন্টেইনারে, আমাদের ডিসপ্লে প্রপার্টি ফ্লেক্সে সেট করতে হবে এবং অবস্থান আপেক্ষিকভাবে সেট করতে হবে। ডিসপ্লে:ফ্লেক্স ট্যাবগুলিকে একটি সারিতে একে অপরের পাশে রাখার অনুমতি দেয় এবং আপেক্ষিক অবস্থানটি মূলত একটি সীমানা বা বেড়া হিসাবে কাজ করে যাতে ট্যাবের বিষয়বস্তু থাকে।
এই মুহুর্তে আপনি একটি রেডিও বোতাম এবং কিছু বিষয়বস্তু সহ চারটি ব্লকের টেক্সট দেখতে দেখতে পাবেন। পরবর্তীতে আমাদের চেক করা ব্লক দেখানোর এবং অন্যান্য ব্লক লুকানোর উপায় বের করতে হবে।
- . ট্যাব কন্টেইনারে, আমরা লেবেলের জন্য স্টাইলিং সেট আপ করব:
- আপনার ইচ্ছামত যেকোনো রঙে 1px কঠিন সীমানা।
- প্যাডিং:5px, 10px – লেবেল পাঠ্যের চারপাশে কিছু স্থান যোগ করবে
- বর্ডার-ব্যাসার্ধ 10px, 10px, 0px, 0px – এটি লেবেলটিকে একটি ঐতিহ্যবাহী ট্যাবের মতো দেখাবে।
আপনি যদি এখন আপনার কাজ পরীক্ষা করেন, আপনি দেখতে পাবেন যে লেবেলগুলির বাম দিকে বৃত্তাকার রেডিও বোতাম রয়েছে৷ সুতরাং এটি একটি ঐতিহ্যগত ট্যাবের মতো দেখায়, তবে এখনও বোতামটির চেক করা বৈশিষ্ট্যটি রাখতে, আমাদের রেডিও বোতামের বৃত্তাকার অংশটি লুকিয়ে রাখতে হবে।
- আসলে বোতামটি নির্বাচন করতে, আমরা .tab [type=’radio’] ব্যবহার করি। এটি লুকানোর জন্য, আমরা কোনটিতে প্রদর্শন সেট করি না।
এর পরে, আমাদের প্রকৃত বিষয়বস্তু মোকাবেলা করতে হবে যাতে এটি একবারে একটি ট্যাব দেখায়।
- কন্টেন্ট ডিভ নির্বাচন করুন এবং তারপরে অবস্থানটি পরম সেট করুন। যখন পরম অবস্থান সেট করা হয়, ডিভ আপেক্ষিক পিতামাতার ভিতরে যে কোনও জায়গায় সেট করা যেতে পারে। উপরের, ডান, বাম এবং নীচে ব্যবহার করে, আপনি প্যারেন্ট ডিভের ভিতরে যেখানে চান সেখানে সামগ্রী সেট করতে পারেন। এই ক্ষেত্রে, বাম এবং ডান বৈশিষ্ট্যগুলি 0 এ সেট করুন। আমরা একটি বর্ডার তৈরি করতে এবং একটি অ-স্বচ্ছ রঙে একটি পটভূমির রঙ সেট করতে চাই।
- নির্বাচিত ট্যাবের z-সূচী সেট করা সেই ট্যাবের প্যানেলটিকে উপরে রাখবে। এটি করতে, চেক করা বোতাম এবং এর বিষয়বস্তু নির্বাচন করুন। এটি করার জন্য আমরা [type='radio']:checked ~ label ~ .content ব্যবহার করি। CSS-এর উপাদানগুলির মধ্যে "~" আমাদেরকে বলে যে আমরা কন্টেন্ট ক্লাস চাই যা একটি লেবেল উপাদানের পরে ঘটে যা একটি চেক করা রেডিও বোতামের পরে ঘটে।
- কোন ট্যাব সক্রিয় তা দেখানোর জন্য, একটি ভিন্ন পটভূমির রঙে [type='radio']:checked ~ লেবেল সেট করুন।
এখন ব্যবহারকারী যখন প্রতিটি ট্যাবে ক্লিক করে, তখন তারা অন্য প্যানেলের বিষয়বস্তু না দেখে সফলভাবে একটি থেকে অন্যটিতে যেতে সক্ষম হবে। ট্যাবড ন্যাভিগেশন কাজ করার জন্য এটি আপনার প্রয়োজন সর্বনিম্ন। স্টাইলিং পরিবর্তন করতে 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>
