Skip to main content

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.





Tags

Comments

Post a Comment

Ask Me Anything ........

Popular Posts

Animated Progress Bar using Only HTML and CSS

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you...
Post a Comment
Read more

Neumorphism login form UI Design using HTML and CSS

In this article, I will show you how to create a Neumorphism login form UI design . We all know that the login form plays an important role in any website. Basically, we face the login form to access the account on different websites. Where we can log in to our account with a username and password.  Neumorphism is currently a very popular UI trend that is being used extensively to create a variety of web elements. This type of design is more beautiful than ordinary design and it is much easier to make.  This Neumorphism login form I created only with HTML and CSS code. Here is the complete color of the background color and the color of the web element. Basically, in this type of design, the background color of the web page and the element is completely the same. However, in this case, some shadows are created using CSS code which determines the size of these elements.  I put everything here like a normal login form . First of all, I added a title then there is no pla...
Post a Comment
Read more

Neumorphism Social Media Buttons using HTML & CSS

Neumorphism Social Media Buttons are much more beautiful than ordinary button designs. You can make this type of design using only HTML and CSS. In this article, I am going to show how CSS  Neumorphism social media buttons are created using HTML and CSS code. Earlier I showed the design of many more types of social media buttons using Neumorphism design. Neumorphism is a phenomenal UI trend that is currently being used to create a variety of elements. Such designs are much more attractive and much easier to make. These are basically made using a box-shadow of CSS code.  There are two types of Neumorphism designs , one is dark and the other is light. In this case, I have made light Neumorphism social media buttons. Social media buttons are used in different places so that the user can share the content in his social account. CSS Neumorphism Social Media Buttons [Live Demo]  Below I have given a live demo that will help you understand how this CSS Neumorphism social m...
Post a Comment
Read more

Sidebar Menu using Only HTML and CSS

Here you will learn how to create Sidebar Menu using Only HTML and CSS. I have created many more sidebar menus but in that case, I have used JavaScript code to make it work. In this case, I did not use any JavaScript or external library.  I have designed the menu on this site using pure HTML and CSS code. Normally it is completely hidden and a small button is found on the home page. When you click on that button, we see the full sidebar menu .  In this case, I have used the profile image to complete it. I also used icons with each menu item.  In this case, instead of JavaScript, I have implemented this HTML sidebar menu  using the checkbox function of HTML code. As I said under normal conditions only we can see a small button. When you click on that button, the full sidebar will appear. This sidebar has a small cancel button which, when clicked, will completely hide the menu bar again. Video Tutorial of Side Navigation Menu If you do not understand what ...
Post a Comment
Read more