How To Create Vertical Navigation Menu Using HTML and CSS?
Creating a Vertical Navigation Menu
Vertical Navigation Menu or let’s say navbar in short is a type of menu that we are familiar with. These types of menu bars are often seen while visiting websites.
In this “How-To” section we have prepared a tutorial on “How To Create Vertical Navigation Menu Using HTML and CSS?”.
After reading these How-To tricks you will be able to build your own vertical navigation menu on any of your websites. You will learn the secret behind how these menus are created.
This article is for those who are complete beginners and have a basic understanding of HTML and CSS. If you are a beginner then it is absolutely great. You will have some hands-on practice.
We have divided this article into two sections i.e. Section A and Section B.
Section A covers structuring the Navigation Menu while Section B teaches you how to style the navigation menu.
Before diving straight into the tutorial section let’s have some setup.
First, create a new folder on your computer. Now open the folder in the text editor. In our case, we will use Microsoft Visual Studio Code.
You can use any of your favorite text editors or IDE. Once you’ve opened the folder create two files named index.html and style.css inside your text editor.
Section A: Structuring the Navigation
Once you’ve completed all the necessary setup you’re ready to begin.
First open the index.html and write a code for the HTML basic structure. Inside the head tag we will include an external link for styling our document i.e. linking style.css.
We will also use font-awesome icons and a Google font named Roboto in our program.
Include these code snippets inside the head tag.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">Once you’ve added the above code snippets in the head section, create a div with class “navigation-menu” inside your body tag.
Now create an anchor tag inside the div element as mentioned in the code snippet below.
<div class="navigation-menu">
<a href="#" class="active"><i class="fa fa-home"></i>Home</a>
<a href="#"><i class="fa fa-file"></i>About</a>
<a href="#"><i class="fa fa-address-card"></i>Service</a>
<a href="#"><i class="fa fa-image"></i>Gallery</a>
<a href="#"><i class="fa fa-phone"></i>Contact</a>
</div>Here is the full code snippet for you index.html page. This is how it will look once you’ve finished implementing all the above mentioned code.
If you are still confused then you can use this full code. Just copy all the code from the snippet and paste it into your index.html page.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Navigation Bar Using HTML & CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
</head>
<body>
<div class="navigation-menu">
<a href="#" class="active"><i class="fa fa-home"></i>Home</a>
<a href="#"><i class="fa fa-file"></i>About</a>
<a href="#"><i class="fa fa-address-card"></i>Service</a>
<a href="#"><i class="fa fa-image"></i>Gallery</a>
<a href="#"><i class="fa fa-phone"></i>Contact</a>
</div>
</body>
</html>Section B: Styling the Navigation Menu
Now it is time to style the navigation menu that we have just created. All the codes are written inside the style.css file.
Always remember to link both the HTML and CSS files together before writing some codes. If you forgot to link these files then you will not be able to see any changes within your program.
To link your index.html file with style.css file use this code snippet below.
<link rel="stylesheet" href="path to your css file">
In our case we will use the following the code
<link rel="stylesheet" href="style.css">Once you’ve linked these files now you are ready to move forward. Just use this code snippet inside your style.css
body{
padding: 0;
margin: 0;
}
.navigation-menu {
width: 173px;
height: 100vh;
background-color: #555;
}
.navigation-menu a {
text-decoration: none;
display: block;
text-align: center;
padding: 34px;
font-size: 20px;
font-family: 'Roboto', sans-serif;
color: #fff;
}
.navigation-menu a:not(:last-child){
border-bottom: 1px solid #fff;
}
.navigation-menu a:hover{
background-color: #444;
}
.navigation-menu > a > i {
margin-bottom: 12px;
font-size: 45px;
display: block;
}
.active{
background-color: #2375e6;
}This is how you can create a simple vertical navigation menu for your project. Not only navigation menu but you also learned to implement font-awesome icons and Google fonts in your project.
Demo: Creating Vertical Navigation Menu
If you want to see how this vertical navigation menu looks then you can see the demo of the program. Click Me.
I hope you’ve enjoyed learning these how-to tricks. If you have any queries regarding this article please feel free to leave your thoughts in the comment box below. Till then Happy Learning.
Wait we also have a video tutorial that will show you how you can create a vertical navigation menu. Please do check the video.