Bulma CSS ফ্রেমওয়ার্কে dropdown উপাদানটি সহজেই তৈরি করা যায়। Bulma ড্রপডাউন মেনু প্রাথমিকভাবে একটি বাটন অথবা লিঙ্ক ক্লিক করলে একটি মেনু বা তালিকা প্রদর্শন করে। আপনি সহজে dropdown এর অবস্থান কাস্টমাইজ করতে পারেন এবং প্রয়োজনে অ্যানিমেশন যুক্ত করতে পারেন।
এই গাইডে আমরা Dropdown এর অবস্থান এবং অ্যানিমেশন কিভাবে ব্যবহার করতে হয় তা বিস্তারিতভাবে দেখব।
১. Dropdown এর অবস্থান (Positioning)
Bulma তে ড্রপডাউন উপাদানটি প্রাথমিকভাবে dropdown ক্লাসের মাধ্যমে তৈরি হয়। ড্রপডাউন মেনুর অবস্থান কাস্টমাইজ করার জন্য আপনি is-right, is-left, is-up, এবং is-bottom ক্লাস ব্যবহার করতে পারেন।
উদাহরণ: ড্রপডাউন মেনুর অবস্থান
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
এখানে is-right ক্লাস ব্যবহার করা হয়েছে, যা ড্রপডাউন মেনুকে ডান দিকে স্থাপন করবে। Bulma তে ড্রপডাউন মেনুর জন্য পূর্বনির্ধারিত অবস্থানগুলি হলো:
is-right: ড্রপডাউন মেনুকে ডান দিকে স্থাপন করবে।is-left: ড্রপডাউন মেনুকে বাম দিকে স্থাপন করবে।is-up: ড্রপডাউন মেনুকে উপরের দিকে স্থাপন করবে।is-bottom: ড্রপডাউন মেনুকে নিচের দিকে স্থাপন করবে।
উদাহরণ: বাম এবং উপরের দিকে ড্রপডাউন
<div class="dropdown is-left is-up">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
এখানে is-left is-up ক্লাস ব্যবহার করা হয়েছে, যার ফলে ড্রপডাউন মেনু বাম এবং উপরের দিকে স্থাপন করা হয়েছে।
২. Dropdown এর অ্যানিমেশন (Animation)
Bulma ড্রপডাউনে ডিফল্ট অ্যানিমেশন প্রভাব প্রদান করে না, তবে আপনি CSS অ্যানিমেশন ব্যবহার করে মেনুর প্রদর্শন এবং গোপন করার সময় অ্যানিমেশন যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ড্রপডাউন মেনুর fade-in এবং fade-out অ্যানিমেশন প্রয়োগ করা হয়েছে।
উদাহরণ: Dropdown এ অ্যানিমেশন যোগ করা
<head>
<style>
.dropdown-menu {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.dropdown.is-active .dropdown-menu {
display: block;
opacity: 1;
}
</style>
</head>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
<script>
// JavaScript to toggle dropdown visibility
const dropdownTrigger = document.querySelector('.dropdown-trigger');
const dropdown = document.querySelector('.dropdown');
dropdownTrigger.addEventListener('click', function() {
dropdown.classList.toggle('is-active');
});
</script>
এখানে, display এবং opacity এর মাধ্যমে আমরা ড্রপডাউন মেনুকে fade-in এবং fade-out অ্যানিমেশন দিয়েছি। is-active ক্লাস যোগ বা সরানোর মাধ্যমে মেনু প্রদর্শিত বা গোপন হয়।
opacity: 0: ড্রপডাউন মেনুকে অদৃশ্য করে দেয়।opacity: 1: ড্রপডাউন মেনুকে দৃশ্যমান করে তোলে।transition: opacity 0.3s ease-in-out;: অ্যানিমেশন প্রয়োগের সময় একটি ধীর এবং মসৃণ ট্রানজিশন তৈরি করে।
৩. Custom Dropdown Animation
আপনি আরো কাস্টম অ্যানিমেশন তৈরি করতে পারেন, যেমন ড্রপডাউন মেনুর মধ্যে slide-down বা slide-up অ্যানিমেশন। এটি করতে transform এবং translateY প্রপার্টি ব্যবহার করা যেতে পারে।
উদাহরণ: Slide-down অ্যানিমেশন
<head>
<style>
.dropdown-menu {
display: none;
transform: translateY(-10px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.dropdown.is-active .dropdown-menu {
display: block;
transform: translateY(0);
opacity: 1;
}
</style>
</head>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
<script>
// JavaScript to toggle dropdown visibility
const dropdownTrigger = document.querySelector('.dropdown-trigger');
const dropdown = document.querySelector('.dropdown');
dropdownTrigger.addEventListener('click', function() {
dropdown.classList.toggle('is-active');
});
</script>
এখানে transform: translateY(-10px) এবং opacity: 0 প্রাথমিক অবস্থায় ড্রপডাউন মেনুকে কিছুটা উপরে এবং অদৃশ্য করে দেয়। যখন is-active ক্লাস যোগ করা হয়, তখন translateY(0) এবং opacity: 1 দ্বারা মেনু স্লাইড ডাউন হয়ে দৃশ্যমান হয়।
সারাংশ
Bulma তে Dropdown এর অবস্থান এবং অ্যানিমেশন কাস্টমাইজ করা খুবই সহজ। আপনি is-right, is-left, is-up, এবং is-bottom ক্লাস ব্যবহার করে ড্রপডাউন মেনুর অবস্থান নিয়ন্ত্রণ করতে পারেন। এছাড়া, CSS এবং JavaScript ব্যবহার করে আপনি ড্রপডাউন মেনুর জন্য fade, slide, বা অন্যান্য অ্যানিমেশন যোগ করতে পারেন। এটি আপনার ওয়েব পেজে একটি আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সহায়তা করবে।
Read more
