Sidebar Menu using HTML & CSS

3
Side Bar Menu using HTML & CSS

Hello friends, Today in this blog I’m going to create a  Side Bar Menu using HTML & CSS. In a previous blog, I have shared a Drop-down Sidebar Menu in HTML CSS and today I will create a Side Bar Menu by using only HTML & CSS

The sidebar is a graphical control element that displays different forms of information to the right side or left side of an application window. Sidebar consists several links and submenu which helps the user to move various site within the webpage and makes easier for users. The sidebar became an essential part of the web pages or application.

In this program [Side Bar Menu], at first, there is a button at the left top side corner of the webpage, when that button clicked a bar appears with siding animation from the left side which has many navigation links with icons. When you hover the particular link little box-shadow effect will appear on the background with a left side white line which looks more attractive. There is also some social media icon at the bottom of the side menu with having hover effect.

If you are feeling difficult to understand. You can watch the full video tutorial [Transparent Side Bar Menu]

Video Tutorial of the Transparent Side Bar Menu

In the video, you have seen the side navigation menu with icons and I hope you’ve understood the basic codes behind creating this program. As you know, this is a pure CSS program that means I used only HTML & CSS to create this sidebar. So if you’re a beginner, then you can easily understand the codes of this program and able to create this type of sidebar.

I have Used an HTML Input checkbox to make Side Bar Slide and control it with a label tag in HTML. If you like this [Side Bar Menu] you can get the source code that I have given below:

You Might Like This:

Transparent SideBar Menu | Source Codes

First of all, to paste the given codes of [Fully Transparent Sidebar Menu], you need to create two files, one is an HTML file and another is a CSS file then you can paste the given codes in your HTML and CSS file. You can also download the source code file from the given “Download Button”.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Website Layout | CodingLab</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   </head>
<body>
  <div class="main_box">
    <input type="checkbox" id="check">
    <div class="btn_one">
      <label for="check">
        <i class="fas fa-bars"></i>
      </label>
    </div>
    <div class="sidebar_menu">
      <div class="logo">
        <a href="#">CodingLab</a>
          </div>
        <div class="btn_two">
          <label for="check">
            <i class="fas fa-times"></i>
          </label>
        </div>
      <div class="menu">
        <ul>
          <li><i class="fas fa-qrcode"></i>
            <a href="#">Dashboard</a>
          </li>
          <li>
            <i class="fas fa-link"></i>
            <a href="#">Shortcuts</a>
          </li>
          <li>
            <i class="fas fa-stream"></i>
            <a href="#">Overview</a>
          </li>
          <li>
            <i class="fas fa-calendar-week"></i>
            <a href="#">Events</a>
          </li>
          <li>
            <i class="fas fa-question-circle"></i>
            <a href="#">About</a>
          </li>
          <li>
            <i class="fas fa-sliders-h"></i>
            <a href="#">Services</a>
          </li>
          <li>
            <i class="fas fa-phone-volume"></i>
            <a href="#">Contact</a>
          </li>
          <li>
          <i class="far fa-comments"></i>
            <a href="#">Feedback</a>
          </li>
        </ul>
      </div>
      <div class="social_media">
        <ul>
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </ul>
      </div>
    </div>
  </div>
  </body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.main_box{
  position: relative;
  background: url('side.jpeg') right no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
.main_box .sidebar_menu{
  position: fixed;
  height: 100vh;
  width: 280px;
  left: -280px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: all 0.3s linear;
}
.sidebar_menu .logo{
  position: absolute;
  width: 100%;
  height: 60px;
  box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}
.sidebar_menu .logo a{
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  position: absolute;
  left: 50px;
  line-height: 60px;
  text-decoration: none;
}
.sidebar_menu .menu{
  position: absolute;
  top: 80px;
  width:100%;
}
.sidebar_menu .menu li{
  margin-top: 6px;
  padding: 14px 20px;
}
.sidebar_menu .menu i{
  color: #fff;
  font-size: 20px;
  padding-right: 8px;
}
.sidebar_menu .menu a{
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
.sidebar_menu .menu li:hover{
  border-left: 1px solid #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
.sidebar_menu .social_media{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  list-style: none;
  cursor: pointer;
}
.sidebar_menu .social_media i{
  text-decoration: none;
  padding: 0 5px;
  color: #fff;
  opacity: 0.6;
  font-size: 20px;
}
.sidebar_menu .social_media i:hover{
  opacity: 1;
  transition: all 0.2s linear;
  transform: scale(1.01);
}
#check{
  display: none;
}
.main_box .btn_one i{
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 16px;
  line-height: 60px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s linear;  
}
 .sidebar_menu .btn_two i{
  font-size: 25px;
  line-height: 60px;
  position: absolute;
  left: 240px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s linear;
}
.btn_one i:hover{
  font-size: 29px;
}
.btn_two i:hover{
  font-size: 24px;
}
#check:checked ~ .sidebar_menu{
  left: 0;
}
#check:checked ~ .btn_one i{
  opacity: 0;
}
#check:checked ~ .sidebar_menu .btn_two i{
  opacity: 1;
}

If you face any difficulties while creating your Sidebar Menu or your code is not working as expected, you can download the source code files for this Side Navigation Menu Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Previous articleAwesome Image Comparison Slider using HTML CSS & JavaScript
Next articleCustom Radio Buttons using only HTML & CSS

RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here