Sunday, March 24, 2024
HomeCSSHow to Create Modern Side Navigation Bar using HTML and CSS

How to Create Modern Side Navigation Bar using HTML and CSS

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

Download Code Files

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Posts

Categories