কিভাবে তৈরি করবেন: ভিক্তিমুখী মেনু

কিভাবে ভিক্তিমুখী বাটন গ্রুপ তৈরি করবেন

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

<div class="vertical-menu">
  <a href="#" class="active">হোম</a>
  <a href="#">লিঙ্ক ১</a>
  <a href="#">লিঙ্ক ২</a>
  <a href="#">লিঙ্ক ৩</a>
  <a href="#">লিঙ্ক ৪</a>
</div>

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

.vertical-menu {
  width: 200px; /* যদি আপনি চান, তাহলে প্রস্থতা সংযোজিত করুন */
}
.vertical-menu a {
  background-color: #eee; /* গ্রে পিছনবর্তীর রঙ */
  color: black; /* কালো লিঙ্ক রঙ */
  display: block; /* লিঙ্ককে এক-একটা করে দেখানো */
  padding: 12px; /* কিছু অভ্যন্তরীণ মাঝারি যোগ করুন */
  text-decoration: none; /* লিঙ্কের নীচের লাইন মিটানো */
}
.vertical-menu a:hover {
  background-color: #ccc; /* মাউস হভেস এর গভীর গ্রে পিছনবর্তী */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* “সক্রিয়/বর্তমান” লিঙ্ককে সবুজ রঙ যোগ করুন */
  color: white;
}

亲自试一试

ভিক্তিমুখী স্ক্রোলিং মেনু

আপনি যদি ভিক্তিমুখী স্ক্রোলিং মেনু চান, তাহলে নির্দিষ্ট উচ্চতা সংযোজিত করুন overflow 属性：

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

亲自试一试

相关页面

教程：如何创建侧边导航栏