Sidebar Menu Using Only HTML and CSS

This article shows you how to create sidebar menus using HTML and CSS code only. I have previously created many types of sidebars and navigation menubars using only HTML and CSS code so you can see those designs if you want.

 Side Menubar A popular web element is currently used in the sidebar along with menubars on various websites. Undoubtedly the side menu bar is much more attractive and for this, the quality and beauty of the website are greatly enhanced. Under normal circumstances, I have completely hidden the menu bar on the web page. 

There is a menu button that can be clicked to view the entire menu bar. There is also a cancel button which, when clicked, will completely hide the sidebar. In the sidebar, I have added links to various menu items, profile names, profile images, social media platforms.

 First I gave the profile image and below that, I gave the profile name. Then I added some menu items here and added icons to each menu item. Then I created the buttons of four social media platforms below all. In this case, I did not use any JavaScript code or any jQuery plugin. I only use HTML and CSS code I designed it. I used the checkbox to make this cancel and menu button work. If you have difficulty understanding then of course you can watch the demo below.

See the Pen Sidebar menu using html css by Raj Template (@RajTemplate) on CodePen.

Hope you find out from here how I created this simple sidebar menu. If you want to make it, you must follow the tutorial below. In the following tutorial, I have tried to explain to you how it is made by showing the possible results in each step.

1. Create the basic structure of the sidebar

First of all, I designed this sidebar, that is, its shape. In this case, I have used the width of the menu bar 250 px and the background # 020a0ee1.

<div class="sidebar">

 

</div>

.sidebar {

  position: absolute;

  width: 250px;

  background: #020a0ee1;

  transition: all 0.5s ease;

}

 2. Create profile images and titles

As you can see in the demo, this sidebar first contains the profile image and title. I have used the following HTML and CSS code to make it. I have used this image height and width of 120px and border radius 50%. 

Using border-radius, this image has a completely rounded shape. The header section differs from the sidebar in its background color. For this, I have used background color # 1a1c1dec here.

<header>

<img src="">

<p>Foolish Developer</p>

</header>

.sidebar header img {

  border-radius: 50%;

  width: 120px;

  height: 120px;

}

.sidebar header {

  font-size: 22px;

  color: #fff;

  text-align: center;

  line-height: 30px;

  background: #1a1c1dec;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  user-select: none;

}

3. Create the necessary menu items

Now I will add various links to this menu bar. To make the icons work here, you must add a font awesome CDN link to your HTML file. I used the font size of these menu items as 18 px. I have given Howie effect on these items. When you click on those menu items or move the mouse, a blue border will be created on the left side.

<ul>

    <li><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>

    <li><a href="#"><i class="fa fa-link"></i>Shortcuts</a></li>

   

 

    <li><a href="#"><i class="fa fa-book"></i>Event</a></li>

    <li><a href="#"><i class="fa fa-question-circle"></i>About</a></li>

    <li><a href="#"><i class="fas fa-desktop"></i>Service</a></li>

    <li><a href="#"><i class="fas fa-user-shield"></i>Contact</a></li>

</ul>

.sidebar ul a {

  display: block;

  height: 100%;

  width: 100%;

  line-height: 65px;

  font-size: 18px;

  color: #fff;

  padding-left: 40px;

  box-sizing: border-box;

  border-top: 1px solid rgba(80, 80, 80, 0.329);

  border-bottom: 1px solid black;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  transition: 0.4s;

}

.sidebar ul a i {

  margin-right: 16px;

}

/* hover effect */

ul li:hover a {

  border-left: 10px solid rgb(50, 200, 238);

}

4. Create social media buttons

This time we will add links to various social media platforms. Here I have basically used the links on four social media.

   <li>

      <div class="social-links">

        <a href="#"><i class="fab fa-facebook"></i></a>

        <a href="#"><i class="fab fa-youtube"></i></a>

        <a href="#"><i class="fab fa-twitter"></i></a>

        <a href="#"><i class="fab fa-whatsapp"></i></a>

        

      </div>

   </li>

.social-links i {

  padding: 10px;

  margin-left: 16px;

  margin-top: 10px;

  color: #fff;

  background: #05071aa1;

  font-size: 20px;

}

/* icons hover effect */

.social-links i:hover {

  color: #67fd41;

}

5. Add menu button and cancel button

This time we will create the Cancel and Menu buttons using the checkboxes. I will execute that menu bar using the following CSS codes. first I left the sidebar 250 px(left: -250px;). This will completely hide the sidebar. As I said before, this menu will be completely hidden under normal conditions. A small menu button will appear, clicking on which you will see the full bar. I checked: checked ~. I have left zero in the sidebar, that is, when I click on that menu button, it will be left zero. This means the menu bar can be seen.

Then I used the CSS code to determine the position of the Cancel and Menu buttons.

<input type="checkbox" id="check">

<label for="check">

<i class="fa fa-bars" id="btn"></i>

<i class="fa fa-times" id="cancle"></i>

</label>

.sidebar {

  left: -250px;

}

#check:checked ~ .sidebar {

  left: 0;

}

#check:checked ~ label #btn {

  left: 250px;

  opacity: 0;

  pointer-events: none;

}

#check:checked ~ label #cancle {

  left: 245px;

}

#check:checked ~ section {

  margin-left: 250px;

}

 Hopefully from this tutorial, you have learned how to create sidebar menus using only HTML and CSS code. If you like this tutorial, you can definitely see other menu designs made by me.

The download will start automatically