Responsive Navigation এবং Dropdown মেনু

Foundation ফ্রেমওয়ার্কে Responsive Navigation এবং Dropdown মেনু তৈরি করা খুবই সহজ এবং এটি ওয়েবসাইটের নেভিগেশন উন্নত করতে সহায়তা করে। Foundation এর গ্রিড সিস্টেম এবং JavaScript প্লাগইনগুলি ব্যবহার করে আপনি রেসপনসিভ এবং ইন্টারঅ্যাকটিভ মেনু তৈরি করতে পারেন, যা বিভিন্ন ডিভাইসের জন্য উপযুক্ত।

১. Responsive Navigation তৈরি করা

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

বেসিক রেসপনসিভ ন্যাভিগেশন উদাহরণ:

<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="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</nav>

ব্যাখ্যা:

• top-bar: Foundation এর একটি ক্লাস যা টপ নেভিগেশন বার তৈরি করে।
• data-topbar: এই অ্যাট্রিবিউটটি Foundation JavaScript ফাংশনালিটি অ্যাকটিভেট করার জন্য ব্যবহৃত হয়।
• toggle-topbar menu-icon: এটি মেনু আইকন যোগ করে, যেটি মোবাইল স্ক্রীনে নেভিগেশন মেনু দেখানোর জন্য ব্যবহৃত হয়।

রেসপনসিভ ফিচার:

• ডেস্কটপে, মেনুটি সাধারণভাবে অনুভূমিকভাবে দেখা যাবে।
• মোবাইল ডিভাইসে, মেনুটি হ্যামবার্গার আইকনে পরিণত হবে এবং ক্লিক করার পর মেনুটি উন্মুক্ত হবে।

২. Dropdown মেনু তৈরি করা

Foundation এ ড্রপডাউন মেনু তৈরি করা খুবই সহজ। Foundation এর JavaScript এবং CSS ব্যবহার করে আপনি সাব-মেনু তৈরি করতে পারেন, যা ক্লিক বা হোভার করার মাধ্যমে প্রদর্শিত হবে।

বেসিক Dropdown মেনু উদাহরণ:

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>
    <a href="#">Services</a>
    <ul class="menu">
      <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>

ব্যাখ্যা:

• dropdown menu: এটি ড্রপডাউন মেনুর জন্য CSS ক্লাস। data-dropdown-menu অ্যাট্রিবিউটটি JavaScript ফাংশনালিটি অ্যাকটিভেট করে।
• <ul class="menu">: এই সাব-ড্রপডাউন মেনু যা মূল মেনুর অংশ।
• ড্রপডাউন মেনু যখন মাউস হোভার করা হয়, তখন এটি উপস্থাপিত হবে।

ড্রপডাউন মেনু ব্যবহার:

• Desktop: ড্রপডাউন মেনু ক্লিক বা হোভার করার মাধ্যমে প্রদর্শিত হবে।
• Mobile: মোবাইলে, ড্রপডাউন মেনু আন্ডারলাইন হবে এবং ব্যবহারকারীকে সাব-নেভিগেশন দেখতে ক্লিক করতে হবে।

৩. Responsive Navigation এবং Dropdown মেনু একসাথে

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

উদাহরণ:

<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="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="has-dropdown">
        <a href="#">Services</a>
        <ul class="dropdown menu" data-dropdown-menu>
          <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>
  </section>
</nav>

ব্যাখ্যা:

• has-dropdown: এটি এমন একটি ক্লাস যা ড্রপডাউন মেনু তৈরি করে।
• data-dropdown-menu: এটি JavaScript প্লাগইনকে সক্রিয় করে ড্রপডাউন মেনু প্রদর্শন করার জন্য।

এই উদাহরণে, ড্রপডাউন মেনু এবং রেসপনসিভ নেভিগেশন একত্রিত করা হয়েছে। ডেস্কটপে, এটি একটি সাধারণ ন্যাভিগেশন মেনু হবে, এবং মোবাইল ডিভাইসে এটি একটি হ্যামবার্গার মেনু হিসেবে প্রদর্শিত হবে। ড্রপডাউন মেনু "Services" মেনু আইটেমের সাথে যুক্ত রয়েছে, যা ক্লিক বা হোভার করলে সম্প্রসারিত হবে।

Foundation JavaScript প্লাগইন সহ নেভিগেশন

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

ড্রপডাউন মেনু কার্যকর করতে JavaScript:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

এটি Foundation এর JavaScript প্লাগইন সক্রিয় করবে এবং ড্রপডাউন মেনু এবং রেসপনসিভ নেভিগেশন কাজ করবে।

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