How to create Vertical Menu using HTML and CSS ?
Last Updated :
09 May, 2023
Improve
In This article, we will learn how to create vertical menus by using HTML and CSS.
Vertical Menu: We can create a vertical menu in the form of buttons and a scrollable menu. Vertical Menu is the buttons arranged in the vertical menu bar/navbar.
How to create a vertical menu using buttons: We can create it simply by using HTML and CSS. We will create a simple structure of the web page by using <div>,<li>, and <a> tags.
Syntax:
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">1</a>
...
<a href="#">n</a>
</div>
Example: Here is the implementation of the above-explained method.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<style>
.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;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Vertical Menu</h3>
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">About Us </a>
<a href="#">Contact Us</a>
<a href="#">Login </a>
<a href="#">Sign Up</a>
</div>
</body>
</html>
Output:
How to create a vertical menu using scrollable: Here, we will see how to create a vertical menu using scrollable. To make this, we will use simple HTML and CSS.
Syntax:
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">1</a>
...
<a href="#">n</a>
</div>
Example: In this example implementation of the above demonstrated method.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<style>
.vertical-menu {
width: 200px;
height: 150px;
overflow-y: auto;
}
.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;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align: center;">
GeeksforGeeks
</h1>
<h3>Vertical Menu</h3>
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">About Us </a>
<a href="#">Contact Us</a>
<a href="#">Login </a>
<a href="#">Sign Up</a>
</div>
</body>
</html>
Output:
