Foundation এর মেগা মেনু এবং ইন্টারঅ্যাকটিভ মেনু

Foundation ফ্রেমওয়ার্কে মেগা মেনু এবং ইন্টারঅ্যাকটিভ মেনু ডিজাইন করা খুবই সহজ এবং শক্তিশালী। এই মেনু সিস্টেমগুলো ওয়েবসাইটের নেভিগেশনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে। Foundation এর মেগা মেনু এবং ইন্টারঅ্যাকটিভ মেনু ব্যবহার করে আপনি আপনার ওয়েবসাইটের নেভিগেশনকে আরও উন্নত করতে পারেন।

মেগা মেনু (Mega Menu) এর পরিচিতি

মেগা মেনু হল একটি ড্রপডাউন মেনু যা একটি বড় আকারের কন্টেন্ট বা লিঙ্ক গ্রুপ প্রদর্শন করে। এটি সাধারণত সাইটের প্রধান ক্যাটেগরি, সাব-ক্যাটেগরি বা প্রাসঙ্গিক কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়। মেগা মেনু ব্যবহারকারীদের জন্য একাধিক অপশন একসাথে প্রদর্শন করে, যা তাদের নেভিগেশন সহজ এবং দ্রুত করে তোলে।

Foundation এ মেগা মেনু তৈরির স্টেপ

Foundation ফ্রেমওয়ার্কে মেগা মেনু তৈরি করা খুবই সহজ। নিচে এর একটি উদাহরণ দেওয়া হলো:

<nav class="top-bar" id="mega-menu">
  <ul class="menu">
    <li class="menu-item">
      <a href="#">Home</a>
    </li>
    <li class="menu-item">
      <a href="#">About</a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Web Development</a></li>
        <li><a href="#">App Development</a></li>
        <li><a href="#">SEO Services</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

স্টাইলিং এবং ইন্টারঅ্যাকশন

Foundation এর top-bar কম্পোনেন্টটি দিয়ে মেগা মেনু তৈরি করা যায়। আপনি মেনুর মধ্যে ড্রপডাউন submenu যোগ করতে পারেন। has-submenu ক্লাস ব্যবহার করে মেনু আইটেমে সাব-মেনু (dropdown) তৈরি করা যায়। স্টাইলিং এবং ইন্টারঅ্যাকশন কিছুটা কাস্টমাইজ করা যায়:

#mega-menu .submenu {
  display: none; /* Hide submenu initially */
  position: absolute;
  background-color: #fff;
  padding: 20px;
  top: 100%;
}

#mega-menu .menu-item:hover .submenu {
  display: block; /* Show submenu on hover */
}

এটি একটি সাধারণ মেগা মেনু, যেখানে মূল মেনুর উপর hover করলে submenu বা ড্রপডাউন মেনু প্রদর্শিত হয়।

ইন্টারঅ্যাকটিভ মেনু (Interactive Menu) এর পরিচিতি

ইন্টারঅ্যাকটিভ মেনু হল একটি ডায়নামিক এবং ইউজার-ফ্রেন্ডলি মেনু, যা সাধারণত কিছু ইন্টারঅ্যাকশন, যেমন হোভার ইফেক্ট বা ক্লিক ইভেন্টের মাধ্যমে প্রদর্শিত হয়। ইন্টারঅ্যাকটিভ মেনু ব্যবহারকারীকে দ্রুত মেনুর অপশন দেখাতে সাহায্য করে এবং এটি ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত করে।

Foundation এ ইন্টারঅ্যাকটিভ মেনু তৈরির স্টেপ

Foundation ফ্রেমওয়ার্কে একটি responsive menu তৈরি করা যেতে পারে, যা JavaScript এবং CSS ক্লাসের মাধ্যমে সঠিকভাবে কাজ করে।

উদাহরণ:

<nav class="top-bar" id="interactive-menu">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Web Development</a></li>
        <li><a href="#">App Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

এখানে submenu ড্রপডাউন মেনু তৈরির জন্য HTML কোডটি দেয়া হয়েছে। এই মেনুটি মাউস হোভার বা ক্লিকের মাধ্যমে একটি সাব-মেনু প্রদর্শন করবে।

ইন্টারঅ্যাকটিভ মেনু স্টাইলিং:

Foundation-এর top-bar স্টাইলিং ব্যবহার করে, আপনি সহজেই একটি ইন্টারঅ্যাকটিভ মেনু তৈরি করতে পারেন:

#interactive-menu .submenu {
  display: none;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}

#interactive-menu .menu-item:hover .submenu {
  display: block;
}

এটি একটি ইন্টারঅ্যাকটিভ মেনু, যেখানে মেনু আইটেমের উপর মাউস হোভার করলে সাবমেনু খুলবে। এই স্টাইলিং ক্লাসে submenu হাইড এবং শো করার জন্য CSS ব্যবহার করা হয়েছে।

Foundation JavaScript ব্যবহার:

Foundation ফ্রেমওয়ার্কে মেনুর ইন্টারঅ্যাকশন আরও শক্তিশালী করতে JavaScript বা jQuery ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, একটি মেনুর হ্যাম্বারগার আইকন ব্যবহার করে মোবাইল ভিউতে মেনু তৈরি করা যেতে পারে:

<button class="menu-icon" type="button" data-toggle="top-bar">
  <span class="hamburger-icon">☰</span>
</button>

এটি মেনু আইকন টগল করার জন্য একটি হ্যাম্বারগার আইকন যুক্ত করবে, যা ক্লিক করার মাধ্যমে মেনুর অবস্থান পরিবর্তন করবে।

মেগা মেনু এবং ইন্টারঅ্যাকটিভ মেনুর মধ্যে পার্থক্য

Foundation এর মেগা মেনু এবং ইন্টারঅ্যাকটিভ মেনু খুবই কার্যকরী এবং ব্যবহারকারী-বান্ধব মেনু সিস্টেম। মেগা মেনু সাধারণত বড় এবং জটিল নেভিগেশন তৈরি করতে ব্যবহৃত হয়, যেখানে একাধিক অপশন একত্রে প্রদর্শিত হয়, এবং ইন্টারঅ্যাকটিভ মেনু সাধারণত আরও সিম্পল এবং ছোট স্ক্রীনের জন্য উপযুক্ত, যেখানে মেনু অপশনগুলো খুব দ্রুত এবং স্বচ্ছভাবে অ্যাক্সেস করা যায়। Foundation এর এই মেনু সিস্টেমগুলো দ্রুত এবং সহজে আপনার সাইটের নেভিগেশনকে শক্তিশালী করতে সাহায্য করবে।

Mega Menu একটি বৃহৎ এবং বিস্তারিত ড্রপডাউন মেনু, যা একাধিক সেকশন এবং সাব-সেকশন প্রদর্শন করতে ব্যবহৃত হয়। সাধারণত ওয়েবসাইটের হেডারে প্রধান বিভাগগুলির জন্য একটি মেগা মেনু তৈরি করা হয়, যা ব্যবহারকারীদের জন্য সহজে নেভিগেশন করতে সাহায্য করে। Foundation ফ্রেমওয়ার্কে মেগা মেনু তৈরি করা খুবই সহজ, কারণ এটি অনেক প্রস্তুত-পরিচিত CSS ক্লাস এবং JavaScript প্লাগইন প্রদান করে, যা মেনু ডিজাইন করতে সহায়তা করে।

এখানে Foundation এর মাধ্যমে একটি মেগা মেনু তৈরি করার প্রক্রিয়া বিস্তারিতভাবে ব্যাখ্যা করা হলো।

Foundation Mega Menu তৈরি করার ধাপ

১. Basic Structure Setup

প্রথমেই একটি সাধারণ মেনু লেআউট তৈরি করুন। আপনি <ul> এবং <li> ট্যাগ ব্যবহার করে প্রধান মেনু এবং সাব-মেনু তৈরি করতে পারেন।

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Website</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li class="has-dropdown not-click">
        <a href="#">Main Menu Item</a>
        <ul class="dropdown">
          <li><a href="#">Submenu 1</a></li>
          <li><a href="#">Submenu 2</a></li>
          <li><a href="#">Submenu 3</a></li>
        </ul>
      </li>
      <li><a href="#">Another Item</a></li>
    </ul>
  </section>
</nav>

২. Mega Menu Structure (with Nested Dropdown)

