CSS Dropdown Menu: HTML এবং CSS দিয়ে ড্রপডাউন মেনু তৈরি করার পদ্ধতি

আজকাল ড্রপডাউন মেনু অধিকাংশ আধুনিক ওয়েবসাইটের একটি সাধারণ বৈশিষ্ট্য। এই মেনুগুলো ব্যবহারকারীদের সহজে ওয়েবসাইটে তাদের খুঁজে পাওয়া কন্টেন্ট খুঁজে পেতে সাহায্য করে।

CSS Dropdown Menu কী?

HTML-এ ড্রপডাউন মেনু তৈরির জন্য কোনো নির্দিষ্ট ট্যাগ নেই। তবে CSS ব্যবহার করে আমরা এমন একটি মেনু তৈরি করতে পারি যা ব্যবহারকারী মেনু লেবেলের ওপর মাউস হোভার করলে কন্টেন্ট বা লিংকের তালিকা দেখাবে। এই টিউটোরিয়ালে আমরা HTML এবং CSS উভয়ই ব্যবহার করে ড্রপডাউন মেনু তৈরি করব।

প্রজেক্ট পরিস্থিতি

একটি স্থানীয় ব্যাডমিন্টন ক্লাব তাদের ক্লাবের তথ্য অনলাইনে শেয়ার করার জন্য একটি ওয়েবসাইট তৈরি করার অনুরোধ করেছে। ক্লাবটি চায় একটি ড্রপডাউন মেনু যা ব্যবহারকারী "New Members" লেবেলের ওপর হোবার করলে তিনটি পেজ দেখাবে: Equipment, Getting Started, এবং Membership Information।

HTML কাঠামো তৈরি

প্রথমে বেসিক মেনু কাঠামো HTML-এ তৈরি করি:

<div class="menu"> 
  <button class="dropdown_button">New Members</button> 
  <div class="content"> 
    <a href="equipment.html">Equipment</a> 
    <a href="gettingstarted.html">Getting Started</a> 
    <a href="membership.html">Membership Information</a> 
  </div> 
</div>

এই কোডে আমরা:

menu ক্লাস সহ একটি <div> তৈরি করেছি যা মেনুর কোড ধারণ করে।
New Members টেক্সট সহ একটি বাটন তৈরি করেছি।
লিংক들의 তালিকা দেখানোর জন্য content ক্লাস সহ একটি নতুন <div> তৈরি করেছি।
তিনটি <a> ট্যাগ ব্যবহার করে তিনটি পেজের লিংক তৈরি করেছি।

CSS স্টাইলিং

এখন মেনুকে স্টাইল করার জন্য CSS ব্যবহার করি:

.dropdown_button { 
  background-color: #90EE90; 
  color: white; 
  padding: 10px; 
  font-size: 15px; 
  border: none; 
}

.menu { 
  display: inline-block; 
  position: relative; 
}

.content { 
  display: none; 
  background-color: lightgray; 
  min-width: 150px; 
  z-index: 1; 
  position: absolute; 
}

.content a { 
  text-decoration: none; 
  display: block; 
  color: black; 
  padding: 16px; 
}

.content a:hover { 
  background-color: #f7f7f7; 
}

.menu:hover .content { 
  display: block; 
}

কোড ব্যাখ্যা

.dropdown_button: ড্রপডাউন বাটন স্টাইল করে - হালকা সবুজ ব্যাকগ্রাউন্ড, সাদা টেক্সট, 10px প্যাডিং, 15px ফন্ট সাইজ, বর্ডার নেই।
.menu: পুরো মেনুর স্টাইল - relative positioning এবং inline-block display।
.content: ড্রপডাউন কন্টেন্টের স্টাইল - ডিফল্টভাবে লুকানো (display: none), হালকা স্লেটি ব্যাকগ্রাউন্ড, ন্যূনতম 150px প্রস্থ, absolute positioning, z-index: 1।
.content a: ড্রপডাউন লিংকগুলো স্টাইল করে - আন্ডারলাইন সরিয়ে দেওয়া, block display, কালো টেক্সট, 16px প্যাডিং।
.content a:hover: লিংকের ওপর হোভার করলে ব্যাকগ্রাউন্ড রঙ হালকা স্লেটি (#f7f7f7) হয়।
.menu:hover .content: ব্যবহারকারী মেনুর ওপর হোবার করলে ড্রপডাউন কন্টেন্ট block হিসেবে প্রদর্শিত হয়।

ডান পাশে ড্রপডাউন মেনু

যদি ড্রপডাউন মেনু স্ক্রিনের ডান পাশে দেখাতে চান, তবে নিচের CSS রুল যোগ করুন:

.content { right: 0; }

উপসংহার

HTML ব্যবহার করে ড্রপডাউন মেনুর বেসিক কাঠামো তৈরি করা যায়, তারপর CSS ব্যবহার করে সম্পূর্ণ এবং সৌন্দর্যপূর্ণ ড্রপডাউন মেনু তৈরি করা সম্ভব। এই টিউটোরিয়ালে উদাহরণসহ HTML এবং CSS ব্যবহার করে ড্রপডাউন মেনু তৈরির পদ্ধতি আলোচনা করা হয়েছে।