নেভিগেশন এবং মেনু (Navigation and Menu) ব্যবস্থাপনা

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

MDL এর নেভিগেশন (Navigation)

নেভিগেশন (Navigation) হলো এমন একটি সিস্টেম যা ব্যবহারকারীকে ওয়েব পেজে বা অ্যাপ্লিকেশনে একটি জায়গা থেকে অন্য জায়গায় সঠিকভাবে পৌঁছানোর সুযোগ দেয়। MDL-এ বিভিন্ন ধরনের নেভিগেশন উপাদান রয়েছে, যেমন টপ ন্যাভিগেশন বার (Top Navigation Bar), ড্রপডাউন মেনু (Dropdown Menu), এবং সাইডবার (Sidebar)।

MDL-এ টপ ন্যাভিগেশন বার তৈরি

MDL-এ টপ ন্যাভিগেশন বার তৈরি করতে, mdl-layout__header এবং mdl-layout__drawer ক্লাস ব্যবহার করা হয়। এটি পেজের উপরে একটি হেডার হিসেবে কাজ করে এবং বিভিন্ন পৃষ্ঠায় সহজে নেভিগেট করার সুযোগ দেয়।

উদাহরণ:

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <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>
</div>

এখানে:

• mdl-layout: এটি MDL-এ একটি লেআউট তৈরি করে।
• mdl-layout__header: এটি ন্যাভিগেশন বার (হেডার) তৈরি করতে ব্যবহৃত ক্লাস।
• mdl-navigation: এটি লিঙ্কগুলোর জন্য ব্যবহার করা হয়।
• mdl-navigation__link: প্রতিটি লিঙ্কের জন্য ব্যবহৃত ক্লাস।

এটি একটি সিম্পল টপ ন্যাভিগেশন বার তৈরি করবে, যার মধ্যে Home, About, Services, এবং Contact লিঙ্ক থাকবে।

MDL-এ সাইডবার (Sidebar) তৈরি

MDL-এ সাইডবার ব্যবহার করতে, mdl-layout__drawer ক্লাস ব্যবহার করা হয়। এটি ব্যবহারকারীদের জন্য একটি সাইড প্যানেল তৈরি করে, যা ব্যবহারকারী পেজের বিভিন্ন অংশে দ্রুত নেভিগেট করতে সহায়তা করে।

উদাহরণ:

<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">My Website</span>
    </div>
  </header>
  <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>
</div>

এখানে:

• mdl-layout__drawer: এটি সাইডবার তৈরি করে।
• mdl-layout__header-row: এটি সাইডবারের উপরের অংশ।

এটি একটি সাইডবার তৈরি করবে, যা ওয়েবসাইটের অন্যান্য অংশে নেভিগেট করার জন্য লিঙ্কগুলি প্রদান করবে।

MDL এর মেনু (Menu)

MDL-এ মেনু ব্যবস্থাপনা বিভিন্ন ধরনের মেনু স্টাইল প্রদান করে, যেমন ড্রপডাউন মেনু (Dropdown Menu), আইকন বেসড মেনু (Icon-Based Menu), এবং ট্রিগারড মেনু (Triggered Menu)।

MDL-এ ড্রপডাউন মেনু তৈরি

MDL-এ একটি সিম্পল ড্রপডাউন মেনু তৈরি করতে, mdl-menu এবং mdl-menu__item ক্লাস ব্যবহার করা হয়। এটি ক্লিক করার মাধ্যমে একটি মেনু খুলবে এবং বিভিন্ন অপশন দেখতে পারবেন।

উদাহরণ:

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="demo-menu-lower-right">
  Open Menu
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu" for="demo-menu-lower-right">
  <li class="mdl-menu__item">Home</li>
  <li class="mdl-menu__item">About</li>
  <li class="mdl-menu__item">Services</li>
  <li class="mdl-menu__item">Contact</li>
</ul>

এখানে:

• mdl-menu: এটি ড্রপডাউন মেনু তৈরি করে।
• mdl-menu__item: এটি মেনুর আইটেমগুলোর জন্য ব্যবহৃত ক্লাস।
• mdl-js-menu: এটি মেনু কার্যকর করতে ব্যবহৃত ক্লাস।

এটি একটি ড্রপডাউন মেনু তৈরি করবে, যেখানে ব্যবহারকারী ক্লিক করলে Home, About, Services, এবং Contact অপশনগুলো প্রদর্শিত হবে।

MDL-এ আইকন বেসড মেনু

MDL-এ আইকন বেসড মেনু ব্যবহার করতে, আপনি মেনুর মধ্যে আইকন ব্যবহার করতে পারেন। আইকনগুলি গুগলের Material Icons লাইব্রেরি থেকে পাওয়া যায়।

উদাহরণ:

<button class="mdl-button mdl-js-button mdl-button--icon" id="menu-icon">
  <i class="material-icons">menu</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="menu-icon">
  <li class="mdl-menu__item">Home</li>
  <li class="mdl-menu__item">About</li>
  <li class="mdl-menu__item">Services</li>
  <li class="mdl-menu__item">Contact</li>
</ul>

এখানে, menu আইকন ব্যবহার করা হয়েছে, যা ক্লিক করলে একটি ড্রপডাউন মেনু দেখাবে।

MDL-এ নেভিগেশন এবং মেনু ব্যবস্থাপনার সুবিধা

১. ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস

MDL-এ নেভিগেশন এবং মেনু ব্যবস্থাপনা ইন্টারঅ্যাকটিভ ওয়েবসাইট তৈরি করতে সহায়তা করে। এটি ব্যবহারকারীকে বিভিন্ন পৃষ্ঠায় দ্রুত এবং সহজভাবে নেভিগেট করতে সহায়তা করে।

২. রেসপন্সিভ ডিজাইন

MDL-এর নেভিগেশন এবং মেনু ব্যবস্থাপনা রেসপন্সিভ ডিজাইন সমর্থন করে, যা ওয়েবসাইটকে মোবাইল, ট্যাবলেট এবং ডেস্কটপে একইভাবে কার্যকরী রাখে।

৩. সহজ কাস্টমাইজেশন

MDL-এ নেভিগেশন এবং মেনু ব্যবস্থাপনা খুব সহজে কাস্টমাইজ করা যায়। আপনি ক্লাস পরিবর্তন করে মেনুর রঙ, আকার এবং স্টাইল পরিবর্তন করতে পারবেন।

৪. বিভিন্ন মেনু অপশন

MDL-এ বিভিন্ন ধরনের মেনু অপশন রয়েছে, যেমন ড্রপডাউন মেনু, আইকন বেসড মেনু, এবং সাইডবার, যা আপনার ওয়েবসাইটের জন্য সঠিক মেনু সিস্টেম তৈরি করতে সহায়তা করে।

সারাংশ

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

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 এর এই কম্পোনেন্টগুলো কাস্টমাইজ করা এবং সহজেই ইন্টিগ্রেট করা যায়।

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 থাকে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করে তোলে।

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 এর কাস্টমাইজেশন পদ্ধতির মাধ্যমে আপনি মেনু আইটেমের অবস্থান, রঙ, এবং কার্যকারিতা পরিবর্তন করতে পারবেন, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও উন্নত করবে।

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 মেনু উপাদানগুলি ওয়েব ডিজাইনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।