Material Design Lite (MDL) ব্যবহার করে responsive navbar এবং side navigation তৈরি করা খুবই সহজ এবং আকর্ষণীয়। MDL এর কম্পোনেন্টগুলো আপনাকে আধুনিক, ফ্লুইড এবং ইন্টারঅ্যাকটিভ ন্যাভিগেশন তৈরি করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL ব্যবহার করে একটি responsive navbar এবং side navigation তৈরি করা যায়।
Responsive Navbar তৈরি করা
Navbar বা ন্যাভিগেশন বার একটি ওয়েবসাইটের গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীকে সহজে বিভিন্ন পৃষ্ঠায় নিয়ে যেতে সহায়তা করে। MDL এর মাধ্যমে, আমরা খুব সহজেই একটি responsive navbar তৈরি করতে পারি যা মোবাইল ডিভাইসে সঠিকভাবে কাজ করবে।
উদাহরণ: Responsive Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Navbar -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">MDL Navbar</span>
<!-- Navigation -->
<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>
<!-- Main Content -->
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</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: এটি মূলভাবে layout তৈরি করতে ব্যবহৃত হয়।
- mdl-layout__header: এটি navbar এর header অংশ।
- mdl-layout__header-row: navbar এর প্রতিটি row তৈরি করতে ব্যবহৃত হয়।
- mdl-navigation: এটি ন্যাভিগেশন লিঙ্কগুলোর জন্য ব্যবহৃত হয়।
- mdl-navigation__link: প্রতিটি লিঙ্কের জন্য ব্যবহৃত ক্লাস।
এটি একটি fixed header তৈরি করে, যেখানে navbar পুরোপুরি স্ক্রীনের উপরে অবস্থান করে এবং ব্যবহারকারীর স্ক্রোল করার সময়ও এটি দৃশ্যমান থাকে।
Side Navigation তৈরি করা
Side Navigation বা সাইডবার একটি গুরুত্বপূর্ণ উপাদান, যা ওয়েবসাইটে অতিরিক্ত ন্যাভিগেশন লিঙ্ক, ফিচার, বা কন্টেন্ট প্রদান করতে ব্যবহৃত হয়। MDL এর মাধ্যমে সাইডবার তৈরি করা খুবই সহজ এবং এটি responsive হয়, অর্থাৎ মোবাইল ডিভাইসে এটি সঠিকভাবে কাজ করবে।
উদাহরণ: Side Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Side Navigation -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">MDL Side Nav</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<!-- Side Drawer -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">MDL 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>
<!-- Main Content -->
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</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--fixed-drawer: এই ক্লাসটি সাইডবার তৈরি করতে ব্যবহৃত হয়।
- mdl-layout__drawer: এটি সাইড ন্যাভিগেশন বা সাইডবারের জন্য ব্যবহৃত হয়।
- mdl-navigation__link: এখানে বিভিন্ন ন্যাভিগেশন লিঙ্ক তৈরি করা হয়েছে।
এটি একটি responsive side navigation তৈরি করে, যেখানে মোবাইল ডিভাইসে সাইডবারটি টগলযোগ্য হয়ে ওঠে। আপনি যখন সাইডবারে ক্লিক করবেন, এটি খোলা বা বন্ধ হবে।
সারাংশ
MDL ব্যবহার করে আপনি খুব সহজেই responsive navbar এবং side navigation তৈরি করতে পারেন। MDL এর ন্যাভিগেশন কম্পোনেন্টগুলো রেসপন্সিভ, আধুনিক এবং ব্যবহারকারী-বান্ধব হয়। MDL এর navbar একটি fixed header হিসেবে কাজ করে এবং side navigation ব্যবহারকারীদের জন্য অতিরিক্ত ন্যাভিগেশন সুবিধা প্রদান করে। MDL এর কম্পোনেন্টগুলোর মধ্যে JavaScript কার্যকারিতা এবং Ripple Effect থাকে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করে তোলে।
Read more
