Drop-down মেনু এবং Sub-menu ব্যবস্থাপনা

Material Design Lite (MDL) একটি লাইটওয়েট ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL এ Drop-down মেনু এবং Sub-menu ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। এটি ব্যবহারকারীদের ইন্টারফেসে মেনু আইটেমের তালিকা প্রদর্শন করতে সহায়তা করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। এই টিউটোরিয়ালে, আমরা MDL ব্যবহার করে Drop-down মেনু এবং Sub-menu তৈরি এবং কাস্টমাইজ করার পদ্ধতি আলোচনা করব।

MDL এর Drop-down মেনু তৈরি করা

MDL এ Drop-down মেনু তৈরি করতে mdl-menu এবং mdl-js-menu ক্লাস ব্যবহার করা হয়। একটি Drop-down মেনু সাধারণত একটি বাটনের সাথে সংযুক্ত থাকে, যার উপর ক্লিক করলে মেনু আইটেমগুলি প্রদর্শিত হয়।

Drop-down মেনুর সাধারণ কাঠামো

<!-- ট্রিগার বাটন -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-menu" for="sample-menu">
  Drop-down Menu
</button>

<!-- মেনু -->
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left" for="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 JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

• mdl-button mdl-js-button mdl-button--raised: এটি Drop-down মেনু ট্রিগার করার জন্য একটি raised বাটন তৈরি করবে।
• mdl-menu mdl-js-menu mdl-menu--bottom-left: এটি মেনু কম্পোনেন্টের জন্য প্রয়োজনীয় ক্লাস। এখানে mdl-menu--bottom-left ক্লাস ব্যবহার করা হয়েছে, যা মেনুটি বাটনের নিচে এবং বাম দিকে প্রদর্শিত করবে।
• mdl-menu__item: মেনু আইটেমগুলি যা ব্যবহারকারী নির্বাচন করতে পারে।

Drop-down মেনুর কার্যকারিতা:

• বাটনে ক্লিক করলে Drop-down মেনুটি উপস্থিত হবে এবং মেনু আইটেমগুলি প্রদর্শিত হবে।
• MDL-এর mdl-js-menu ক্লাস স্বয়ংক্রিয়ভাবে মেনু চালু এবং বন্ধ করার কার্যকারিতা পরিচালনা করবে।

MDL এর Sub-menu তৈরি করা

MDL এ Sub-menu তৈরি করতে, আমরা সাধারণত nested m-menu ব্যবহার করি, যেখানে একটি মেনুর মধ্যে অন্য মেনু আইটেম যুক্ত করা হয়। Sub-menu ব্যবহারকারীকে মেনুর আরো গভীরে যেতে সহায়তা করে, যেখানে নতুন অপশন বা কার্যক্রম উপলব্ধ থাকে।

Sub-menu এর সাধারণ কাঠামো

<!-- ট্রিগার বাটন -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-menu" for="main-menu">
  Main Menu
</button>

<!-- প্রধান মেনু -->
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left" for="main-menu">
  <li class="mdl-menu__item">Item 1</li>
  <li class="mdl-menu__item">Item 2</li>
  <li class="mdl-menu__item mdl-menu__item--with-submenu">Sub-menu</li>

  <!-- Sub-menu -->
  <ul class="mdl-menu mdl-js-menu mdl-menu--top-left" for="submenu">
    <li class="mdl-menu__item">Sub-item 1</li>
    <li class="mdl-menu__item">Sub-item 2</li>
    <li class="mdl-menu__item">Sub-item 3</li>
  </ul>
</ul>

<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

• mdl-menu__item mdl-menu__item--with-submenu: এটি একটি মেনু আইটেম যা একটি Sub-menu ধারণ করে।
• mdl-menu mdl-js-menu mdl-menu--top-left: এটি একটি nested মেনু বা Sub-menu তৈরি করতে ব্যবহৃত হয়, যা প্রধান মেনুর মধ্যে প্রদর্শিত হবে।
• Sub-menu এর মেনু আইটেমগুলিও ঠিক একইভাবে mdl-menu__item ব্যবহার করে তৈরি করা হয়।

Sub-menu কার্যকারিতা:

• যখন ব্যবহারকারী প্রধান মেনু আইটেমের উপর ক্লিক করবেন, তখন একটি Sub-menu উপস্থিত হবে।
• Sub-menu মেনু আইটেমের মাধ্যমে ব্যবহারকারী আরও নির্দিষ্ট অপশন নির্বাচন করতে পারবেন।

Drop-down মেনু এবং Sub-menu কাস্টমাইজেশন

MDL-এ Drop-down মেনু এবং Sub-menu কাস্টমাইজ করা খুবই সহজ। আপনি CSS বা MDL-এর ক্লাস ব্যবহার করে মেনুর ডিজাইন পরিবর্তন করতে পারেন। এখানে কিছু কাস্টমাইজেশনের উদাহরণ দেওয়া হলো:

১. Drop-down মেনুর অবস্থান পরিবর্তন

Drop-down মেনুর অবস্থান পরিবর্তন করতে mdl-menu--bottom-left বা mdl-menu--top-right ক্লাস ব্যবহার করা যেতে পারে।

<ul class="mdl-menu mdl-js-menu mdl-menu--top-right" for="main-menu">
  <li class="mdl-menu__item">Item 1</li>
  <li class="mdl-menu__item">Item 2</li>
</ul>

এটি মেনুটিকে ডানদিকে এবং উপরের দিকে প্রদর্শন করবে।

২. Sub-menu এর Hover Effect

Sub-menu আইটেমে hover ইফেক্ট যোগ করতে:

.mdl-menu__item:hover {
  background-color: #f1f1f1;
}

এটি Sub-menu আইটেমের উপর মাউস হোভার করলে ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করবে।

সারাংশ

Material Design Lite (MDL) এ Drop-down মেনু এবং Sub-menu ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। mdl-menu এবং mdl-js-menu ক্লাস ব্যবহার করে আপনি একটি সুন্দর এবং ফাংশনাল মেনু তৈরি করতে পারেন। Sub-menu এর মাধ্যমে আপনি মেনু আইটেমগুলোর মধ্যে আরও গভীরতা যোগ করতে পারেন। MDL এর কাস্টমাইজেশন পদ্ধতির মাধ্যমে আপনি মেনু আইটেমের অবস্থান, রঙ, এবং কার্যকারিতা পরিবর্তন করতে পারবেন, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও উন্নত করবে।