How to create a vertical menu with CSS?
The Vertical menu allows displaying the list of pages in vertical order along the side of the web page. The vertical menus make the navigation easier. We can style the vertical menu using different properties of CSS.
Creating Vertical Menu
To add a list of options in the vertical menu use HTML <ul> element and add <a> within <li> tag. Now, we can use CSS properties to style the vertical menu.
- Add
background-color to set the background color for the vertical menu.
- Add
list-style-type: none to remove bullets from <ul> list.
- Add
padding and margin to create spaces between elements in the menu.
- Set the
width and height of the vertical menu.
- Use
text-decoration: none to remove the underline from the links.
- Use
:hover class to change the menu on hover.
Example: Creating a vertical menu using CSS properties
In this example, we have created the vertical list using an Unordered list and styled it using CSS properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.menu {
width: 200px;
list-style-type: none; /* removing bullerts from list */
}
/* Styling the links */
.menu a {
background-color: #dddddd;
display: block;
color: blue;
padding: 12px;
text-decoration: none;
font-size : 20px;
}
.menu a:hover {
background-color: #565656;
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h2> The vertical menu </h2>
<ul class="menu">
<li><a href="link" class="active">Home</a></link>
<li><a href="link">Menu</a></link>
<li><a href="link">study</a></link>
<li><a href="link">contact</a></link>
</ul>
</body>
</html>
Output
Here is the output of the above sample code.
Example: Adding vertical scrolls to the vertical menu
In this example, we are going to create a vertical menu using <div> element and add a list using <a> tag. Use display: block property so that each item aligns one after another vertically. Also, add height and overflow property for vertical scroll.
Conclusion
In this tutorial, we have learned to create a vertical menu using CSS. Here, we have used various properties to style the vertical menu. Further, we can also add a vertical scroll to the menu.
