چگونه ایجاد می‌شود: منوی عمودی

چگونه یک گروه دکمه عمودی ایجاد کنیم

مرحله اول - اضافه کردن HTML:

<div class="vertical-menu">
  <a href="#" class="active">خانه</a>
  <a href="#">لینک 1</a>
  <a href="#">لینک 2</a>
  <a href="#">لینک 3</a>
  <a href="#">لینک 4</a>
</div>

مرحله دوم - اضافه کردن CSS:

.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; /* پس‌زمینه تیره قهوه‌ای برای حالت hover */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* به لینک‌های فعال/حال حاضر سبز اضافه می‌شود */
  color: white;
}

اپنے آپ پر تجربہ کریں

منوی عمودی

اگر می‌خواهید منوی عمودی بچرخد،高度 مشخص کنید و overflow کیفیت:

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

اپنے آپ پر تجربہ کریں

ملازمت پینج

تعلیم:کمپنی کی سائیڈ بار کی تشکیل