Sidenav হলো একটি স্লাইড আউট মেনু যা সাধারণত ওয়েবসাইট বা অ্যাপ্লিকেশনের একটি সাইডে থাকে এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য বিভিন্ন অপশন বা লিঙ্ক প্রদান করে। Materialize CSS একটি প্রস্তুতকৃত Sidenav কম্পোনেন্ট সরবরাহ করে, যা খুব সহজেই কনফিগার এবং কাস্টমাইজ করা যায়। এটি একটি জনপ্রিয় এবং শক্তিশালী UI উপাদান যা ওয়েবসাইটে সাইড মেনু হিসেবে ব্যবহৃত হয়।
এখানে Materialize CSS-এ Sidenav তৈরি এবং কনফিগার করার ধাপগুলো বিস্তারিতভাবে আলোচনা করা হলো।
Sidenav তৈরি করা
Sidenav তৈরি করতে Materialize CSS আপনাকে সহজ একটি HTML কাঠামো প্রদান করে। এটি একটি স্লাইড আউট মেনু হিসেবে কাজ করে, যা সাইটের মূল কনটেন্টের পাশে থাকে এবং ব্যবহারকারী মেনুটি খুলতে পারে। এটি JavaScript এর মাধ্যমে কন্ট্রোল করা হয়।
১. Sidenav HTML স্ট্রাকচার:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Sidenav Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- Sidenav Trigger -->
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<!-- Sidenav Structure -->
<ul id="mobile-demo" class="sidenav">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Services</a></li>
<li><a href="#!">Contact</a></li>
</ul>
<script>
// Initialize Sidenav
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
</body>
</html>
এখানে:
<a href="#" data-target="mobile-demo" class="sidenav-trigger">: এটি সাইডনেভ মেনুকে ট্রিগার করবে। যখন ব্যবহারকারী এখানে ক্লিক করবেন, তখন সাইডনেভ মেনুটি প্রদর্শিত হবে।<ul id="mobile-demo" class="sidenav">: এটি সাইডনেভের কন্টেন্ট, যেখানে বিভিন্ন লিঙ্ক রয়েছে। এখানেid="mobile-demo"এবংclass="sidenav"ব্যবহার করা হয়েছে।$('.sidenav').sidenav();: এটি সাইডনেভের জাভাস্ক্রিপ্ট ইনিশিয়ালাইজেশন।
২. Sidenav টগল বাটন:
এখানে <a href="#"> এর মাধ্যমে সাইডনেভ মেনু খোলার জন্য একটি বাটন দেওয়া হয়েছে, যা ক্লিক করার পর সাইডনেভ প্যানেলটি উপস্থাপন করবে। sidenav-trigger ক্লাসটি ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য এটি ট্রিগার করবে।
Sidenav কনফিগার করা
Materialize CSS সাইডনেভের জন্য কিছু কনফিগারেশন প্রদান করে, যা বিভিন্ন পদ্ধতিতে কাস্টমাইজ করা যেতে পারে। এখানে কিছু সাধারণ কনফিগারেশন অপশন এবং তাদের ব্যবহার:
১. এনিমেশন এবং মেনুর আকার কনফিগারেশন:
Materialize CSS এর সাইডনেভ মেনুতে বিভিন্ন ধরনের এনিমেশন এবং আকার কনফিগার করার জন্য বিভিন্ন অপশন থাকে, যেমন:
- Edge (এলাকা): সাইডনেভটি স্ক্রীনের কোথায় থাকবে তা নির্ধারণ করা।
left(বাম): সাইডনেভ বাম দিক থেকে খোলে।right(ডান): সাইডনেভ ডান দিক থেকে খোলে।
- Close On Click: সাইডনেভটি স্বয়ংক্রিয়ভাবে বন্ধ হবে যখন ব্যবহারকারী কোনো লিঙ্কে ক্লিক করবেন।
<script>
$(document).ready(function(){
$('.sidenav').sidenav({
edge: 'left', // সাইডনেভ বাম দিক থেকে খোলা হবে
draggable: true, // সাইডনেভটিকে ড্র্যাগ করা যাবে
closeOnClick: true // ক্লিক করার পর সাইডনেভ বন্ধ হবে
});
});
</script>
২. সাইডনেভের জন্য নির্দিষ্ট স্টাইলিং:
Materialize CSS সাইডনেভের জন্য কিছু স্টাইলিং প্রদান করে, তবে আপনি সেগুলোর উপর কাস্টম স্টাইলও দিতে পারেন। উদাহরণস্বরূপ:
/* সাইডনেভের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা */
.sidenav {
background-color: #333;
}
/* সাইডনেভের আইটেমগুলোর রঙ পরিবর্তন করা */
.sidenav li a {
color: #fff;
}
৩. ফিক্সড সাইডনেভ:
আপনি চাইলে সাইডনেভকে ফিক্সড (স্থির) রাখতে পারেন, যাতে এটি স্ক্রল করার পরও স্ক্রীনের পাশে স্থির থাকে। এর জন্য sidenav-fixed ক্লাস ব্যবহার করতে হয়।
<ul id="slide-out" class="sidenav sidenav-fixed">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Services</a></li>
<li><a href="#!">Contact</a></li>
</ul>
৪. Multiple Sidenav:
আপনি একাধিক সাইডনেভ মেনু তৈরি করতে পারেন। যেমন একটি মোবাইলের জন্য এবং একটি ডেস্কটপের জন্য আলাদা সাইডনেভ তৈরি করা।
<ul id="desktop-demo" class="sidenav sidenav-fixed">
<li><a href="#!">Dashboard</a></li>
<li><a href="#!">Profile</a></li>
<li><a href="#!">Messages</a></li>
</ul>
<ul id="mobile-demo" class="sidenav">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Contact</a></li>
</ul>
উপসংহার
Sidenav হল একটি গুরুত্বপূর্ণ এবং জনপ্রিয় UI কম্পোনেন্ট যা অনেক ওয়েবসাইট এবং অ্যাপে ব্যবহৃত হয়। Materialize CSS এ সাইডনেভ তৈরি এবং কনফিগার করা খুবই সহজ এবং কাস্টমাইজযোগ্য। আপনি HTML, CSS, এবং JavaScript ব্যবহার করে এটি বিভিন্নভাবে কনফিগার করতে পারেন, যেমন বাম বা ডান দিক থেকে সাইডনেভ খুলবে, ক্লিক করার পর সাইডনেভ বন্ধ হবে, বা ফিক্সড অবস্থায় থাকবে। এই বৈশিষ্ট্যগুলির মাধ্যমে আপনি একটি আধুনিক, ইন্টারঅ্যাকটিভ এবং ফাংশনাল সাইডনেভ তৈরি করতে পারবেন, যা আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।
Read more
