Create Side Navigation Bar also create Cool Social icons Using HTML , CSS & JAVASCRIPT || Spiritual Code

Hello all of you, welcome to my other blog of Responsive Side Navigation Bar. Today in this blog will learn to create a Responsive Sidebar Menu using Html CSS & Javascript. articles related to Side Navigation Bar or Sidebar Menu by using only HTML & CSS but today we will add JavaScript code also.

A sidebar is the combination of various navigation links that align on the right or left side of the webpage and helps to faster move from one webpage to another to the users. Basically, the sidebar is used for small sizes devices like a tablet, mobile, etc. The navigation bar and side navigation are works place for the same purpose. In large-size devices like Laptop, Computer their we can see a navigation bar and in small devices, we can see a sidebar or side navigation bar. Also You can see on right side at the bottom very cool social icons to see. They make more attractive.

I have uploaded one image of the side navbar design that we are going to create. As you can see on the top of the sidebar there is one small spiritual code logo, logo name, and one toggle button to open and close the sidebar. At the bottom of that sidebar, there are navigation links and one profile image and logout icon. This is the open form if sidebar and that right sidebar is in closed form.

You May Like This:

Side Navigation Bar [Source Code]

To copy-paste the given codes of the sidebar menu, first of all, you need to create two files, one is the HTML file and another is the CSS file. After creating these two files, you can copy-paste the given codes in your document. You can also download all source code files from the given download button.

Document

HTML CODE:

      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="UTF-8">
          <title> Responsive Sidebar Menu  | Spiritual Code </title>
          <link rel="stylesheet" href="style.css">
          <!-- Boxicons CDN Link -->
          <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
         </head>
      <body>
        <div class="sidebar">
          <div class="logo_content">
            <div class="logo ">
              <img class="logo"  src="profile.png" alt="">
              <div class="logo_name">Spiritual Code</div>
            </div>
            <i class='bx bx-menu' id="btn" ></i>
          </div>
          <ul class="nav_list">
            <li>
                <i class='bx bx-search' ></i>
                <input type="text" placeholder="Search...">
              <span class="tooltip">Search</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-grid-alt' ></i>
                <span class="links_name">Dashboard</span>
              </a>
              <span class="tooltip">Dashboard</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-user' ></i>
                <span class="links_name">User</span>
              </a>
              <span class="tooltip">User</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-chat' ></i>
                <span class="links_name">Messages</span>
              </a>
              <span class="tooltip">Messages</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-pie-chart-alt-2' ></i>
                <span class="links_name">Analytics</span>
              </a>
              <span class="tooltip">Analytics</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-folder' ></i>
                <span class="links_name">File Manager</span>
              </a>
              <span class="tooltip">Files</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-cart-alt' ></i>
                <span class="links_name">Order</span>
              </a>
              <span class="tooltip">Order</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-heart' ></i>
                <span class="links_name">Saved</span>
              </a>
              <span class="tooltip">Saved</span>
            </li>
            <li>
              <a href="#">
                <i class='bx bx-cog' ></i>
                <span class="links_name">Setting</span>
              </a>
              <span class="tooltip">Setting</span>
            </li>
          </ul>
          <div class="profile_content">
            <div class="profile">
              <div class="profile_details">
                <img src="profile.png" alt="">
                <div class="name_job">
                  <div class="name">Spiritual Code</div>
                  <div class="job">Web Designer</div>
                </div>
              </div>
              <i class='bx bx-log-out' id="log_out" ></i>
            </div>
          </div>
        </div>
        <div class="home_content">
          <div class="img">
            <img src="profile.png" height="150" alt="">
          </div>
          <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur dicta consectetur excepturi sapiente. Quidem neque enim, delectus ipsam assumenda quibusdam, eius eum alias excepturi blanditiis, sapiente iste mollitia repellendus. Optio mollitia ratione earum error, veniam Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum id temporibus totam. voluptatibus reiciendis animi! Saepe mollitia minima aspernatur ipsum molestiae reiciendis quam iure dolore assumenda labore delectus cupiditate, ab quidem earum adipisci odio error parminima!</div>
         <div class="icons">
          <div class="icon">
            <i class="bi bi-facebook"></i>
          </div>
          <div class="icon">
            <i class="bi bi-google"></i>
          </div>
          <div class="icon">
            <i class="bi bi-instagram"></i>
          </div>
          <div class="icon">
            <i class="bi bi-telegram"></i>
          </div>
          <div class="icon">
            <i class="bi bi-whatsapp"></i>
          </div>
         </div>
        </div>
        
      
        <script>
          let btn = document.querySelector("#btn");
          let sidebar = document.querySelector(".sidebar");
          let searchBtn = document.querySelector(".bx-search");

          btn.onclick = function () {
            sidebar.classList.toggle("active");
            if (btn.classList.contains("bx-menu")) {
              btn.classList.replace("bx-menu", "bx-menu-alt-right");
            } else {
              btn.classList.replace("bx-menu-alt-right", "bx-menu");
            }
          }
          searchBtn.onclick = function () {
            sidebar.classList.toggle("active");
          }
        </script>
      
      </body>
      </html>

