Hello Coders, In this article you are going to learn modern side navigation bar using html and css.
What is Navigation menu?
Navigation bar is often used in websites to navigate around different pages inside an website. Having a great looking navigation bar improves the user experience. Navigation menu can be seen at the very top and in some sites nowadays, navigation can be seen at the left side of the screen.
What should I add in Navigation bar?
Commonly a navigation bar of any website contains
- Link to Home Page
- Link to About Us Page
- Link to Contact us Page
- Link to any other Important Page
In this article, you are going to learn how to build a side navigation menu using HTML and CSS. I have provided a step by step tutorial video as well as a guide on how to build it along with source code.
Side Navigation Menu in HTML and CSS | Video Tutorial
Are you a complete beginner to web development? If yes, consider watching the video tutorial. In the video I have shown how to build it step by step.
Side Navigation Bar with HTML and CSS | Free Source Code
Follow along with the below html and css code to build this. You can download the complete source code from download button at the bottom of this article.
How do I create navigation menu in HTML? HTML source code
Create an index.html file. Add basic structure of an html document by defining html, title, head, body. We are going to use custom icons from font awesome. I have provided the import code below for font awesome as well as the basic html boiler plate. Once done, Continue with below html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern Sidebar Menu</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
HTML Code : In index.html. Inside body, Add an aside tag and then follow the below code and import the required icons.
<aside>
<p>Menu</p>
<a href="#">
<i class="fa fa-user"></i>
My drive
</a>
<a href="#">
<i class="fa fa-laptop"></i>
Computers
</a>
<a href="#">
<i class="fa fa-clone"></i>
Shared with me
</a>
<a href="#">
<i class="fa fa-star"></i>
Starred
</a>
<a href="#">
<i class="fa fa-trash"></i>
Trash
</a>
</aside>
How do I design Navigation bar using CSS? CSS source code
Create a style.css file and dont forget to link this to our html document. Now follow the below css code.
CSS Code : Below is the CSS code. Follow along and type the css code from top to bottom. I have arranged it in such a way that any beginner will understand as they start typing the css code. Observe the changes it makes.
body {
width: 100%;
height: 100vh;
margin: 0;
}
aside {
color: #fff;
width: 250px;
padding-left: 20px;
height: 100vh;
background-image: linear-gradient(30deg, #0048bd, #44a7fd);
border-top-right-radius: 80px;
}
aside a {
font-size: 14px;
color: #fff;
display: block;
padding: 12px;
padding-left: 30px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
aside a:hover {
color: #3f5efb;
background: #fff;
outline: none;
position: relative;
background-color: #fff;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
aside a i {
margin-right: 5px;
}
aside a:hover::after {
content: '';
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 35px;
width: 35px;
border-bottom-right-radius: 18px;
box-shadow: 0 20px 0 0 #fff;
}
aside a:hover::before {
content: '';
position: absolute;
background-color: transparent;
top: 38px;
right: 0;
height: 35px;
width: 35px;
border-top-right-radius: 18px;
box-shadow: 0 -20px 0 0 #fff;
}
aside p {
margin: 0;
padding: 40px 0;
}
Once done, This is what you should be having at the end.
Thank you for Reading this Article.
Credits : FlorinCornea
Modern Side Navigation Bar | Download Source Code
