Navigation এবং মেনু তৈরি

Foundation ফ্রেমওয়ার্ক ব্যবহার করে ওয়েবসাইটের জন্য ন্যাভিগেশন বার (navigation bar) এবং মেনু তৈরি করা সহজ এবং কার্যকর। Foundation-এর ন্যাভিগেশন কম্পোনেন্ট এবং মেনু সিস্টেম বেশ ফ্লেক্সিবল, যা ডেভেলপারদের বিভিন্ন ধরণের ন্যাভিগেশন বার তৈরি করতে সহায়তা করে, যেমনঃ হ্যামবার্গার মেনু, ড্রপডাউন মেনু, এবং রেসপনসিভ ন্যাভিগেশন।

১. বেসিক ন্যাভিগেশন বার তৈরি

Foundation এ একটি সাধারণ ন্যাভিগেশন বার তৈরি করতে top-bar কম্পোনেন্ট ব্যবহার করা হয়। এটি সাধারণত ওয়েবসাইটের শীর্ষে থাকে এবং সাধারণভাবে লিংকগুলো প্রদর্শন করে।

উদাহরণ:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">My Website</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Sign In</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</div>

এখানে:

• top-bar-left: ন্যাভিগেশন বারটির বাম দিকে লিঙ্ক বা টেক্সট প্রদর্শন করবে।
• top-bar-right: ডান দিকে অতিরিক্ত লিঙ্কগুলো যেমন সাইন ইন বা সাইন আপ দেখাবে।
• menu: একটি unordered list (UL) ব্যবহার করা হয়েছে ন্যাভিগেশন লিঙ্কগুলো সাজানোর জন্য।

২. ড্রপডাউন মেনু তৈরি

Foundation-এ ড্রপডাউন মেনু তৈরি করা অত্যন্ত সহজ। dropdown ক্লাস ব্যবহার করে ড্রপডাউন মেনু তৈরি করা হয়, যা মূল ন্যাভিগেশন লিঙ্কের অধীনে ছুটে আসে।

উদাহরণ:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="has-dropdown">
        <a href="#">Services</a>
        <ul class="dropdown">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">SEO</a></li>
          <li><a href="#">Content Writing</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

এখানে:

• has-dropdown: এটি সেই আইটেমের জন্য ব্যবহার করা হয় যার অধীনে ড্রপডাউন মেনু থাকবে।
• dropdown: ড্রপডাউন তালিকার জন্য ব্যবহৃত ক্লাস, যা ড্রপডাউন আইটেমগুলো ধারণ করে।

Foundation স্বয়ংক্রিয়ভাবে ড্রপডাউন মেনুটি পরিচালনা করে, এবং মাউস হোভার বা ক্লিক করার মাধ্যমে এটি প্রদর্শিত হয়।

৩. রেসপনসিভ ন্যাভিগেশন (Mobile-friendly)

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

উদাহরণ: রেসপনসিভ ন্যাভিগেশন (হ্যামবার্গার মেনু)

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">My Website</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Sign In</a></li>
    </ul>
  </div>
</div>

<!-- Hamburger Menu for Mobile -->
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
</div>
<div id="main-menu" class="top-bar-menu">
  <ul class="vertical medium-horizontal menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Sign In</a></li>
  </ul>
</div>

এখানে:

• title-bar: মোবাইলের জন্য হ্যামবার্গার মেনু তৈরি করার জন্য ব্যবহৃত হয়।
• data-responsive-toggle: এটি একটি ডেটা অ্যাট্রিবিউট যা মোবাইল ডিভাইসে মেনু টগল করার জন্য ব্যবহৃত হয়।
• menu-icon: এটি একটি আইকন বাটন যা মেনু টগল করবে।
• vertical medium-horizontal menu: এই ক্লাসগুলো ব্যবহার করে, মেনু ডিফল্টভাবে মোবাইলের জন্য ভারটিকাল এবং বড় স্ক্রীনে হরিজন্টাল হবে।

