Material Design Lite (MDL) একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি। MDL-এর মাধ্যমে আপনি খুব সহজেই মেনু উপাদান তৈরি এবং কাস্টমাইজ করতে পারেন। মেনু সাধারণত ওয়েব পেজের নেভিগেশন, কন্টেন্ট এক্সেস এবং ইউজার ইন্টারঅ্যাকশন ব্যবস্থাপনা করার জন্য ব্যবহৃত হয়।
এই টিউটোরিয়ালে, আমরা MDL-এ মেনু তৈরি এবং কাস্টম স্টাইল ও লেআউট সম্পর্কে আলোচনা করব। এখানে আমরা দেখব কিভাবে MDL ব্যবহার করে কাস্টম মেনু তৈরি করা যায় যা আপনার ওয়েবসাইটের ডিজাইনকে আরো কার্যকরী ও আকর্ষণীয় করবে।
MDL মেনু: বেসিক স্ট্রাকচার
MDL-এ মেনু তৈরি করতে, mdl-menu এবং mdl-menu__item ক্লাস ব্যবহার করা হয়। MDL-এ মেনু দুটি ভাগে বিভক্ত হতে পারে: ড্রপডাউন মেনু এবং সাইডবার মেনু।
১. ড্রপডাউন মেনু
ড্রপডাউন মেনু একটি সাধারণ মেনু যেখানে এক বা একাধিক আইটেম থাকে এবং এগুলি ক্লিক করলে মেনুটি নিচে প্রসারিত হয়।
উদাহরণ: ড্রপডাউন মেনু
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-menu" for="sample-menu">
Open Menu
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left" id="sample-menu">
<li class="mdl-menu__item">Item 1</li>
<li class="mdl-menu__item">Item 2</li>
<li class="mdl-menu__item">Item 3</li>
</ul>
এখানে:
- mdl-button: বাটন ক্লাস যা মেনুটি ট্রিগার করবে।
- mdl-js-menu: এটি মেনুর মূল ক্লাস।
- mdl-menu__item: মেনুর প্রতিটি আইটেম।
২. সাইডবার মেনু
সাইডবার মেনু সাধারণত স্ক্রীনের বাম বা ডান দিকের দিকে স্লাইড করে আসে। এটি প্রধানত ওয়েব অ্যাপ্লিকেশন বা মোবাইল ডিজাইনে ব্যবহৃত হয়।
উদাহরণ: সাইডবার মেনু
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Link 1</a>
<a class="mdl-navigation__link" href="#">Link 2</a>
<a class="mdl-navigation__link" href="#">Link 3</a>
</nav>
</div>
এখানে:
- mdl-layout__drawer: সাইডবারের জন্য ব্যবহৃত ক্লাস।
- mdl-navigation: সাইডবার মেনুর আইটেমগুলো সাজানোর জন্য ব্যবহৃত ক্লাস।
- mdl-navigation__link: সাইডবারের প্রতিটি লিঙ্ক।
MDL মেনুর কাস্টম স্টাইলিং
MDL মেনুর ডিজাইন এবং আউটপুট কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন। MDL-এ ডিফল্ট স্টাইলের বাইরে যাওয়া এবং নিজের স্টাইল প্রয়োগ করার জন্য আপনি custom CSS ব্যবহার করতে পারবেন।
১. ড্রপডাউন মেনুর কাস্টম স্টাইল
ড্রপডাউন মেনুর জন্য আপনি মেনুর পেছনের রঙ, আইটেমের রঙ, হোভার ইফেক্ট ইত্যাদি কাস্টমাইজ করতে পারবেন।
উদাহরণ: কাস্টম স্টাইলেড ড্রপডাউন মেনু
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-menu" for="custom-menu">
Open Custom Menu
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left" id="custom-menu">
<li class="mdl-menu__item">Custom Item 1</li>
<li class="mdl-menu__item">Custom Item 2</li>
<li class="mdl-menu__item">Custom Item 3</li>
</ul>
<style>
.mdl-menu__item {
background-color: #f4f4f4;
}
.mdl-menu__item:hover {
background-color: #2196F3;
color: white;
}
.mdl-menu {
border-radius: 10px;
}
</style>
এখানে:
- background-color: মেনু আইটেমের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা হয়েছে।
- :hover: হোভার ইফেক্টের জন্য আলাদা স্টাইল ব্যবহার করা হয়েছে।
২. সাইডবার মেনুর কাস্টম স্টাইল
MDL সাইডবার মেনুর জন্য আপনি বিভিন্ন স্টাইল যেমন ব্যাকগ্রাউন্ড রঙ, ফন্ট সাইজ, প্যাডিং ইত্যাদি কাস্টমাইজ করতে পারবেন।
উদাহরণ: কাস্টম স্টাইলেড সাইডবার মেনু
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Link 1</a>
<a class="mdl-navigation__link" href="#">Link 2</a>
<a class="mdl-navigation__link" href="#">Link 3</a>
</nav>
</div>
<style>
.mdl-layout__drawer {
background-color: #333;
color: white;
}
.mdl-navigation__link {
font-size: 18px;
padding: 10px;
color: white;
}
.mdl-navigation__link:hover {
background-color: #2196F3;
}
</style>
এখানে:
- background-color: সাইডবারের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা হয়েছে।
- font-size: লিঙ্কগুলোর ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
- hover effect: হোভার ইফেক্টে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
MDL মেনুর লেআউট কাস্টমাইজেশন
MDL-এ মেনুর লেআউট কাস্টমাইজ করতে, আপনি grid system ব্যবহার করতে পারেন। এর মাধ্যমে আপনি একাধিক মেনু আইটেমকে সুন্দরভাবে সাজাতে পারবেন এবং আপনার ওয়েবসাইটের রেসপন্সিভ ডিজাইন নিশ্চিত করতে পারবেন।
১. রেসপন্সিভ মেনু লেআউট
MDL গ্রিড সিস্টেম ব্যবহার করে আপনি রেসপন্সিভ মেনু লেআউট তৈরি করতে পারবেন, যাতে মেনুটি মোবাইল এবং ডেস্কটপে সুন্দরভাবে প্রদর্শিত হয়।
উদাহরণ: রেসপন্সিভ মেনু লেআউট
<div class="mdl-layout__drawer">
<nav class="mdl-navigation mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<a class="mdl-navigation__link" href="#">Home</a>
</div>
<div class="mdl-cell mdl-cell--12-col">
<a class="mdl-navigation__link" href="#">About</a>
</div>
<div class="mdl-cell mdl-cell--12-col">
<a class="mdl-navigation__link" href="#">Contact</a>
</div>
</nav>
</div>
এখানে:
- mdl-grid: গ্রিড সিস্টেম যা মেনু আইটেমগুলোকে সুন্দরভাবে সাজিয়ে রাখবে।
- mdl-cell mdl-cell--12-col: প্রতিটি মেনু আইটেমকে ১২ কলাম সাইজে সাজানো হয়েছে।
সারাংশ
Material Design Lite (MDL) এর মাধ্যমে মেনু তৈরি এবং কাস্টম স্টাইলিং করা অত্যন্ত সহজ। আপনি ড্রপডাউন মেনু এবং সাইডবার মেনু তৈরি করতে পারেন, এবং প্রতিটি মেনুর আইটেমের জন্য কাস্টম স্টাইলিং প্রয়োগ করতে পারেন। MDL এর গ্রিড সিস্টেম ব্যবহার করে আপনি রেসপন্সিভ মেনু লেআউটও তৈরি করতে পারবেন, যা মোবাইল এবং ডেস্কটপে সুন্দরভাবে প্রদর্শিত হবে। MDL মেনু উপাদানগুলি ওয়েব ডিজাইনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