মেগা মেনুর জন্য একটি বড় ড্রপডাউন মেনু তৈরি করতে, নিচের কোডের মতো একটি nested dropdown ব্যবহার করুন।

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Website</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li class="has-dropdown mega-dropdown">
        <a href="#">Main Menu</a>
        <ul class="dropdown mega-menu">
          <li class="large-4 columns">
            <h5>Section 1</h5>
            <ul class="no-bullet">
              <li><a href="#">Submenu 1</a></li>
              <li><a href="#">Submenu 2</a></li>
              <li><a href="#">Submenu 3</a></li>
            </ul>
          </li>
          <li class="large-4 columns">
            <h5>Section 2</h5>
            <ul class="no-bullet">
              <li><a href="#">Submenu 4</a></li>
              <li><a href="#">Submenu 5</a></li>
              <li><a href="#">Submenu 6</a></li>
            </ul>
          </li>
          <li class="large-4 columns">
            <h5>Section 3</h5>
            <ul class="no-bullet">
              <li><a href="#">Submenu 7</a></li>
              <li><a href="#">Submenu 8</a></li>
              <li><a href="#">Submenu 9</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Another Item</a></li>
    </ul>
  </section>
</nav>

এখানে:

• mega-dropdown: মেগা মেনুর জন্য একটি কাস্টম ক্লাস ব্যবহার করা হয়েছে, যা CSS দিয়ে কাস্টমাইজ করা হবে।
• large-4 columns: Foundation-এর গ্রিড সিস্টেম ব্যবহার করে মেগা মেনুর প্রতিটি সেকশনকে ৪টি কলামে ভাগ করা হয়েছে, যার ফলে প্রতিটি সেকশন সমান আকারে প্রদর্শিত হবে।

৩. CSS Customization for Mega Menu

মেগা মেনুর ডিজাইন কাস্টমাইজ করতে কিছু CSS প্রয়োগ করা হয়, যেমন মেনুর আকার, ব্যাকগ্রাউন্ড রঙ এবং হোভার ইফেক্ট।

.mega-menu {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  padding: 20px;
}

.mega-menu > li {
  padding: 0;
}

.mega-menu h5 {
  font-size: 1.2em;
  color: #333;
}

.mega-menu a {
  text-decoration: none;
  color: #333;
  padding: 5px 0;
  display: block;
}

.mega-menu a:hover {
  background-color: #e5e5e5;
}

এখানে:

• display: flex;: Flexbox ব্যবহার করে মেগা মেনু সেকশনগুলিকে সমানভাবে প্রসারিত করা হয়েছে।
• background-color: মেনুর ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে।
• a:hover: হোভার ইফেক্ট যোগ করা হয়েছে, যাতে ইউজার মেনুর আইটেমগুলোর উপর হোভার করলে তাদের রঙ পরিবর্তিত হয়।

৪. Foundation JavaScript for Dropdown

Foundation এ ড্রপডাউন মেনুর জন্য JavaScript সাপোর্ট ব্যবহার করা হয়। সাধারণত topbar বা dropdown ক্লাসগুলির জন্য JavaScript ব্যবহৃত হয়। Foundation JavaScript ফাইলকে যুক্ত করে, ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে কার্যকর হবে।

Foundation JavaScript ইন্টিগ্রেট করার জন্য আপনার HTML ফাইলে নিচের স্ক্রিপ্টটি যুক্ত করুন:

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

এটি Foundation এর JavaScript প্লাগইন চালু করবে, যা ড্রপডাউন এবং অন্যান্য উপাদানকে সক্রিয় করবে।

Foundation ফ্রেমওয়ার্কে Mega Menu তৈরি করা একটি সহজ প্রক্রিয়া, যা CSS গ্রিড এবং JavaScript প্লাগইন ব্যবহার করে সমন্বিতভাবে কাজ করে। Foundation এর গ্রিড সিস্টেম এবং dropdown ফিচারের মাধ্যমে আপনি একটি দৃষ্টিনন্দন এবং রেসপনসিভ মেগা মেনু তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য নেভিগেশনকে আরও সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে। Foundation এর সাথে আপনি মেনুর আকার, রঙ, ফন্ট এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করে আপনার ওয়েবসাইটের ডিজাইন উন্নত করতে পারেন।

Foundation ফ্রেমওয়ার্কের Dropdown মেনু একটি অত্যন্ত জনপ্রিয় ফিচার, যা ওয়েবসাইটের ন্যাভিগেশন সহজ এবং সুশৃঙ্খল করতে ব্যবহৃত হয়। কখনও কখনও, আমাদের একটি মূল মেনুর নিচে Submenu (সাবমেনু) যুক্ত করতে হয়, যা আরও বিভিন্ন অপশন বা সেকশন দেখাতে সাহায্য করে। Foundation এই ধরনের Dropdown এবং Submenu তৈরির জন্য একটি সোজা পদ্ধতি সরবরাহ করে।

