Bulma ফ্রেমওয়ার্কের সাথে আপনি সহজেই Sticky Navbar এবং Fixed Menu Layouts তৈরি করতে পারবেন। এই ধরনের লেআউট ওয়েবসাইটের নেভিগেশন বার বা মেনুকে স্ক্রল করার সময় পেজের উপরিভাগে স্থির রাখে, যাতে ব্যবহারকারীরা যে কোনো সময় নেভিগেট করতে পারেন। এখানে Sticky Navbar এবং Fixed Menu Layouts তৈরি করার বিস্তারিত পদ্ধতি আলোচনা করা হয়েছে।
১. Sticky Navbar
Sticky Navbar এমন একটি নেভিগেশন বার যা পেজ স্ক্রল করার সময় পেজের উপরের দিকে আটকে থাকে। এটি ব্যবহারকারীদের জন্য সহজ অ্যাক্সেস নিশ্চিত করে, কারণ তারা যেকোনো সময় নেভিগেশন অপশন দেখতে পারেন।
Bulma তে sticky বা fixed নেভিগেশন বার তৈরির জন্য সাধারণত CSS position: sticky প্রপার্টি ব্যবহৃত হয়। তবে Bulma তে এটি একটি সহজ টিউটোরিয়ালের মাধ্যমে কিভাবে ব্যবহার করা যায় তা দেখা যাবে।
Sticky Navbar এর উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style>
.navbar.is-sticky {
position: sticky;
top: 0;
z-index: 1000;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar is-sticky is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="#">Brand</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
<!-- Content -->
<section class="section">
<div class="container">
<h1 class="title">Sticky Navbar Example</h1>
<p>Scroll down to see the sticky effect in action!</p>
</div>
</section>
<section class="section">
<div class="container">
<p>Keep scrolling to see how the navbar stays at the top.</p>
<p>More content goes here...</p>
</div>
</section>
</body>
</html>
ব্যাখ্যা:
navbar.is-sticky: এখানে.navbarক্লাসেposition: sticky;এবংtop: 0;ব্যবহার করা হয়েছে, যার মাধ্যমে নেভিগেশন বার পেজ স্ক্রল করার সময় উপরে আটকে থাকবে।z-index: 1000;: এটি নিশ্চিত করে যে, নেভিগেশন বার পেজের অন্যান্য উপাদানগুলোর উপরে থাকবে।
এটি সহজেই Sticky Navbar তৈরি করার জন্য ব্যবহৃত পদ্ধতি। ব্যবহারকারীরা যখন পেজ স্ক্রল করবেন, তখন নেভিগেশন বার উপরে আটকে থাকবে এবং তারা সহজে মেনুতে নেভিগেট করতে পারবেন।
২. Fixed Menu Layouts
Fixed Menu Layouts হল সেই ধরনের লেআউট যেখানে নেভিগেশন বার বা মেনু স্ক্রল করার সময় পেজের উপরের অংশে স্থির থাকে, তবে এটি শুধুমাত্র স্ক্রল হওয়া পর্যন্ত দৃশ্যমান থাকে। এটি সাধারনত একটি নির্দিষ্ট জায়গায় থাকে এবং পেজের কন্টেন্টের সাথে মিশে যায় না।
Bulma তে একটি Fixed Menu Layout তৈরি করার জন্য position: fixed CSS প্রপার্টি ব্যবহার করা হয়, যা মেনুকে স্ক্রল করার সময় নির্দিষ্ট জায়গায় স্থির রাখে।
Fixed Menu Layout এর উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style>
.navbar.is-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
body {
padding-top: 70px; /* Adjust this value to the height of your navbar */
}
</style>
</head>
<body>
<!-- Fixed Navbar -->
<nav class="navbar is-fixed-top is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="#">Brand</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
<!-- Content -->
<section class="section">
<div class="container">
<h1 class="title">Fixed Menu Example</h1>
<p>Scroll down to see the fixed menu effect!</p>
</div>
</section>
<section class="section">
<div class="container">
<p>Keep scrolling to see how the menu remains fixed at the top of the page.</p>
<p>More content goes here...</p>
</div>
</section>
</body>
</html>
ব্যাখ্যা:
.navbar.is-fixed-top:position: fixedএর মাধ্যমে নেভিগেশন বারকে পেজের উপরের দিকে স্থির রাখা হয়েছে।top: 0; left: 0; width: 100%: এটি নেভিগেশন বারকে পুরো প্রস্থে ছড়িয়ে দিয়ে উপরের অংশে স্থির রাখে।body { padding-top: 70px; }: মেনু স্থির অবস্থানে থাকার কারণে, পেজের কন্টেন্টের উপরের অংশে কিছু প্যাডিং দিতে হয় যাতে কন্টেন্ট মেনুর নিচে চলে না যায়।
এই লেআউটটি একটি Fixed Menu তৈরি করার জন্য ব্যবহার করা হয়, যেখানে মেনু স্ক্রল করলেও পেজের উপরের অংশে আটকে থাকবে।
৩. সারাংশ
Bulma তে Sticky Navbar এবং Fixed Menu Layouts তৈরি করা সহজ এবং দ্রুত। Sticky Navbar ব্যবহার করে আপনি একটি নেভিগেশন বার তৈরি করতে পারেন যা পেজ স্ক্রল করার সময় উপরে আটকে থাকবে, এবং Fixed Menu ব্যবহার করে আপনি এমন একটি মেনু তৈরি করতে পারেন যা স্ক্রল করার সময় পেজের উপরের অংশে স্থির থাকবে। উভয় ক্ষেত্রেই position: sticky এবং position: fixed CSS প্রপার্টির সাহায্যে এই লেআউটগুলি তৈরি করা সম্ভব। Bulma এর সহায়তায় আপনি খুব সহজে এই লেআউটগুলো প্রয়োগ করে আপনার ওয়েবসাইটে উন্নত নেভিগেশন অভিজ্ঞতা তৈরি করতে পারবেন।
Read more
