মেনুতে ইন্টারঅ্যাকটিভ ইলিমেন্ট যুক্ত করা

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