How to Use CSS for Building a Vertical Menu

Creating a Vertical Menu Using CSS

Do you want to add a sleek and professional vertical menu to your website? Look no further! In this CSS vertical menu tutorial in English, we’ll guide you through the process step-by-step.

Step 1: HTML Markup

Start by setting up the HTML markup for the vertical menu. Here’s a basic example:

    
<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>
    
    

Make sure to add appropriate content and links for each menu item. You can also add additional CSS classes for styling and JavaScript functionality if needed.

Step 2: CSS Styling

Now, let’s style the vertical menu using CSS:

    
.vertical-menu {
  width: 200px;
}

.vertical-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.vertical-menu a:hover {
  background-color: #f5f5f5;
}

.vertical-menu .active {
  background-color: #4CAF50;
  color: #fff;
}
    
    

In the above example, we set the width of the menu to 200 pixels and added some padding for spacing. The display: block; property ensures that each menu item appears on a new line. The .active class is used to highlight the currently selected menu item.

Step 3: Incorporating Flexbox

If you want to take your vertical menu to the next level, you can use flexbox for even more flexibility:

    
.vertical-menu {
  display: flex;
  flex-direction: column;
}

.vertical-menu a {
  flex: 1;
}
    
    

By setting display: flex; and flex-direction: column;, the menu items will align vertically. The flex: 1; property distributes the available space evenly among the menu items, making them expand to fill the entire height of the menu.

Step 4: Adding Transitions and Animations

To make the vertical menu more visually appealing, you can incorporate CSS transitions and animations:

    
.vertical-menu a {
  transition: background-color 0.3s;
}

.vertical-menu a:hover {
  background-color: #f5f5f5;
  color: #000;
}

@keyframes slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.vertical-menu a {
  animation: slide-in 0.5s ease-in-out;
}
    
    

In the above example, we added a transition effect to smoothly change the background color of the menu items on hover. The @keyframes rule defines an animation that slides the menu items in from the top with a fade-in effect.

By following this CSS vertical menu tutorial, you can easily create a professional-looking vertical menu for your website. Play around with different styles, transitions, and animations to make it unique to your design. Remember to test your menus across various devices and browsers to ensure a seamless user experience.