How to create Vertical Menu using HTML and CSS ?
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;" > w3wiki </ 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;"> w3wiki </ 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:
Contact Us