Dropdown মেনুতে Submenu যুক্ত করা

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