Foundation এর Top Bar Navigation তৈরি করা

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

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