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 প্লাগইন ব্যবহার করে নেভিগেশন বারকে সহজে কার্যকরী এবং ইন্টারঅ্যাকটিভ করা সম্ভব। আপনি চাইলে সাইড নেভিগেশন, ড্রপডাউন মেনু, এবং অন্যান্য ফিচার যুক্ত করে আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।
Read more
