কিভাবে তৈরি করা: বড় মেনু

কিভাবে বড় মেনু (নেভিগেশন বারের ফুল ড্রপডাউন) তৈরি করবেন তা শিখুন。

বড় মেনু তৈরি করুন

একটি ড্রপডাউন মেনু তৈরি করুন যা ব্যবহারকারী নেভিগেশন বারের উপর মাউস লোকেশন করলে দেখা যাবে。

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">লিঙ্ক 1</a>
          <a href="#">লিঙ্ক 2</a>
          <a href="#">লিঙ্ক 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">লিঙ্ক 1</a>
          <a href="#">লিঙ্ক 2</a>
          <a href="#">লিঙ্ক 3</a>
        </div>
        <div class="column">
          <h3>শ্রেণী 3</h3>
          <a href="#">লিঙ্ক 1</a>
          <a href="#">লিঙ্ক 2</a>
          <a href="#">লিঙ্ক 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

উদাহরণ ব্যাখ্যা:

ড্রপডাউন মেনু খুলতে কোনও সামগ্রী ব্যবহার করা যেতে পারে, যেমন <button>、<a> বা <p> এলিমেন্ট。

ড্রপডাউন মেনু তৈরি করতে কনটেনার এলিমেন্ট (যেমন ডিভ ক্ল্যাস "dropdown-content") ব্যবহার করুন, এবং গ্রিড (কলাম) যোগ করে, যেখানে ড্রপডাউন লিঙ্ক যোগ করুন。

ডিভ ক্ল্যাস "dropdown" এলিমেন্ট ব্যবহার করে বাটন এবং কনটেনার এলিমেন্ট (ডিভ ক্ল্যাস "dropdown-content") প্যাক করে, যাতে ড্রপডাউন মেনুকে সঠিকভাবে অবস্থান দেওয়া যায়。

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

/* নেভিগেশন কনটেনার */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* নেভিগেশনের লিঙ্ক */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ড্রপডাউন মেনুর কনটেনার */
.dropdown {
  float: left;
  overflow: hidden;
}
/* ড্রপডাউন মেনু বাটন */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* মোবাইল এক্সেসের ভিক্টরিক্যাল অ্যালাইনমেন্ট অত্যন্ত জরুরি */
  margin: 0; /* মোবাইল এক্সেসের ভিক্টরিক্যাল অ্যালাইনমেন্ট অত্যন্ত জরুরি */
}
/* মাউস হভার হলে নেভিগেশন লিঙ্কে লাল পিছনবর্ণ যোগ করুন */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* ড্রপডাউন তালিকার বিষয় (ডিফল্ট লুকে) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* বড় মেনু শিরোনাম (যদি প্রয়োজন) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* মাউস লেন্ড করার সময় ড্রপডাউন মেনু দেখানো হয় */
.dropdown:hover .dropdown-content {
  display: block;
}
/* তিনটি সমানভাবে প্রস্থ করা স্তম্ভ তৈরি করুন, এবং তাদের সমানভাবে ফ্লোটিং করুন */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* স্তম্ভের লিঙ্কগুলির স্টাইল নির্ধারণ করা হয় */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* মাউস লেন্ড করার সময় ব্যাকগ্রাউন্ড কালার যোগ করা হয় */
.column a:hover {
  background-color: #ddd;
}
/* স্তম্ভের পরের ফ্লোটিং করা হয় না */
.row:after {
  content: "";
  display: table;
  clear: both;
}

আপনার নিজেই চেষ্টা করুন

উদাহরণ ব্যাখ্যা:

আমরা নেভিগেশন বার এবং নেভিগেশন লিঙ্কগুলির ব্যাকগ্রাউন্ড কালার, প্যাডিং ইত্যাদি স্টাইল নির্ধারণ করেছি。

আমরা ড্রপডাউন মেনু বাটনের ব্যাকগ্রাউন্ড কালার, প্যাডিং ইত্যাদি স্টাইল নির্ধারণ করেছি。

.dropdown-content শ্রেণী ড্রপডাউন মেনুতে অস্তিত্ব পায়, যা ডিফল্টে লুকিয়ে আছে।এটি মাউস লেন্ড করার সময় দেখানো হয় (উল্লেখ করা হলো)।এটি ড্রপডাউন মেনু বাটনের নীচে স্থাপন করা হয় এবং পূর্ণ স্ক্রিন আকারে ব্যাপক হয়

আমরা সীমানা ব্যবহার করছি না, এবং box-shadow অ্যাট্রিবিউট, যা ড্রপডাউন মেনুকে 'কার্ড' হিসাবে দেখায়।আমরা এছাড়াও z-index ড্রপডাউন মেনুকে অন্য উপাদানের আগের দিকে স্থাপন করুন

:hover ড্রপডাউন মেনু বাটনের উপর মাউস লেন্ড করার সময় ড্রপডাউন মেনু দেখানোর জন্য ব্যবহৃত সিলেক্টর

.column শ্রেণীকরণ করার জন্য ড্রপডাউন মেনুতে তিনটি সমানভাবে ফ্লোটিং স্তম্ভ তৈরি করার জন্য এই শ্রেণী ব্যবহৃত হয়。

সংশ্লিষ্ট পাতা

শিক্ষাদীপ্তি:সিএসএস ড্রপডাউন মেনু

শিক্ষাদীপ্তি:কিভাবে একটি ক্লিকযোগ্য ড্রপডাউন মেনু তৈরি করা যায়

শিক্ষাদীপ্তি:সিএসএস নেভিগেশন বার

শিক্ষাদীপ্তি:কিভাবে একটি রেসপন্সিভ টপ নেভিগেশন বার তৈরি করা যায়