Dropdown মেনুতে Submenu যুক্ত করার পদ্ধতি

Foundation এ Dropdown মেনু তৈরি করার জন্য dropdown ক্লাস ব্যবহার করা হয়। সাবমেনু তৈরি করতে, সাধারণভাবে একটি <ul> তালিকা এবং তার মধ্যে <li> উপাদান ব্যবহার করা হয়, যেখানে মেনু অপশনগুলির পাশাপাশি সাবমেনু আইটেমও যুক্ত করা হয়। সাবমেনু টগল করার জন্য, JavaScript এবং CSS এর মাধ্যমে তার কার্যকারিতা নিয়ন্ত্রণ করা হয়।

উদাহরণ: Dropdown মেনুতে Submenu যুক্ত করা

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="has-submenu">
    <a href="#">Services</a>
    <ul class="submenu menu vertical" data-submenu>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে:

• class="dropdown menu": এটি একটি ড্রপডাউন মেনু তৈরি করে।
• data-dropdown-menu: এটি Foundation এর জন্য ড্রপডাউন ফাংশন সক্রিয় করার জন্য ব্যবহৃত হয়।
• class="has-submenu": এটি মেনুর একটি আইটেমে সাবমেনু যোগ করতে ব্যবহৃত হয়।
• <ul class="submenu menu vertical" data-submenu>: এটি সাবমেনু তালিকা যা শুধুমাত্র Services আইটেমের নিচে প্রদর্শিত হবে।
• data-submenu: এটি সাবমেনুর ড্রপডাউন ফাংশন সক্রিয় করতে ব্যবহৃত হয়।

CSS এর মাধ্যমে Submenu Styling

Foundation এর ডিফল্ট স্টাইলিংয়ের মধ্যে সাবমেনু স্বয়ংক্রিয়ভাবে সঠিকভাবে কাজ করবে, তবে আপনি চাইলে এটিকে কাস্টমাইজ করতে পারেন। যেমন, সাবমেনুর পটভূমি রঙ, সীমানা, বা অবস্থান পরিবর্তন করা।

/* Submenu styling */
.submenu {
  display: none; /* ডিফল্টভাবে সাবমেনু লুকানো থাকে */
}

.has-submenu:hover .submenu {
  display: block; /* মাউস হোভার করলে সাবমেনু প্রদর্শিত হবে */
}

এই কোডের মাধ্যমে, সাবমেনুটি has-submenu ক্লাসের অধীনে মাউস হোভার করার পর প্রদর্শিত হবে।

Foundation JavaScript এর মাধ্যমে Submenu টগল করা

Foundation ড্রপডাউন এবং সাবমেনু ফিচারের জন্য স্বয়ংক্রিয়ভাবে JavaScript সক্রিয় হয়। তবে যদি আপনি সাবমেনু পরিচালনা করতে চান, তাহলে Foundation-এর JavaScript প্লাগইনগুলি ব্যবহার করতে হবে। নিচে তার উদাহরণ দেওয়া হলো:

<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/js/foundation.min.js"></script>
<script>
  $(document).foundation();  // Foundation JS সক্রিয় করতে
</script>

এই স্ক্রিপ্টটি পেজ লোড হলে Foundation এর সমস্ত ফিচার যেমন ড্রপডাউন মেনু, সাবমেনু ইত্যাদি সক্রিয় করবে।

আরও কাস্টমাইজেশন

• Positioning: সাবমেনুর অবস্থান পরিবর্তন করতে, যেমন, আপনি চাইলে এটিকে ড্রপডাউন মেনুর বাম বা ডানদিকে অবস্থান করাতে পারেন।
• Transition: সাবমেনুতে একটি fade বা slide অ্যানিমেশন যোগ করতে পারেন, যা ব্যবহারকারীদের জন্য একটি স্মুথ এবং আকর্ষণীয় ট্রানজিশন তৈরি করবে।