৪. নেভিগেশন ফ্লেক্সিবিলিটি ও কাস্টমাইজেশন

Foundation নেভিগেশন বারের মধ্যে আরো কাস্টমাইজেশন করার জন্য বিভিন্ন ধরনের ক্লাস এবং স্টাইলিং প্রদান করে। উদাহরণস্বরূপ:

• menu align-right: ন্যাভিগেশন বারকে ডানদিকে সজ্জিত করা।
• menu expanded: মেনু আইটেমগুলো অটো এক্সপ্যান্ড করা।

উদাহরণ:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu align-right expanded">
      <li><a href="#">Sign In</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</div>

এখানে:

• align-right: ডানদিকে মেনু আইটেম সাজানোর জন্য ব্যবহৃত হয়।
• expanded: মেনু আইটেমগুলো ডিফল্টভাবে এক্সপ্যান্ড করে রাখে।

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

Foundation ফ্রেমওয়ার্কের একটি জনপ্রিয় কম্পোনেন্ট হলো Top Bar Navigation। এটি ওয়েবসাইটের নেভিগেশন বার হিসেবে কাজ করে, যা বিভিন্ন সেকশনে দ্রুত পৌঁছানোর জন্য ব্যবহার করা হয়। Foundation-এর Top Bar কম্পোনেন্টটি খুবই কাস্টমাইজেবল এবং রেসপনসিভ (mobile-first) হয়, যাতে এটি বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।

Foundation এর Top Bar Navigation তৈরি করার প্রক্রিয়া

১. Basic Top Bar Setup

Foundation এর Top Bar তৈরি করতে প্রথমে আপনার HTML ফাইলে প্রয়োজনীয় CSS এবং JavaScript ফাইল যুক্ত করুন। আপনি যদি CDN ব্যবহার করছেন, তাহলে নিচের কোডটি আপনার HTML ফাইলে যুক্ত করতে হবে।

<!-- Foundation CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">

<!-- jQuery (Foundation এর জন্য প্রয়োজন) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Foundation JS -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>

২. Basic Top Bar HTML Structure

এখন HTML কোডে Top Bar এর স্ট্রাকচার তৈরি করুন। এটি একটি সাধারণ নেভিগেশন বার যা বিভিন্ন লিংক এবং অপশন ধারণ করবে।

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">My Website</li>
      <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>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</div>

এখানে:

• top-bar-left: এই অংশটি বাম পাশের নেভিগেশন লিঙ্কগুলির জন্য ব্যবহৃত হয় (যেমন, Home, About, ইত্যাদি)।
• top-bar-right: এই অংশটি ডান পাশের লিঙ্কগুলির জন্য ব্যবহৃত হয় (যেমন, Login, Sign Up)।
• menu: এটি একটি তালিকা (unordered list) যেখানে সব লিঙ্কগুলো রাখা হয়।

৩. Responsive Top Bar

Foundation এর Top Bar সিস্টেমটি স্বয়ংক্রিয়ভাবে রেসপনসিভ হয়ে থাকে। তবে, মোবাইল ডিভাইসে এটি একটি ড্রপডাউন মেনুতে রূপান্তরিত হবে। আপনি যদি এই আচরণটি কাস্টমাইজ করতে চান, তবে menu-icon এবং top-bar ক্লাসগুলির মাধ্যমে এটি করতে পারবেন।

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">My Website</li>
      <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>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
  <button class="menu-icon" type="button" data-toggle="top-bar"></button>
</div>

এখানে:

• button class="menu-icon": মোবাইল ডিভাইসে মেনু আইকন হিসেবে কাজ করবে এবং এটি ক্লিক করার পর মেনু দেখা যাবে।
• data-toggle="top-bar": এটি একটি Foundation-এর জাভাস্ক্রিপ্ট ডাটা অ্যাট্রিবিউট, যা মেনু আইকন ক্লিক করলে নেভিগেশন মেনু টগল (উন্মুক্ত) করবে।

৪. Customizing the Top Bar

