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-এ এই উপাদানগুলি ইনস্টল এবং কাস্টমাইজ করা খুবই সহজ এবং এটি বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে কাজ করে।
