Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে একটি সহজ এবং কার্যকরী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। এর মধ্যে একটি গুরুত্বপূর্ণ উপাদান হল নেভিগেশন বার (Navigation Bar) এবং মেনু (Menu), যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠায় সহজে চলাচল করার জন্য ব্যবহার করা হয়। MDL এর মাধ্যমে আপনি অত্যন্ত আকর্ষণীয়, রেসপন্সিভ এবং ইউজার-বান্ধব নেভিগেশন বার এবং মেনু তৈরি করতে পারেন।
এই টিউটোরিয়ালে আমরা MDL এর নেভিগেশন বার এবং মেনু ব্যবস্থাপনা কিভাবে করতে হয় তা বিস্তারিতভাবে আলোচনা করব।
MDL নেভিগেশন বার
নেভিগেশন বার একটি ওয়েব পেজের সবচেয়ে গুরুত্বপূর্ণ উপাদানগুলোর মধ্যে একটি, যা ব্যবহারকারীদের সাইটের বিভিন্ন অংশে দ্রুত ও সহজভাবে নেভিগেট করতে সহায়তা করে। MDL নেভিগেশন বার খুবই সিম্পল এবং কাস্টমাইজেবল। এটি একটি ফ্ল্যাট ডিজাইন এবং রেসপন্সিভ ডিজাইন ব্যবহার করে, যা বিভিন্ন স্ক্রীন সাইজে ঠিকমতো কাজ করে।
MDL নেভিগেশন বার তৈরি করা
MDL এর মাধ্যমে একটি সিম্পল নেভিগেশন বার তৈরি করতে আপনি mdl-layout__header এবং mdl-layout__drawer ক্লাস ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Navigation Bar Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- MDL Layout -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header (Navigation Bar) -->
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">My Website</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Services</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
</div>
</header>
<!-- Content -->
<main class="mdl-layout__content">
<div class="page-content">
<!-- Page content goes here -->
<h1>Welcome to My Website</h1>
<p>This is a sample page demonstrating an MDL navigation bar.</p>
</div>
</main>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
উপাদান বিশ্লেষণ:
- mdl-layout: এটি MDL লেআউটের মূল ক্লাস, যা পেজের লেআউটের কাঠামো তৈরি করে।
- mdl-layout__header: এটি হেডার সেকশন, যেখানে নেভিগেশন বার থাকে।
- mdl-layout__header-row: নেভিগেশন বার এবং শিরোনাম এলিমেন্টকে একটি লাইনে সাজানোর জন্য ব্যবহৃত হয়।
- mdl-navigation: এটি নেভিগেশন লিঙ্কগুলোর জন্য ব্যবহৃত হয়।
এটি একটি সাধারণ সোজাসাপ্টা নেভিগেশন বার তৈরি করবে, যেখানে "Home", "About", "Services", এবং "Contact" লিঙ্ক থাকবে।
MDL সাইড নেভিগেশন (Drawer) মেনু
MDL এ Drawer বা সাইড নেভিগেশন মেনু তৈরি করতে mdl-layout__drawer এবং mdl-layout__obfuscator ক্লাস ব্যবহার করা হয়। এটি একটি সাইড বার মেনু যা ডিভাইসের স্ক্রীন সাইজের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে ডোক বা স্লাইড ইন/আউট হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Drawer Menu Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- MDL Layout -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<!-- Header (Navigation Bar) -->
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">My Website</span>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-js-button mdl-button--icon" id="menu-toggle">
<i class="material-icons">menu</i>
</button>
</div>
</header>
<!-- Drawer (Side Menu) -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Menu</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Services</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
</div>
<!-- Content -->
<main class="mdl-layout__content">
<div class="page-content">
<!-- Page content goes here -->
<h1>Welcome to My Website</h1>
<p>This is a sample page demonstrating an MDL drawer menu.</p>
</div>
</main>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
// Toggle the drawer visibility
const menuToggle = document.getElementById('menu-toggle');
menuToggle.addEventListener('click', function() {
const drawer = document.querySelector('.mdl-layout__drawer');
drawer.classList.toggle('is-visible');
});
</script>
</body>
</html>
উপাদান বিশ্লেষণ:
- mdl-layout__drawer: এটি সাইড নেভিগেশন বা drawer মেনুর জন্য ব্যবহৃত ক্লাস। এটি স্ক্রীনের বাম পাশে স্লাইড আউট হয়।
- mdl-layout__header: হেডার সেকশন, যা নেভিগেশন এবং মেনু বাটন ধারণ করে।
- mdl-navigation: নেভিগেশন লিঙ্কগুলো ধারণ করে, যা সাইড নেভিগেশন মেনুর ভিতরে থাকে।
- mdl-button--icon: মেনু বাটন তৈরির জন্য ব্যবহৃত ক্লাস।
এটি একটি সাইড নেভিগেশন মেনু তৈরি করবে, যা স্ক্রীন সাইজ অনুযায়ী টগল করা যাবে। ব্যবহারকারী "menu" আইকনে ক্লিক করলে সাইড নেভিগেশন মেনু স্লাইড ইন বা আউট হবে।
সারাংশ
MDL (Material Design Lite) এর মাধ্যমে নেভিগেশন বার এবং মেনু ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। MDL এর নেভিগেশন বার ব্যবহার করে আপনি একটি সোজাসাপ্টা এবং রেসপন্সিভ নেভিগেশন বার তৈরি করতে পারেন, যা ওয়েবসাইটে ব্যবহারকারীকে দ্রুত নেভিগেট করতে সহায়তা করে। Drawer (Side Navigation Menu) ব্যবহার করে একটি আধুনিক সাইড মেনু তৈরি করতে পারেন, যা ডেস্কটপ এবং মোবাইল স্ক্রীনে ঠিকভাবে কাজ করে। MDL এর এই কম্পোনেন্টগুলো কাস্টমাইজ করা এবং সহজেই ইন্টিগ্রেট করা যায়।
Read more