CSS CODE:

      /* Google Font CDN Link */
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
      @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins" , sans-serif;
      }
      body{
        position: relative;
        min-height: 100vh;
        width: 100%;
        overflow: hidden;
      }
      ::selection{
        color: rgb(0, 0, 0);
        background: #000000;
      }
      .sidebar{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 78px;
        background: #000000b0;
        padding: 6px 14px;
        z-index: 99;
        transition: all 0.5s ease;
      }
      .sidebar.active{
        width: 240px
      }
      .sidebar .logo_content .logo{
        color: #fff;
        display: flex;
        height: 50px;
        width: 100%;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s ease;
      }
      .sidebar.active .logo_content .logo{
        opacity: 1;
        pointer-events: none;
        width: 50px;
        border-radius: 50%;
      }
      .logo_content .logo i{
        font-size: 28px;
        margin-right: 5px;
      }
      .logo_content .logo .logo_name{
        font-size: 20px;
        font-weight: 400;
        margin-left: 10px;
      }
      .sidebar #btn{
        position: absolute;
        color: #fff;
        top: 6px;
        left: 50%;
        font-size: 22px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        transform: translateX(-50%);
      }
      .sidebar.active #btn{
        left: 90%;
      }
      .sidebar ul{
        margin-top: 20px;
      }
      .sidebar ul li{
        position: relative;
        height: 50px;
        width: 100%;
        margin: 0 5px;
        list-style: none;
        line-height: 50px;
        margin: 5px 0;
      }
      .sidebar ul li .tooltip{
        position: absolute;
        left: 125px;
        top: 0;
        transform: translate(-50% , -50%);
        border-radius: 6px;
        height: 35px;
        width: 120px;
        background: rgb(0, 0, 0);
        line-height: 35px;
        color: white;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        transition: 0s;
        opacity: 0;
        pointer-events: none;
        display: block;
      }
      .sidebar.active ul li .tooltip{
        display: none;
      }
      .sidebar ul li:hover .tooltip{
        transition: all 0.5s ease;
        opacity: 1;
        top: 50%
      }
      .sidebar ul li input{
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        border-radius: 12px;
        outline: none;
        border: none;
        background: #030303;
        padding-left: 50px;
        font-size: 18px;
        color: #fff;
      }
      .sidebar ul li .bx-search{
        position: absolute;
        z-index: 99;
        color: #fff;
        background-color: rgba(3, 3, 3, 0.438);
        font-size: 22px;
        transition: all 0.5 ease;
      }
      .sidebar ul li .bx-search:hover{
        background: rgb(255, 255, 255);
        color: #050505;
      }
      .sidebar ul li a{
        color: #fff;
        display: flex;
        align-items: center;
        text-decoration: none;
        border-radius: 12px;
        white-space: nowrap;
        transition: all 0.4s ease;
      }
      .sidebar ul li a:hover{
        color: #000000;
        background: rgb(255, 255, 255);
      }
      .sidebar ul li i{
        font-size: 18px;
        font-weight: 400;
        height: 50px;
        min-width: 50px;
        border-radius: 12px;
        line-height: 50px;
        text-align: center;
      }
      .sidebar .links_name{
        font-size: 15px;
        font-weight: 400;
        opacity: 0;
        color: white;
        pointer-events: none;
        transition: all 0.3s ease;
      }
      .sidebar.active .links_name{
        transition: 0s;
        opacity: 1;
        color: rgb(0, 0, 0);
        pointer-events: auto
      }
      .sidebar .profile_content{
        position: absolute;
        color: white;
        bottom: 0;
        left: 0;
        width: 100%;
      }
      .sidebar .profile_content .profile{
        position: relative;
        padding: 10px 6px;
        height: 60px;
        background: none;
        transition: all 0.4s ease;
      }
      .sidebar.active .profile_content .profile{
        background: #0000009b;
      }
      .profile_content .profile .profile_details{
        display: flex;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        transition: all 0.4s ease;
      }
      .sidebar.active .profile .profile_details{
        opacity: 1;
        pointer-events: auto;
      }
      .profile .profile_details img{
        height: 45px;
        width: 45px;
        object-fit: cover;
        border-radius: 12px;
      }
      .profile .profile_details .name_job{
        margin-left: 10px;
      }
      .profile .profile_details .name{
        font-size: 15px;
        font-weight: 400;
      }
      .profile .profile_details .job{
        font-size: 12px;
      }
      .profile #log_out{
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        min-width: 50px;
        line-height: 50px;
        font-size: 20px;
        border-radius: 12px;
        text-align: center;
        transition: all 0.4s ease;
        background: #0a0a0c26;
      }
      .sidebar.active .profile #log_out{
        left: 88%;
      }
      .sidebar.active .profile #log_out{
        background: none
      }
      .home_content{
        position: absolute;
        height: 100%;
        width: calc(100% - 78px);
        left: 78px;
        background-color:black;
        background-image: url(1.jpg);
        background-position: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        box:shadow: 0 5px 10px rgba(0,0,0,0.2px);
        transition: all 0.5s ease;
      }
      .sidebar.active ~ .home_content{
        z-index: 100;
      }
      .home_content .text{
        position: absolute;
        font-size: 10px;
        font-weight: 500;
        color: #ffffff;
        margin: 12px;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
      }
      .home_content .img{
        left: 50%;
        top: 10%;
        position: absolute;
        transform: translateX(-50%);
        border: 2px solid red;
        overflow: hidden;
        height: 150px;
        width: 150px;
        border-radius: 50%;
      }
      .sidebar.active ~ .home_content{
        width: calc(100% - 240px);
        left: 240px;
      }
      .icons{
        position: absolute;
        color: white;
        top: 70%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%);
      }
      .icons i {
        padding: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      .icons i:hover{
        font-size: 30px;
      }
      .icon:hover{
        height: 50px;
        width: 50px;
      }
      .icon{
        background-color: rgba(0, 0, 0, 0.459);
        height: 40px;
        width: 40px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border-bottom: 3px solid red;
        transition: all 0.3s ease;
      }

Create Side Navigation Bar also create Cool Social icons Using HTML , CSS & JAVASCRIPT || Spiritual Code

Post a Comment

Contact Form