How to create Vertical Menu using HTML and CSS ?
Last Updated :
09 May, 2023
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.
HTML
<!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.
HTML
<!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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...