Foundation এর Top Bar কাস্টমাইজ করার জন্য আপনি বিভিন্ন CSS স্টাইল এবং ক্লাস ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি টেক্সট কালার, ব্যাকগ্রাউন্ড কালার, বা হোভার ইফেক্ট যোগ করতে পারেন।

উদাহরণ:

<style>
  .top-bar {
    background-color: #333;
    color: white;
  }
  
  .top-bar .menu > li > a {
    color: white;
  }

  .top-bar .menu > li > a:hover {
    color: #f0a500;
  }
  
  .top-bar .menu-text {
    font-size: 1.5em;
    font-weight: bold;
  }
</style>

এখানে:

• .top-bar: টপ বারটির ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।
• .menu > li > a: মেনুর লিঙ্কগুলির টেক্সট কালার সাদা করা হয়েছে।
• .menu > li > a:hover: মেনু লিঙ্কের উপর মাউস হোভার করলে তার কালার পরিবর্তন করা হয়েছে।

৫. JavaScript Initialization (Optional)

Foundation এর Top Bar এর জন্য কিছু JavaScript প্রয়োজন হতে পারে। Foundation ফ্রেমওয়ার্কের JavaScript প্লাগইন স্বয়ংক্রিয়ভাবে কাজ করবে, তবে নিশ্চিত করার জন্য আপনি নিচের স্ক্রিপ্টটি ব্যবহার করতে পারেন:

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

এই স্ক্রিপ্টটি Foundation এর সকল জাভাস্ক্রিপ্ট ফিচার ইনিশিয়ালাইজ করবে, যাতে Top Bar এবং অন্যান্য কম্পোনেন্ট ঠিকভাবে কাজ করে।

Foundation এর Top Bar Navigation একটি খুবই শক্তিশালী এবং রেসপনসিভ নেভিগেশন কম্পোনেন্ট। এটি ছোট থেকে বড় স্ক্রীনের জন্য খুব সহজেই কাস্টমাইজ করা যায় এবং Foundation এর সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে সুন্দরভাবে কাজ করে। মোবাইল ডিভাইসে এটি একটি ড্রপডাউন মেনুতে রূপান্তরিত হয়, যা নেভিগেশনকে আরও ব্যবহারবান্ধব করে তোলে।

আপনার প্রয়োজন অনুযায়ী, আপনি মেনুর আইটেম যোগ, স্টাইলিং পরিবর্তন বা নতুন ফিচারও যুক্ত করতে পারেন।

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

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

Off-canvas মেনু

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

বৈশিষ্ট্য:

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

Off-canvas মেনু তৈরির উদাহরণ:

<!-- মেনু বাটন -->
<a href="#" class="button" data-toggle="offCanvas">Menu</a>

<!-- Off-canvas মেনু -->
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <ul class="vertical menu">
    <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>
</div>

<!-- Main content -->
<div class="off-canvas-content" data-off-canvas-content>
  <h1>Main Content</h1>
  <p>Content goes here...</p>
</div>

এখানে:

• data-toggle="offCanvas" মেনু বাটন ক্লিক করলে মেনুটি খোলার জন্য ব্যবহৃত হয়।
• off-canvas position-left ক্লাসটি মেনুর অবস্থান নির্ধারণ করে (এখানে বাম দিকে রাখা হয়েছে)।
• data-off-canvas অ্যাট্রিবিউটটি মেনুকে off-canvas হিসেবে চিহ্নিত করে।

Off-canvas মেনুর স্টাইলিং:

Foundation স্বয়ংক্রিয়ভাবে মেনু স্লাইড করার এনিমেশন এবং স্টাইলিং প্রয়োগ করবে। আপনি যদি প্রয়োজন হয়, তবে CSS বা Sass দিয়ে আরও কাস্টমাইজ করতে পারেন।

Drilldown মেনু

Drilldown মেনু একটি স্ট্যাকড মেনু, যেখানে একাধিক সাব-মেনু থাকে এবং একটিতে ক্লিক করলে পরবর্তী স্তরের মেনু খুলে যায়। এটি ব্যবহারকারীদের পছন্দ অনুযায়ী বিভিন্ন স্তরের মেনুতে নেভিগেট করতে সহায়তা করে।

বৈশিষ্ট্য:

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

Drilldown মেনু তৈরির উদাহরণ:

<!-- Drilldown মেনু -->
<ul class="menu drilldown" data-drilldown>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a>
    <ul class="menu">
      <li><a href="#">Web Development</a></li>
      <li><a href="#">App Development</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে:

• data-drilldown অ্যাট্রিবিউটটি মেনুতে Drilldown কার্যকারিতা চালু করে।
• প্রথম স্তরের মেনুর একটি আইটেমে ক্লিক করলে সাব-আইটেমগুলো drill down করে দেখানো হয়।

Drilldown মেনুর বৈশিষ্ট্য:

• মেনুতে স্তরের ডাউনলিংকিং সিস্টেম থাকে, অর্থাৎ সাব মেনুতে ক্লিক করলে নীচের স্তরের মেনু দেখা যায়।
• এটি অটোমেটিকভাবে ডিভাইসের আকার অনুযায়ী রেসপনসিভ হয়ে কাজ করে।

Off-canvas মেনু এবং Drilldown মেনুর মধ্যে পার্থক্য

Off-canvas মেনু এবং Drilldown মেনু দুইটি অত্যন্ত শক্তিশালী উপাদান Foundation ফ্রেমওয়ার্কের অংশ। Off-canvas মেনু মোবাইল-ফার্স্ট ডিজাইন এবং স্ক্রীন স্পেসের জন্য উপযুক্ত, যেখানে মেনুটি স্ক্রীনের বাইরে থাকে এবং ইউজার ক্লিক বা সুইপের মাধ্যমে দেখানো হয়। অপরদিকে, Drilldown মেনু ডেস্কটপ এবং বড় স্ক্রীনে ব্যবহৃত হয়, যেখানে একাধিক স্তরের মেনু থাকে এবং প্রতিটি স্তরে ক্লিক করলে পরবর্তী স্তর খোলা হয়। Foundation এই দুটি মেনু তৈরি করার জন্য সহজেই কাস্টমাইজযোগ্য টুল প্রদান করে।

Foundation ফ্রেমওয়ার্কের মাধ্যমে মেনু তৈরি করা খুবই সহজ এবং এটি মোবাইল-ফার্স্ট ডিজাইন সমর্থন করে। মেনুতে আইকন যুক্ত করা এবং সেগুলোর স্টাইলিং করার জন্য Foundation-এর মধ্যে থাকা CSS ক্লাস এবং JavaScript প্লাগইন ব্যবহার করা যায়। Foundation মূলত Font Awesome বা অন্যান্য আইকন লাইব্রেরি ব্যবহার করে মেনুতে আইকন যুক্ত করতে সহায়তা করে।

১. মেনু তৈরি করা: বেসিক উদাহরণ

প্রথমে, Foundation ব্যবহার করে একটি বেসিক হেডার মেনু তৈরি করি।

<nav class="top-bar" data-topbar>
  <ul class="menu">
    <li><a href="#">হোম</a></li>
    <li><a href="#">সেবা</a></li>
    <li><a href="#">আমাদের সম্পর্কে</a></li>
    <li><a href="#">যোগাযোগ</a></li>
  </ul>
</nav>

এটি একটি সাদামাটা মেনু, যেখানে শুধু সাধারণ লিঙ্ক রয়েছে। এখন এখানে আইকন এবং স্টাইল যোগ করার পদ্ধতি দেখব।

২. আইকন যুক্ত করা: Font Awesome ব্যবহার

Font Awesome হল একটি জনপ্রিয় আইকন লাইব্রেরি, যা সহজেই ওয়েবসাইটে আইকন যোগ করতে সহায়তা করে। Font Awesome ব্যবহার করতে:

