Materialize CSS ওয়েব ডিজাইন ও ডেভেলপমেন্টের জন্য একটি জনপ্রিয় ফ্রেমওয়ার্ক। এর মধ্যে বিভিন্ন প্রি-বিল্ট কম্পোনেন্ট রয়েছে, যার মধ্যে Navbar এবং Sidebar (Sidenav) অত্যন্ত গুরুত্বপূর্ণ। এই দুটি উপাদান ওয়েবসাইটের নেভিগেশন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। এখানে আমরা Materialize এর Navbar এবং Sidebar (Sidenav) ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করবো।
Navbar (নেভিগেশন বার) কী?
Navbar হলো একটি উপাদান যা ওয়েবসাইট বা অ্যাপ্লিকেশনের উপরের অংশে থাকে এবং এটি ব্যবহারকারীদের বিভিন্ন পেজ বা সেকশনে নিয়ে যাওয়ার জন্য ব্যবহৃত হয়। Materialize CSS এ Navbar তৈরি করা সহজ, এবং এটি responsive (প্রতিক্রিয়াশীল) হয়, অর্থাৎ স্ক্রীনের আকার অনুযায়ী এটি নিজেকে অ্যাডজাস্ট করে।
Materialize Navbar তৈরি করা
Materialize CSS এ একটি Navbar তৈরি করার জন্য আপনাকে navbar ক্লাস ব্যবহার করতে হবে, এবং এর মধ্যে brand-logo, links, এবং অন্যান্য উপাদান যুক্ত করতে হবে।
Basic Navbar Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Navbar</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
nav: এটি Navbar উপাদান তৈরি করে।nav-wrapper: এটি Navbar এর কন্টেইনার যা লেআউট সঠিকভাবে সাজাতে সাহায্য করে।brand-logo: এখানে আপনার ওয়েবসাইটের লোগো বা নাম দেখানো হবে।ul: নেভিগেশন লিঙ্কগুলো একটি তালিকায় রাখা হয়েছে।right: এটি লিঙ্কগুলো ডানপাশে বসানোর জন্য ব্যবহার করা হয়।hide-on-med-and-down: এই ক্লাসটি ট্যাবলেট এবং মোবাইল স্ক্রীনে Navbar এর লিঙ্কগুলো লুকিয়ে রাখে, এবং একটি Sidenav প্রদর্শন করে।
Navbar এর Responsive Design
Materialize CSS এর Navbar স্বয়ংক্রিয়ভাবে responsive হয়, অর্থাৎ মোবাইল এবং ট্যাবলেট ডিভাইসে এটি একটি হ্যামবার্গার মেনু হিসেবে প্রদর্শিত হবে। এই মেনু ব্যবহারকারীর ক্লিকের মাধ্যমে প্রসারিত হবে। মোবাইলের জন্য Navbar এনিমেশন এবং স্টাইলিং সহজে পরিচালনা করা হয়।
Mobile Navbar Example (Hamburger Menu):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Navbar</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar with Hamburger Menu for Mobile -->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Sidenav for mobile -->
<ul class="sidenav" id="mobile-demo">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialize Sidenav -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var sidenav = document.querySelectorAll('.sidenav');
M.Sidenav.init(sidenav);
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
sidenav-trigger: এই ক্লাসটি মোবাইল স্ক্রীনে hamburger menu তৈরি করে।sidenav: এটি মোবাইল স্ক্রীনে সাইড ন্যাভিগেশন বারে রূপান্তরিত হয়।M.Sidenav.init(): এটি Materialize এর Sidenav প্লাগইন ইনিশিয়ালাইজ করে, যা মোবাইল স্ক্রীনে সাইডবারের এনিমেশন ও কার্যকারিতা তৈরি করে।
Sidebar (Sidenav) কী?
Sidebar (Sidenav) হলো একটি সাইড ন্যাভিগেশন বার যা সাধারণত ওয়েবসাইটের বাম অথবা ডান পাশের দিকে স্থাপন করা হয়। এটি ব্যবহারকারীদের পেজের বিভিন্ন সেকশনে দ্রুত যেতে সহায়তা করে। Materialize CSS এ Sidenav খুব সহজে তৈরি করা যায় এবং এটি responsive হয়।
Materialize Sidebar (Sidenav) তৈরি করা
Materialize CSS এ Sidenav তৈরি করতে আপনাকে sidenav ক্লাস এবং sidenav-trigger ব্যবহার করতে হবে।
Basic Sidenav Structure:
<!-- Sidenav Trigger -->
<a href="#" data-target="slide-out" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<!-- Sidenav -->
<ul id="slide-out" 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>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialize Sidenav -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var sidenav = document.querySelectorAll('.sidenav');
M.Sidenav.init(sidenav);
});
</script>
কোড ব্যাখ্যা:
sidenav-trigger: এটি একটি হ্যামবার্গার মেনু তৈরি করে, যা ব্যবহারকারীর ক্লিকের মাধ্যমে সাইডবার খুলবে।sidenav: এটি মূল সাইডবার তৈরি করে যেখানে ওয়েবসাইটের লিঙ্ক বা অপশনগুলো রাখা হয়।M.Sidenav.init(): এটি সাইডবারের এনিমেশন এবং কার্যকারিতা চালু করে।
উপসংহার
Materialize CSS এর Navbar এবং Sidebar (Sidenav) আপনাকে ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের নেভিগেশন খুবই সহজ এবং আকর্ষণীয়ভাবে তৈরি করতে সহায়তা করে। Navbar আপনার ওয়েবসাইটের উপরের অংশে থাকে, এবং এটি একটি hamburger menu আকারে মোবাইল ডিভাইসে প্রদর্শিত হয়। অন্যদিকে, Sidenav একটি সাইডবার যা ব্যবহারকারীদের বিভিন্ন সেকশনে দ্রুত নেভিগেট করতে সহায়তা করে। Materialize CSS এর মাধ্যমে এই উপাদানগুলো খুব সহজে তৈরি করা সম্ভব এবং এগুলো responsive থাকে, অর্থাৎ বিভিন্ন স্ক্রীন সাইজে স্বয়ংক্রিয়ভাবে সঠিকভাবে প্রদর্শিত হয়।
Materialize CSS এর Navbar বা নেভিগেশন বার হল ওয়েবসাইটের গুরুত্বপূর্ণ উপাদান, যা ব্যবহারকারীদের পেজের বিভিন্ন সেকশনে দ্রুত প্রবেশ করতে সাহায্য করে। Materialize CSS এ Navbar ডিজাইন করা সহজ এবং এর মাধ্যমে আপনি সুন্দর ও ব্যবহারকারী-বান্ধব নেভিগেশন তৈরি করতে পারেন। এখানে Materialize এর Navbar তৈরি করার বিভিন্ন পদ্ধতি এবং কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করা হলো।
Materialize Navbar তৈরি করার জন্য প্রাথমিক পদক্ষেপ
১. Basic Navbar:
Materialize CSS এ একটি বেসিক navbar তৈরি করতে navbar ক্লাস এবং অন্যান্য উপাদান ব্যবহার করা হয়। এটি একটি সাধারণ নেভিগেশন বার যা লোগো এবং বিভিন্ন লিঙ্কের মাধ্যমে তৈরি হয়।
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
এখানে:
- nav-wrapper ক্লাসটি নেভিগেশন বারকে একটি কন্টেইনার দেয়।
- brand-logo ক্লাসটি লোগো প্রদর্শনের জন্য ব্যবহৃত হয়।
- ul এর মধ্যে থাকা li এলিমেন্টগুলো বিভিন্ন লিঙ্ক তৈরি করে।
- right hide-on-med-and-down ক্লাসগুলো নেভিগেশন লিঙ্কগুলিকে ডানদিকে সেন্টার করে এবং মিডিয়াম সাইজ স্ক্রীনে অথবা ছোট স্ক্রীনে সেগুলো লুকিয়ে রাখে।
২. Navbar with Dropdown Menu:
আপনি যদি dropdown menu যুক্ত করতে চান, তবে Materialize CSS এর dropdown প্লাগইন ব্যবহার করতে পারেন। এই ফিচারটি সাধারণত মোবাইল বা ছোট স্ক্রীন ব্যবহারকারীদের জন্য উপযোগী হয়।
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Action 1</a></li>
<li><a href="#!">Action 2</a></li>
<li><a href="#!">Action 3</a></li>
</ul>
এখানে:
- dropdown-trigger ক্লাসটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়।
- data-target="dropdown1" এটিকে dropdown1 আইডি সঙ্গে সংযুক্ত করে।
- material-icons ক্লাসের মাধ্যমে ড্রপডাউন আইকন (এখানে arrow_drop_down) যুক্ত করা হয়েছে।
JavaScript: ড্রপডাউন মেনু কার্যকরী করতে আপনাকে নিচের JavaScript কোড যুক্ত করতে হবে:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, { hover: true });
});
</script>
৩. Navbar with Side Navigation:
যদি আপনি সাইড নেভিগেশন চান, তাহলে side-nav ব্যবহার করতে পারেন। এটি বিশেষভাবে মোবাইল ডিভাইসে উপকারী, যেখানে ব্যবহারকারী একক ক্লিকে পুরো নেভিগেশন দেখতে পারে।
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="sidenav" id="mobile-demo">
<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>
JavaScript: এই সাইড নেভিগেশন কার্যকরী করতে নিচের JavaScript কোডটি ব্যবহার করুন:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
</script>
৪. Fixed Navbar:
আপনি যদি আপনার নেভিগেশন বারটিকে fixed করতে চান, যাতে এটি স্ক্রোলিংয়ের সময়ও স্ক্রীনে স্থির থাকে, তাহলে আপনি fixed ক্লাস ব্যবহার করতে পারেন।
<nav class="fixed">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</nav>
এখানে:
- fixed ক্লাসটি নেভিগেশন বারের অবস্থান স্থির রাখে, যা স্ক্রোল করার সময়ও সেটি স্ক্রীনের উপরের দিকে থাকবে।
উপসংহার
Materialize CSS এর মাধ্যমে Navbar তৈরি করা খুবই সহজ এবং কাস্টমাইজযোগ্য। আপনি সাধারণ, ড্রপডাউন, সাইড নেভিগেশন, অথবা fixed navbar তৈরি করতে পারেন। Materialize এর প্রি-ডিফাইন্ড ক্লাস এবং JavaScript প্লাগইন ব্যবহার করে নেভিগেশন বারকে সহজে কার্যকরী এবং ইন্টারঅ্যাকটিভ করা সম্ভব। আপনি চাইলে সাইড নেভিগেশন, ড্রপডাউন মেনু, এবং অন্যান্য ফিচার যুক্ত করে আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।
Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা responsive (প্রতিক্রিয়াশীল) ডিজাইন তৈরিতে সহায়ক। এর মাধ্যমে আপনি সহজেই navbar (নেভিগেশন বার) এবং dropdown menu তৈরি করতে পারেন। এই উপাদানগুলি ওয়েবসাইটের ব্যবহারযোগ্যতা বাড়াতে সাহায্য করে এবং মোবাইল ডিভাইসেও সুন্দরভাবে কাজ করে।
নিচে Materialize CSS ব্যবহার করে responsive navbar এবং dropdown menu তৈরির প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হলো।
Responsive Navbar
Responsive Navbar এমন একটি নেভিগেশন বার যা ডিভাইসের স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে অভিযোজিত হয়। Materialize CSS এর মাধ্যমে আপনি খুব সহজে একটি responsive navbar তৈরি করতে পারবেন, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে কাজ করবে।
১. সাধারণ Navbar ডিজাইন
নেভিগেশন বার তৈরি করতে Materialize CSS-এর navbar ক্লাস ব্যবহার করা হয়। নিচে একটি সাধারণ navbar উদাহরণ দেয়া হলো:
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<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>
</div>
</nav>
এখানে:
- nav-wrapper: এটি navbar এর কনটেইনার।
- brand-logo: এটি ওয়েবসাইটের লোগো বা ব্র্যান্ড নাম।
- nav-mobile: এটি নেভিগেশন লিঙ্কের তালিকা, যা মোবাইল এবং বড় স্ক্রীনে ব্যবহৃত হবে।
- hide-on-med-and-down: এই ক্লাসটি ব্যবহার করা হয়েছে যাতে মাঝারি স্ক্রীন বা ছোট স্ক্রীনে নেভিগেশন বারটি দেখা না যায়।
২. Responsive Navbar - Mobile View
মোবাইল ডিভাইসে নেভিগেশন বারটি সাধারণত একটি hamburger menu (হ্যামবার্গার মেনু) হিসেবে প্রদর্শিত হয়। Materialize CSS-এ এই ফিচারটি সহজেই বাস্তবায়ন করা যায়।
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<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>
</div>
</nav>
<ul class="sidenav" id="mobile-nav">
<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>
এখানে:
- sidenav-trigger: এটি হ্যামবার্গার মেনু আইকন তৈরি করে।
- sidenav: এটি মেনু আইটেমের জন্য একটি স্লাইড আউট মেনু তৈরি করে যা মোবাইল ডিভাইসে প্রদর্শিত হয়।
৩. JavaScript Initialization
আপনি যেহেতু স্লাইড আউট মেনু ব্যবহার করছেন, তাই আপনাকে JavaScript ব্যবহার করে এটি ইনিশিয়ালাইজ করতে হবে।
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
</script>
Dropdown Menu
Dropdown menu ওয়েবসাইটে বা অ্যাপে ব্যবহৃত একটি ইন্টারঅ্যাকটিভ উপাদান, যা ইউজারকে বিভিন্ন অপশন প্রদান করে। Materialize CSS-এ dropdown menu তৈরি করা খুবই সহজ।
১. সাধারণ Dropdown Menu
<a class="dropdown-trigger btn" href="#!" data-target="dropdown1">Dropdown</a>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Option 1</a></li>
<li><a href="#!">Option 2</a></li>
<li><a href="#!">Option 3</a></li>
</ul>
এখানে:
- dropdown-trigger: এটি dropdown মেনু তে ক্লিক করার জন্য একটি বাটন তৈরি করে।
- dropdown-content: এখানে ড্রপডাউন মেনুর সমস্ত অপশন রাখা হয়।
২. Dropdown Menu Initialization
ড্রপডাউন মেনু সঠিকভাবে কাজ করতে JavaScript কোডে এটি ইনিশিয়ালাইজ করতে হবে।
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
</script>
৩. Dropdown Menu with Icons
ড্রপডাউন মেনুর আইটেমে Material Icons ব্যবহার করা সম্ভব। নিচে একটি উদাহরণ দেয়া হলো:
<a class="dropdown-trigger btn" href="#!" data-target="dropdown2">Dropdown with Icons</a>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#!"><i class="material-icons">home</i>Home</a></li>
<li><a href="#!"><i class="material-icons">info</i>About</a></li>
<li><a href="#!"><i class="material-icons">contact_mail</i>Contact</a></li>
</ul>
এখানে Material Icons ব্যবহার করা হয়েছে, যা ড্রপডাউন মেনু আইটেমের সাথে আইকন প্রদর্শন করবে।
উপসংহার
Materialize CSS এর responsive navbar এবং dropdown menu ওয়েব ডিজাইনে ব্যবহারকারীর অভিজ্ঞতাকে অনেক উন্নত করে। Navbar এর মাধ্যমে সহজ নেভিগেশন এবং dropdown menu এর মাধ্যমে উপকারী অপশনগুলি সরবরাহ করা যায়। Materialize CSS-এ এই উপাদানগুলি ইনস্টল এবং কাস্টমাইজ করা খুবই সহজ এবং এটি বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে কাজ করে।
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 ব্যবহার করে এটি বিভিন্নভাবে কনফিগার করতে পারেন, যেমন বাম বা ডান দিক থেকে সাইডনেভ খুলবে, ক্লিক করার পর সাইডনেভ বন্ধ হবে, বা ফিক্সড অবস্থায় থাকবে। এই বৈশিষ্ট্যগুলির মাধ্যমে আপনি একটি আধুনিক, ইন্টারঅ্যাকটিভ এবং ফাংশনাল সাইডনেভ তৈরি করতে পারবেন, যা আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।
Sidenav বা Side Navigation হলো একটি ওয়েব ডিজাইন উপাদান যা ইউজারদের জন্য নেভিগেশন সহজ করে। এটি সাধারণত ওয়েবসাইটের পাশে স্থাপন করা হয় এবং এটি ইউজারকে বিভিন্ন পৃষ্ঠা বা সেকশনে দ্রুত নেভিগেট করতে সহায়তা করে। Materialize CSS এ Sidenav তৈরি করা খুবই সহজ এবং এটি অনেক ফিচার ও কাস্টমাইজেশনের সুযোগ প্রদান করে। এখানে আমরা Fixed এবং Collapsible Sidenav নিয়ে আলোচনা করব।
Fixed Sidenav
Fixed Sidenav হলো একটি সাইডবার যা স্ক্রোল করার সময় স্ক্রীনে ফিক্সড অবস্থানে থাকে। অর্থাৎ, ব্যবহারকারী স্ক্রোল করলেও এটি স্ক্রীনের পাশে স্থির থাকে এবং তাদের নেভিগেশন সুবিধা প্রদান করে। এটি সাধারণত বড় স্ক্রীন (ডেস্কটপ) ডিজাইনগুলিতে ব্যবহৃত হয়।
Fixed Sidenav তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Sidenav Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Fixed Sidenav -->
<ul id="slide-out" class="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>
<!-- Main content -->
<div class="container">
<h1>Welcome to Our Website</h1>
<p>This is a fixed sidenav example.</p>
</div>
<!-- Materialize JS Link -->
<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>
<!-- Initialize sidenav -->
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
<ul id="slide-out" class="sidenav fixed">: এখানেsidenavক্লাস দিয়ে সাইড ন্যাভিগেশন তৈরি করা হয়েছে এবংfixedক্লাসটি সাইডবারটিকে স্ক্রীনের পাশে ফিক্সড অবস্থানে রাখে।<li><a href="#!">Home</a></li>: এখানে সাইডবারের ভিতরে প্রতিটি লিংক দেওয়া হয়েছে।$('.sidenav').sidenav();: এই স্ক্রিপ্টটি সাইডবারকে কার্যকর করতে ব্যবহার করা হয়।
Collapsible Sidenav
Collapsible Sidenav হলো এমন একটি সাইডবার যা ছোট স্ক্রীনে হ্যাম্বারবার আইকন ব্যবহার করে কোলোপস (collapse) করা যায় এবং বড় স্ক্রীনে এটি স্বয়ংক্রিয়ভাবে এক্সপ্যান্ডেড (expanded) থাকে। এটি সাধারণত মোবাইল এবং ট্যাবলেট ডিজাইনগুলিতে ব্যবহৃত হয়।
Collapsible Sidenav তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Sidenav Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Collapsible Sidenav -->
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="mobile-nav" 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>
<!-- Main content -->
<div class="container">
<h1>Welcome to Our Website</h1>
<p>This is a collapsible sidenav example.</p>
</div>
<!-- Materialize JS Link -->
<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>
<!-- Initialize sidenav -->
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
<a href="#" data-target="mobile-nav" class="sidenav-trigger">: এই লিঙ্কটি একটি হ্যাম্বারবার আইকন প্রদর্শন করে, যা ক্লিক করলে সাইডবারটি খুলবে বা বন্ধ হবে।<ul id="mobile-nav" class="sidenav">: এখানেsidenavক্লাসের মাধ্যমে কলাপসিবল সাইডবার তৈরি করা হয়েছে, যা ছোট স্ক্রীনে হ্যাম্বারবার আইকনের মাধ্যমে খুলবে।$('.sidenav').sidenav();: এই স্ক্রিপ্টটি সাইডবারটিকে কার্যকর করতে ব্যবহৃত হয়, বিশেষ করে মোবাইল ডিভাইসে।
Fixed এবং Collapsible Sidenav এর মধ্যে পার্থক্য
- Fixed Sidenav: এটি ডেক্সটপ স্ক্রীনে স্থির অবস্থায় থাকে এবং স্ক্রোল করার সময়ও পরিবর্তন হয় না।
- Collapsible Sidenav: এটি সাধারণত ছোট স্ক্রীনে ব্যবহার করা হয় এবং একটি হ্যাম্বারবার আইকন দিয়ে সাইডবারটি কোলাপস (collapse) এবং এক্সপ্যান্ড (expand) করা যায়।
উপসংহার
Fixed Sidenav এবং Collapsible Sidenav এর মধ্যে পার্থক্য হল ব্যবহারকারী ইন্টারফেসে এর অবস্থান এবং স্ক্রীন সাইজের ওপর ভিত্তি করে এর আচরণ। Materialize CSS ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই সাইডবার তৈরি করতে পারেন, যা ইউজার ইন্টারফেসকে আরও ব্যবহারযোগ্য এবং আকর্ষণীয় করে তোলে।
Read more
