Subscribe Us

How to create Sidebar Navigation in HTML and CSS

Anil Singhania January 24, 2021

Hello friends how are you , Today in this post "Sidebar Navigation in HTML and CSS" we will learn how to create sidebar navigation menu using HTML, CSS and few lines of JavaScript code. If you want to create a website then you can use this navigation bar  to make your website very attractive. If you wan to create something interesting using simple HTML and CSS then this post is for you. 

If you want to understand this through video then watch this video i have explained it step by step live

Now i am going to explain step by step.

Step 1:Create a Folder: Just  create a folder with any name and in any drive in your system, In my case my folder name is SidebarNavigation.

Step 2:Create an HTML file: Now open notepad and type the below code or you can copy this code for your personal use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>krazyprogrammers</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  body{
    background-image: url('background.jpg');
    font-family: Arial, Helvetica, sans-serif;
  }
  .sidenav
  {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 1s;
    padding-top: 60px;
  }
  i{
    padding: 0px 5px;
    color: #1263ce;
  }
  .sidenav a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 19px;
    color: #818181;
    display: block;
    transition: 0.4s;
  }
  .sidenav a:hover{
    color: #f1f1f1;
    background-color: rgb(23,64,199);
  }
  .sidenav a:hover i{
    color: white;
    transition: 1s;
  }
  .sidenav .closebtn{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 35px;
    margin-left: 50px;
  }
  .sidenav .closebtn:hover{
    background-color: black;
  }
  @media screen and (max-width: 460px){
    .sidenav{padding-top: 15px;}
    .sidenav a{font-size: 18px;}
  }
</style>
</head>
<body>
  <div class="sidenav" id=mySidenav>
    <a class="closebtn" href="javascript:void(0)" onclick="closeNav()">
      &times;
    </a>
    <a href="#"><i class="fa fa-home"></i>Home</a>
    <a href="#"><i class="fa fa-cog"></i>Service</a>
    <a href="#"><i class="fa fa-user"></i>Registration</a>
    <a href="#"><i class="fa fa-lock"></i>Login</a>
    <a href="#"><i class="fa fa-user"></i>About</a>
    <a href="#"><i class="fa fa-address-book"></i>Contact</a>
    <a href="#"><i class="fa fa-image"></i>Gallery</a>

  </div>
  <span style="font-size: 30px;cursor: pointer;color: white;margin-top: 20px;" id="name" onclick="openNav()">
    &#9776;krazyprogrammers
  </span>
  <script>
     function openNav()
     {
       document.getElementById("mySidenav").style.width="250px";
       document.getElementById("name").style.marginLeft="250px";
       document.getElementById("name").style.transition="1.5s";
     }
     function  closeNav()
     {
      document.getElementById("mySidenav").style.width="0";
      document.getElementById("name").style.marginLeft="0";
     }
    </script>
</body>
</html>

Now save this file with name SideBar.html inside the created folder [SidebarNavigation]. Note:Don't forget to type .html after the file name because .html is the extension for HTML file.

Step 3:Download and store images: I have used an image for background. If you want to use the same image then  click here to download image. After downloading the image store it into the created folder SidebarNavigation.

After doing these your created folder will look like below.
Sidebar Navigation in HTML and CSS

Step 4:Run HTML file: Now its time to run HTML file so right click on SideBar.html file and then select open with and then select chrome browser or you can select any browser for output. 

Sidebar Navigation in HTML and CSS

You will get output screen like below image.

Sidebar Navigation in HTML and CSS

Now  click on 3 line bar icon which is on left top of the screen you will get output screen like below screenshot.

Sidebar Navigation in HTML and CSS
I hope now you can  create "Sidebar Navigation in HTML and CSS". If you have any doubt regarding this post  or you want something more in this post then let me know by comment below i will work on it definitely.
 

Request:-If you found this post helpful then let me know by your comment and share it with your friend. 
 
If you want to ask a question or want to suggest then type your question or suggestion in comment box so that we could do something new for you all. 

If you have not subscribed my website then please subscribe my website. Try to learn something new and teach something new to other. 

If you like my post then share it with your friends. Thanks😊Happy Coding.
Tags

Post a Comment

1 Comments