১.1. Font Awesome লিঙ্ক যোগ করা:

Font Awesome লাইব্রেরি ওয়েবসাইটে যোগ করতে নিচের কোডটি <head> ট্যাগের মধ্যে যুক্ত করুন:

<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

১.2. মেনুতে আইকন যোগ করা:

এখন মেনুর লিঙ্কগুলোর সাথে Font Awesome আইকন যুক্ত করা যাবে। উদাহরণস্বরূপ:

<nav class="top-bar" data-topbar>
  <ul class="menu">
    <li><a href="#"><i class="fas fa-home"></i> হোম</a></li>
    <li><a href="#"><i class="fas fa-cogs"></i> সেবা</a></li>
    <li><a href="#"><i class="fas fa-info-circle"></i> আমাদের সম্পর্কে</a></li>
    <li><a href="#"><i class="fas fa-envelope"></i> যোগাযোগ</a></li>
  </ul>
</nav>

এখানে:

• <i class="fas fa-home"></i>: Font Awesome আইকন লোড করে, যা প্রতিটি মেনু আইটেমের পাশে একটি আইকন প্রদর্শন করবে।
• fas: Font Awesome এর "solid" স্টাইলের আইকন।
• fa-home, fa-cogs, fa-info-circle, fa-envelope: প্রতিটি মেনু আইটেমের জন্য নির্দিষ্ট আইকন।

৩. স্টাইলিং এবং ইন্টারঅ্যাকটিভ মেনু

Foundation-এর সাথে একটি রেসপনসিভ এবং ইন্টারঅ্যাকটিভ মেনু তৈরি করার জন্য JavaScript ব্যবহার করা হয়। এটি একটি ধীরে ধীরে স্লাইডিং মেনু তৈরি করতে সাহায্য করে।

৩.1. মেনুতে স্টাইল যোগ করা

Foundation-এ মেনু স্টাইলিং করার জন্য CSS ব্যবহার করা হয়। উদাহরণস্বরূপ, মেনুর লিঙ্ক এবং আইকনের মাঝে আরও স্পেস বা মার্জিন যুক্ত করা:

nav.top-bar .menu li a {
  padding-left: 10px; /* আইকন এবং টেক্সটের মাঝে স্পেস */
  font-size: 16px;
}

nav.top-bar .menu i {
  margin-right: 8px; /* আইকন এবং টেক্সটের মধ্যে দূরত্ব */
  font-size: 20px;
}

৩.2. রেসপনসিভ মেনু তৈরি করা (Mobile View)

Foundation মেনু স্বয়ংক্রিয়ভাবে মোবাইল ভিউতে Hamburger Menu আকারে পরিবর্তিত হয়। আপনি Foundation এর data-topbar অ্যাট্রিবিউট ব্যবহার করে এটি সক্রিয় করতে পারেন:

<nav class="top-bar" data-topbar>
  <ul class="menu">
    <li><a href="#"><i class="fas fa-home"></i> হোম</a></li>
    <li><a href="#"><i class="fas fa-cogs"></i> সেবা</a></li>
    <li><a href="#"><i class="fas fa-info-circle"></i> আমাদের সম্পর্কে</a></li>
    <li><a href="#"><i class="fas fa-envelope"></i> যোগাযোগ</a></li>
  </ul>
</nav>

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

৪. Foundation মেনুতে বিভিন্ন আইকন এবং স্টাইল

মেনুর আইকন এবং স্টাইল কাস্টমাইজ করতে আরও কিছু বৈশিষ্ট্য যুক্ত করা যায়:

৪.1. হোভার স্টাইলিং

nav.top-bar .menu li a:hover {
  color: #0078d4; /* হোভার করার পর আইটেমের রঙ পরিবর্তন */
}

৪.2. এনিমেশন যোগ করা

nav.top-bar .menu li a {
  transition: color 0.3s ease-in-out; /* মেনু লিঙ্কের ওপর হোভার করলে অ্যানিমেশন হবে */
}

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