.submenu {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.has-submenu:hover .submenu {
  display: block;
  opacity: 1;
}

এই CSS কোডটি সাবমেনুতে একটি ধীরে ধীরে প্রদর্শন (fade-in) অ্যানিমেশন তৈরি করবে।

Foundation ফ্রেমওয়ার্কের মাধ্যমে Dropdown মেনু এবং Submenu তৈরি করা খুবই সহজ। এটি একটি রেসপনসিভ এবং ব্যবহারকারী-বান্ধব ন্যাভিগেশন তৈরি করতে সহায়তা করে, যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপে সমানভাবে কাজ করে। আপনার প্রয়োজন অনুযায়ী, আপনি এই ড্রপডাউন মেনু এবং সাবমেনু কাস্টমাইজ করে সেগুলি আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন।

Foundation ফ্রেমওয়ার্কে ইন্টারঅ্যাকটিভ মেনু তৈরি করার জন্য বিভিন্ন ধরনের কম্পোনেন্ট এবং JavaScript প্লাগইন রয়েছে, যা ব্যবহারকারীদের ওয়েবসাইটের নেভিগেশনে আরও উন্নত অভিজ্ঞতা প্রদান করে। এই কম্পোনেন্টগুলোর মধ্যে ড্রপডাউন মেনু, মোবাইল মেনু, মেগামেনু এবং একাধিক নেভিগেশন স্টাইল অন্তর্ভুক্ত রয়েছে। Foundation মেনুতে ইন্টারঅ্যাকটিভ ইলিমেন্ট যুক্ত করতে JavaScript এবং CSS এর সমন্বয়ে কাজ করতে হয়।

১. সাধারণ ড্রপডাউন মেনু

Foundation এ ড্রপডাউন মেনু খুব সহজে তৈরি করা যায়। আপনি একটি ul (unordered list) এবং li (list item) ব্যবহার করে মেনু আইটেম তৈরি করতে পারেন। এবং সেই আইটেমের মধ্যে sub-menu (সাব মেনু) তৈরি করতে dropdown ক্লাস ব্যবহার করা হয়।

ড্রপডাউন মেনু উদাহরণ:

<ul class="menu">
  <li><a href="#">হোম</a></li>
  <li><a href="#">সার্ভিসেস</a>
    <ul class="menu vertical">
      <li><a href="#">ওয়েব ডিজাইন</a></li>
      <li><a href="#">ডেভেলপমেন্ট</a></li>
      <li><a href="#">ই-কমার্স</a></li>
    </ul>
  </li>
  <li><a href="#">যোগাযোগ</a></li>
</ul>

এখানে:

• menu: মেনু আইটেমগুলোর জন্য ব্যবহৃত মূল ক্লাস।
• vertical: সাব মেনুতে ইন্টিগ্রেট করার জন্য এই ক্লাসটি ব্যবহার করা হয়েছে, যা মেনু আইটেমকে উল্লম্বভাবে সাজায়।

এই কোডের মাধ্যমে, "সার্ভিসেস" আইটেমে মাউস রাখলে একটি ড্রপডাউন মেনু প্রদর্শিত হবে।

২. ড্রপডাউন মেনুতে JavaScript ইন্টারঅ্যাকশন

Foundation ড্রপডাউন মেনুর ইন্টারঅ্যাকটিভিটি চালু করতে JavaScript ব্যবহার করতে হয়। এর জন্য Foundation এর JavaScript প্লাগইন ব্যবহার করা হয়।

JavaScript কোড:

<script>
  $(document).foundation();
</script>

এই কোডটি আপনার HTML পেজে যুক্ত করলে, ড্রপডাউন মেনু ইন্টারঅ্যাকটিভ হবে এবং মেনু আইটেমগুলোর উপর মাউস হোভার করার সাথে সাথে সাব মেনু প্রদর্শিত হবে।

৩. মোবাইল মেনু (Responsive Menu)

Foundation এর responsive menu ফিচারটি মোবাইল ডিভাইসে একটি স্লাইড আউট মেনু তৈরি করতে ব্যবহৃত হয়। এটি মূলত হ্যাম্বারগার মেনু তৈরি করে, যেখানে মেনু আইটেমগুলো মোবাইল স্ক্রীনে স্লাইড আউট হয়ে প্রদর্শিত হয়।

মোবাইল মেনু উদাহরণ:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="#">হোম</a></li>
      <li><a href="#">সার্ভিসেস</a></li>
      <li><a href="#">যোগাযোগ</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">লগইন</a></li>
      <li><button class="button" data-toggle="mobile-menu">মেনু</button></li>
    </ul>
  </div>
</div>

<div class="off-canvas position-right" id="mobile-menu" data-off-canvas>
  <ul class="vertical menu">
    <li><a href="#">হোম</a></li>
    <li><a href="#">সার্ভিসেস</a></li>
    <li><a href="#">যোগাযোগ</a></li>
  </ul>
</div>

এখানে:

• off-canvas: এই ক্লাসটি মেনুকে সাইডে নিয়ে যায়, যা মোবাইল ডিভাইসে স্লাইড আউট মেনু তৈরি করে।
• data-toggle="mobile-menu": এই অ্যাট্রিবিউটটি বাটনের সাথে যুক্ত করা হয়, যা মেনুর ভিউইং চালু এবং বন্ধ করবে।

Foundation এর off-canvas কম্পোনেন্টটি মোবাইল মেনুর জন্য ব্যবহৃত হয় এবং এটি একাধিক স্ক্রীন সাইজে রেসপনসিভভাবে কাজ করে।

৪. মেগা মেনু (Mega Menu)

মেগা মেনু হলো একটি বৃহৎ ড্রপডাউন মেনু, যা একাধিক কোলামে বিভিন্ন লিঙ্ক প্রদর্শন করে। এটি বড় ওয়েবসাইটে ব্যবহার করা হয় যেখানে অনেকগুলো সাব-ক্যাটেগরি থাকে।

মেগা মেনু উদাহরণ:

<ul class="menu">
  <li><a href="#">হোম</a></li>
  <li><a href="#">সার্ভিসেস</a>
    <ul class="menu mega">
      <li class="menu-text">ডিজাইন</li>
      <li><a href="#">ওয়েব ডিজাইন</a></li>
      <li><a href="#">গ্রাফিক ডিজাইন</a></li>
      <li><a href="#">লোগো ডিজাইন</a></li>
      <li class="menu-text">ডেভেলপমেন্ট</li>
      <li><a href="#">ফ্রন্টএন্ড ডেভেলপমেন্ট</a></li>
      <li><a href="#">ব্যাকএন্ড ডেভেলপমেন্ট</a></li>
      <li><a href="#">ই-কমার্স</a></li>
    </ul>
  </li>
  <li><a href="#">যোগাযোগ</a></li>
</ul>

এখানে:

• mega: এটি একটি CSS ক্লাস যা মেগা মেনুর স্টাইল নির্ধারণ করে।
• menu-text: এটি বিভাগকে আলাদা করার জন্য ব্যবহার করা হয়।

৫. অ্যাকর্ডিয়ন মেনু (Accordion Menu)

অ্যাকর্ডিয়ন মেনুতে একে একে সাব মেনু খোলা এবং বন্ধ করা যায়। এটি সাধারণত একাধিক সেকশনের জন্য ব্যবহার করা হয়।

অ্যাকর্ডিয়ন মেনু উদাহরণ:

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">সার্ভিসেস</a>
    <div class="accordion-content" data-tab-content>
      <p>ওয়েব ডিজাইন, ডেভেলপমেন্ট, ই-কমার্স সলিউশনস...</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">যোগাযোগ</a>
    <div class="accordion-content" data-tab-content>
      <p>আমাদের সাথে যোগাযোগ করুন...</p>
    </div>
  </li>
</ul>

এখানে:

• accordion: এটি অ্যাকর্ডিয়ন মেনুর জন্য ব্যবহৃত মূল ক্লাস।
• is-active: এটি প্রথম আইটেমটি স্বাভাবিকভাবে খোলা রাখে।

Foundation ফ্রেমওয়ার্কে মেনুতে ইন্টারঅ্যাকটিভ ইলিমেন্ট যুক্ত করতে JavaScript, CSS, এবং HTML এর সমন্বয়ে বিভিন্ন টুল ও কম্পোনেন্ট রয়েছে, যেমন ড্রপডাউন মেনু, মোবাইল মেনু, মেগা মেনু, এবং অ্যাকর্ডিয়ন মেনু। এগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ, রেসপনসিভ এবং ব্যবহারকারী-বান্ধব মেনু তৈরি করতে পারবেন। Foundation এর এই ফিচারগুলো দ্রুত, কার্যকরী এবং অত্যন্ত কাস্টমাইজযোগ্য, যা আপনাকে আপনার ডিজাইনকে আরো উন্নত করতে সাহায্য করবে।

Foundation ফ্রেমওয়ার্কটি ওয়েব ডিজাইনের জন্য একটি শক্তিশালী টুল, যা রেসপনসিভ ডিজাইন, ইউজার এক্সপেরিয়েন্স এবং অ্যাক্সেসিবিলিটি উন্নত করতে সহায়তা করে। মেনু ডিজাইন করার ক্ষেত্রে সঠিক Best Practices এবং Accessibility ফিচারগুলো ব্যবহার করা খুবই গুরুত্বপূর্ণ, কারণ এটি ওয়েবসাইটের ব্যবহারযোগ্যতা এবং আভ্যন্তরীণ নেভিগেশন সহজ করে তোলে। এই দুইটি ফিচারই Foundation-এ খুব সহজে বাস্তবায়ন করা যায়।

মেনুর জন্য Best Practices

মেনু ডিজাইনের সময় কিছু প্রাথমিক Best Practices অনুসরণ করা উচিত, যা আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করবে।

১. সোজাসুজি এবং সহজ নেভিগেশন

নেভিগেশন মেনু হতে হবে সোজা এবং পরিষ্কার, যাতে ব্যবহারকারীরা সহজেই পেজের বিভিন্ন অংশে যেতে পারেন। মেনু আইটেমগুলি যতটা সম্ভব পরিষ্কার এবং কমপ্যাক্ট রাখতে হবে।

• Foundation উদাহরণ:

  <nav class="top-bar">
    <ul class="menu">
      <li><a href="#">হোম</a></li>
      <li><a href="#">সেবা</a></li>
      <li><a href="#">যোগাযোগ</a></li>
    </ul>
  </nav>
  

২. মোবাইল-ফার্স্ট ডিজাইন

Foundation মোবাইল-ফার্স্ট অ্যাপ্রোচে কাজ করে, অর্থাৎ প্রথমে মোবাইলের জন্য ডিজাইন তৈরি করা হয় এবং পরে ডেস্কটপের জন্য স্কেল করা হয়। মেনুতে মোবাইল ডিভাইসে হ্যামবার্গার মেনু ব্যবহার করতে পারেন।

• Foundation উদাহরণ (হ্যামবার্গার মেনু):

  <nav class="top-bar" data-topbar>
    <ul class="dropdown menu" data-dropdown-menu>
      <li><a href="#">হোম</a></li>
      <li><a href="#">সেবা</a></li>
      <li><a href="#">যোগাযোগ</a></li>
    </ul>
  </nav>
  

৩. প্রথম পছন্দের আইটেমটি স্পষ্টভাবে দেখানো

ব্যবহারকারীরা সাধারণত প্রথমে হোম পেজে যান, তাই হোম আইটেমটি সর্বদা সর্বাধিক দৃশ্যমান এবং সোজাসুজি রাখা উচিত।

৪. নেভিগেশন মেনুতে হোয়াইটস্পেস ব্যবহৃত করা

প্রত্যেকটি মেনু আইটেমের মধ্যে পর্যাপ্ত হোয়াইটস্পেস রাখা উচিত, যাতে ব্যবহারকারী সহজে পছন্দের আইটেমে ক্লিক করতে পারে। এটি বিশেষভাবে মোবাইল ডিভাইসের জন্য গুরুত্বপূর্ণ।

মেনুর জন্য Accessibility Best Practices

অ্যাক্সেসিবিলিটি বা অ্যাক্সেসযোগ্য ডিজাইন ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত করতে এবং সকল ব্যবহারকারীর জন্য ডিজাইন তৈরি করতে সহায়তা করে, বিশেষত যারা শারীরিক বা দৃষ্টি প্রতিবন্ধী। নেভিগেশন মেনুর জন্য কিছু অ্যাক্সেসিবিলিটি Best Practices:

১. কী-বোর্ড নেভিগেশন সমর্থন

ব্যবহারকারী যাতে মেনুতে কী-বোর্ডের মাধ্যমে সহজে নেভিগেট করতে পারেন, সেজন্য tabindex এবং aria-label এর মতো অ্যাট্রিবিউট ব্যবহার করা উচিত।

• উদাহরণ:

  <nav role="navigation" aria-label="Main menu">
    <ul class="menu">
      <li><a href="#" tabindex="0">হোম</a></li>
      <li><a href="#" tabindex="1">সেবা</a></li>
      <li><a href="#" tabindex="2">যোগাযোগ</a></li>
    </ul>
  </nav>
  

২. অ্যারিালেবেল (ARIA Labels) ব্যবহার করা

ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউটগুলি ব্যবহার করে মেনু আইটেমগুলির কার্যকারিতা এবং কাঠামো পরিষ্কারভাবে বর্ণনা করা উচিত, যাতে স্ক্রীন রিডার ব্যবহারকারীরা সহজে নেভিগেট করতে পারেন।

• ARIA উদাহরণ:

  <nav class="top-bar" role="navigation" aria-label="Main navigation">
    <ul class="menu">
      <li><a href="#" aria-label="Go to Home">হোম</a></li>
      <li><a href="#" aria-label="Our services">সেবা</a></li>
      <li><a href="#" aria-label="Contact us">যোগাযোগ</a></li>
    </ul>
  </nav>
  

৩. ড্রপডাউন মেনুতে অ্যাক্সেসিবিলিটি

ড্রপডাউন মেনুর ক্ষেত্রে নিশ্চিত করতে হবে যে মেনুর আইটেমগুলি স্ক্রীন রিডার এবং কী-বোর্ড ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য।

• Foundation উদাহরণ (ড্রপডাউন):

  <nav role="navigation" aria-label="Main menu">
    <ul class="menu" data-dropdown-menu>
      <li><a href="#">হোম</a></li>
      <li><a href="#">সেবা</a>
        <ul class="menu">
          <li><a href="#">সেবা ১</a></li>
          <li><a href="#">সেবা ২</a></li>
        </ul>
      </li>
      <li><a href="#">যোগাযোগ</a></li>
    </ul>
  </nav>
  

ড্রপডাউন মেনুর জন্য aria-haspopup="true" এবং aria-expanded ব্যবহার করে মেনুর অবস্থান নির্দেশ করা উচিত।

৪. ভিজ্যুয়াল ফোকাস স্টাইল

নেভিগেশন মেনুতে ব্যবহৃত লিংকগুলো বা বাটনগুলোর জন্য ফোকাস স্টাইল দেয়া উচিত। এটি কী-বোর্ড ব্যবহারকারীদের জন্য অত্যন্ত গুরুত্বপূর্ণ।

• CSS উদাহরণ:

  a:focus {
    outline: 3px solid #ffcc00;
  }
  

৫. মেনু আইটেমগুলির যথাযথ অর্ডার

নেভিগেশন আইটেমগুলির অর্ডার পরিষ্কার হওয়া উচিত এবং ভিজ্যুয়াল কনটেক্সট অনুযায়ী সেগুলিকে সাজানো উচিত, যাতে ব্যবহারকারীরা সহজে তাদের কাঙ্খিত পৃষ্ঠায় পৌঁছাতে পারে।

Foundation-এ মেনু অ্যাক্সেসিবিলিটি

Foundation ফ্রেমওয়ার্কে বিভিন্ন কাস্টম মেনু এবং ড্রপডাউন কম্পোনেন্ট অ্যাক্সেসিবিলিটি সুবিধার সাথে আসে। ARIA অ্যাট্রিবিউট এবং CSS এর মাধ্যমে এই মেনুগুলোর অ্যাক্সেসিবিলিটি আরও উন্নত করা যায়। Foundation’s top-bar এবং dropdown menu কম্পোনেন্টস এ সমস্ত অ্যাক্সেসিবিলিটি সুবিধা সমর্থন করে।

উদাহরণ:

<nav class="top-bar" role="navigation" aria-label="Main menu">
  <ul class="menu" data-dropdown-menu>
    <li><a href="#" aria-label="Go to Home">হোম</a></li>
    <li><a href="#">সেবা</a>
      <ul class="menu" role="menu" aria-labelledby="services">
        <li><a href="#">সেবা ১</a></li>
        <li><a href="#">সেবা ২</a></li>
      </ul>
    </li>
    <li><a href="#">যোগাযোগ</a></li>
  </ul>
</nav>

Best Practices এবং Accessibility মেনু ডিজাইনের জন্য অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ব্যবহারকারীর অভিজ্ঞতা এবং ওয়েবসাইটের অ্যাক্সেসিবিলিটি বাড়ায়। Foundation ফ্রেমওয়ার্ক এই বিষয়ে বিভিন্ন শক্তিশালী কম্পোনেন্ট এবং কাস্টমাইজেশন সুবিধা প্রদান করে, যার মাধ্যমে আপনি আপনার ওয়েবসাইটে কার্যকর, অ্যাক্সেসিবল এবং রেসপনসিভ মেনু তৈরি করতে পারেন।