How to create: vertical menu

How to create a vertical button group

Step 1 - Add HTML:

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

Step 2 - Add CSS:

.vertical-menu {
  width: 200px; /* You can set the width if you wish */
}
.vertical-menu a {
  background-color: #eee; /* Gray background color */
  color: black; /* Black text color */
  display: block; /* Make the links display one after another */
  padding: 12px; /* Add some inner padding */
  text-decoration: none; /* Remove the underline of the link */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Dark gray background when mouse hovers */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Add green to the 'active/current' link */
  color: white;
}

آزمایش کنید

Vertical scrolling menu

If you want a vertical scrolling menu, please set a specific height and add overflow property:

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

آزمایش کنید

صفحات مرتبط

آموزش‌ها:چگونه ناوبری جانبی ایجاد می‌شود