Sidebar Menu Using HTML and CSS

Today in this blog will learn to create a Responsive Sidebar Menu using Html CSS & Javascript. I have been designing and writing several video tutorials and articles related to Side Navigation Bar or Sidebar Menu by using only HTML & CSS but t…


This content originally appeared on DEV Community and was authored by Mystery Code

Today in this blog will learn to create a Responsive Sidebar Menu using Html CSS & Javascript. I have been designing and writing several video tutorials and articles related to Side Navigation Bar or Sidebar Menu by using only HTML & CSS but today we will add JavaScript code also.

To see the real demo of this animated dashboard side navbar and all the code that I have used to create this type of sidebar, you need to watch the full video tutorial of this programming that I have given below.

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.

HTML code:


<!--icon style link: <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> --> 

 <div class="sidebar">
    <div class="all">
      <!--menu button-->
      <div class="logo_content">

        <!--profile image-->
        <div class="logo">
          <header>
            <img src="profile.jpg" alt="">
            <p>Mystery Code</p>
          </header>
        </div>
        <i class="bx bx-menu" id="btn"></i>
      </div>

      <ul class="nav_list">
        <li><a href="#">
          <i class="bx bx-grid-alt"></i>
          <span class="links_name">Dashboard</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-user"></i>
          <span class="links_name">User</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-chat"></i>
          <span class="links_name">Messages</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-pie-chart-alt-2"></i>
          <span class="links_name">Analytics</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-folder"></i>
          <span class="links_name">File Manager</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-cart-alt"></i>
          <span class="links_name">Order</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-heart"></i>
          <span class="links_name">Saves</span>
        </a></li>
      </ul>
    </div>

    <!--social icon-->


    <div class="profile_content">
      <div class="profile">
        <div class="links_name">
          <div class="social-links">
            <a href="#"><i class="bx bxl-twitter"></i></a>
            <a href="#"><i class="bx bxl-facebook"></i></a>
            <a href="#"><i class="bx bxl-instagram"></i></a>
            <a href="#"><i class="bx bxl-youtube"></i></a>
          </div>
        </div>
        <!--share button-->
        <i class="bx bx-share-alt" id="log_out"></i>
      </div>
    </div>


  </div>

  <!--body background-->
  <div class="home_content">
    <div class="text">
      <img src="image.jpg" alt="">
    </div>
  </div>

CSS code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 78px;
  background: #11101d;
  padding: 6px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}
.sidebar ul{
  margin-top: 130px;
}
.sidebar ul li{
  position: relative;
  height: 50px;
  width: 100%;
  margin:  0 5px;
  list-style: none;
  line-height: 50px;
  margin: 5px 0;
}
.sidebar ul li a{
  color: #fff;
  align-items: center;
  display: flex;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition: all 0.4s ease;
}
.sidebar ul li a:hover{
  color: #11101d;
  background: #fff;
}
.sidebar .links_name{
  font-size: 16px;
  font-weight: 400;
  opacity: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.sidebar ul li i{
  font-size: 22px;
  font-weight: 400;
  height: 40px;
  min-width: 50px;
  line-height: 40px;
  text-align: center;
  border-radius: 12px;
}
.sidebar #btn{
  position: absolute;
  color: #fff;
  top: 6px;
  left: 50%;
  font-size: 27px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
}
.sidebar.active{
width: 240px;
}
.sidebar.active .links_name{
  opacity: 1;
  pointer-events: auto;
  transition: 0s;
}
.sidebar.active #btn{
  left: 90%;
}
.sidebar img{
  width: 120px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 120px;
}
.sidebar .logo_content .logo{
  color: #fff;
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.1s ease;
}
.sidebar.active .logo_content .logo{
  opacity: 1;
  pointer-events: none;
  transition: all 2s ease;
}
.logo p{
  font-size: 21px;
  margin-left: 30px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.home_content{
  position: absolute;
  height: 500px;
  width: calc(100% - 78px);
  left: 78px;
  background-size: cover;
  transition: all 0.5s ease;
}

.sidebar.active ~ .home_content{
  z-index: 100;
  width: calc(100% - 240px);
  left: 240px;
}
.home_content .text img{
  background-position: center;
  background-size: cover;
  height: 660px;
  width: 100%;
}


/* ========= scrolling effect ======*/

.all{
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
/* hide scroll bar */
.all::-webkit-scrollbar{
  width: 0px;
}


.sidebar .profile_content{
  position: absolute;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
}
.sidebar .profile_content .profile{
  position: relative;
  padding: 10px 6px;
  height: 60px;
  background: none;
  transition: all 0.4s ease;
}
.social-links i{
 padding: 8px;
 margin-left: 10px;
 margin-top: 7px;
 color: rgb(233, 234, 236);
 background: #393b57;
 border-radius: 50px;
 width: 33px;
 height: 33px;
 font-size: 17px;
 text-align: center;
}
.social-links i:hover{
  background: #36adf1;
}
.sidebar.active .profile_content .profile{
  background: #1d1b31;
}
.profile #log_out{
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 24px;
  border-radius: 12px;
  text-align: center;
  transition:  all 0.4s ease;
  background: #1d1b31;
}
.sidebar.active .profile #log_out{
  left: 90%;
}

JAVASCRIPT Code

    // active button using javascript

    let btn = document.querySelector("#btn");
    let sidebar = document.querySelector(".sidebar");


    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");
      }
    }

You can also download all image and source code files from the given download button.

Download Source code


This content originally appeared on DEV Community and was authored by Mystery Code


Print Share Comment Cite Upload Translate
APA
Mystery Code | Sciencx (2022-10-06T02:42:24+00:00) » Sidebar Menu Using HTML and CSS. Retrieved from https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/.
MLA
" » Sidebar Menu Using HTML and CSS." Mystery Code | Sciencx - Saturday May 1, 2021, https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/
HARVARD
Mystery Code | Sciencx Saturday May 1, 2021 » Sidebar Menu Using HTML and CSS., viewed 2022-10-06T02:42:24+00:00,<https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/>
VANCOUVER
Mystery Code | Sciencx - » Sidebar Menu Using HTML and CSS. [Internet]. [Accessed 2022-10-06T02:42:24+00:00]. Available from: https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/
CHICAGO
" » Sidebar Menu Using HTML and CSS." Mystery Code | Sciencx - Accessed 2022-10-06T02:42:24+00:00. https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/
IEEE
" » Sidebar Menu Using HTML and CSS." Mystery Code | Sciencx [Online]. Available: https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/. [Accessed: 2022-10-06T02:42:24+00:00]
rf:citation
» Sidebar Menu Using HTML and CSS | Mystery Code | Sciencx | https://www.scien.cx/2021/05/01/sidebar-menu-using-html-and-css/ | 2022-10-06T02:42:24+00:00
https://github.com/addpipe/simple-recorderjs-demo