বুটস্ট্রাপ ৫ এ Offcanvas Menu বা রেসপন্সিভ সাইডবার তৈরি করা খুবই সহজ। এটি একটি আউটপ্যানেল সাইডবার যা সঠিকভাবে রেসপন্সিভ এবং মোবাইল-ফ্রেন্ডলি হয়। এটি সাধারণত ওয়েবসাইটের নেভিগেশন বা অতিরিক্ত কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়, যেখানে স্ক্রীনের এক পাশ থেকে সাইডবারটি স্লাইড করে আসে।
বুটস্ট্রাপ ৫ এ Offcanvas উপাদানটি একটি বিল্ট-ইন উপাদান হিসেবে এসেছে, যা খুব সহজে সাইডবার বা মেনু তৈরি করতে সাহায্য করে।
Offcanvas Menu তৈরি করার উপাদান
- Offcanvas Container: সাইডবার তৈরি করতে এটি প্রথম উপাদান, যা সাইডবারকে ডিফাইন করবে।
- Toggle Button: একটি বাটন বা লিঙ্ক যা ক্লিক করলে সাইডবারটি প্রদর্শিত হবে।
- Offcanvas Content: সাইডবারে থাকা কন্টেন্ট, যেমন: লিঙ্ক, মেনু আইটেম ইত্যাদি।
উদাহরণ: রেসপন্সিভ সাইডবার (Offcanvas Menu)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar - Offcanvas Menu</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Offcanvas Toggle Button -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
মেনু
</button>
<!-- Offcanvas Menu (Sidebar) -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 id="offcanvasExampleLabel">সাইডবার</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-group">
<li class="list-group-item">হোম</li>
<li class="list-group-item">আমাদের সম্পর্কে</li>
<li class="list-group-item">সেবা</li>
<li class="list-group-item">যোগাযোগ</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
ব্যাখ্যা:
data-bs-toggle="offcanvas": এই অ্যাট্রিবিউটটি টগল বাটনের মাধ্যমে সাইডবার (Offcanvas) খুলতে ব্যবহৃত হয়।data-bs-target="#offcanvasExample": এই অ্যাট্রিবিউটটি টগল বাটনকে সাইডবারের ID-এর সাথে সংযুক্ত করে। এতে টগল বাটন ক্লিক করলে এটি নির্দিষ্ট সাইডবারটি খুলবে।offcanvas offcanvas-start:offcanvas-startব্যবহার করা হয়েছে সাইডবারটি স্ক্রীনের বামপাশে অবস্থান করবে। যদি আপনি সাইডবারটি ডানপাশে রাখতে চান, তাহলেoffcanvas-endব্যবহার করতে হবে।btn-close: সাইডবার বন্ধ করার জন্য একটি ক্লোজ বাটন।
অতিরিক্ত কাস্টমাইজেশন:
সাইডবারের অবস্থান পরিবর্তন:
offcanvas-end: যদি আপনি সাইডবারটি ডানপাশে প্রদর্শন করতে চান, তবেoffcanvas-startএর পরিবর্তেoffcanvas-endব্যবহার করুন।
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<!-- বাকি কন্টেন্ট এখানে থাকবে -->
</div>
সাইডবারের আকার কাস্টমাইজ করা:
বুটস্ট্রাপ ৫ এ offcanvas এর আকার নিয়ন্ত্রণ করার জন্য আপনি offcanvas-lg, offcanvas-sm ইত্যাদি ক্লাস ব্যবহার করতে পারেন। এতে সাইডবারের প্রস্থ নির্ধারণ করা সম্ভব হয়।
<div class="offcanvas offcanvas-start offcanvas-lg" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<!-- বাকি কন্টেন্ট এখানে থাকবে -->
</div>
সারাংশ
বুটস্ট্রাপ ৫ এর Offcanvas Menu বা সাইডবার একটি অত্যন্ত শক্তিশালী এবং সহজলভ্য উপাদান, যা আপনি আপনার ওয়েবসাইটের নেভিগেশন বা অন্যান্য কন্টেন্টের জন্য ব্যবহার করতে পারেন। এটি রেসপন্সিভ এবং মোবাইল-ফ্রেন্ডলি, তাই ব্যবহারকারী যেকোনো ডিভাইসে এটি ব্যবহার করতে পারবে। টগল বাটন এবং সাইডবারের কাস্টমাইজেশন খুবই সহজ, এবং আপনি স্ক্রীনের যে কোনো পাশে এটি প্রদর্শন করতে পারেন।
Read more
