Simple Sidebar Menu Using HTML, CSS & JavaScript

Simple Sidebar Menu HTML CSS

From this tutorial, you will learn how to create simple sidebar menus using HTML CSS, and JavaScript. Currently, the HTML sidebar menu is an important web element that is often used in the case of websites.

Although navigation bars can be found on most websites. However, at the present time, both the navigation bar and the responsive sidebar menu are kept in the sites that are being created.

Earlier I shared many more sidebar HTML CSS designs. They are very advanced but this design is very simple.

Simple Sidebar Menu HTML CSS

If you know basic Html and CSS then you can easily create this CSS sidebar navigation menu. Some HTML, CSS and just 2 lines of JavaScript have been used to create this sidebar Html CSS template. Earlier I created a drop-down sidebar menu. But I used some jquery in it.

There are many types of side menubars. In some cases, this menu bar appears to be in a completely fixed state while in others it is in the form of a pop-up. 

We do not see the menu bar in popup format. A small button is found instead. In the responsive sidebar menu, I have given some menu items and there is a cancel button.


See the Pen Hamburger Menu by Shantanu Jana (@shantanu-jana) on CodePen.

Let me tell you something about how this HTML sidebar menu will work. First I created a basic structure of this sidebar whose width: 25rem and then using left: -25rem I moved it to 25rem on the left side.

Related Post:
1. Menu bar With Tooltip in CSS
2. Responsive Top Navigation Menu Bar
3. CSS Tab Bar with Animation
4. Sidebar Menu Using HTML, CSS
5. Vertical Navigation Menu Using HTML
4. Sidebar Menu Using HTML, CSS
4. Sidebar Menu Using HTML, CSS

As a result, we will not be able to see that simple side menu Html. There is a menu button which when clicked will be left: 0 which means we will see the whole sidebar again.

How to Create a Responsive Sidebar Menu in HTML CSS

Now let's learn how to create a simple sidebar Html CSS. Here I have shared a step-by-step tutorial. However, if you want, you can download all the necessary source code by clicking the button below the article.

1. The basic structure of the sidebar

First, you need to create a basic structure for the sidebar. As you can see in the demo above. We will add all the information in this area.


<div class="container">
  <nav class="nav-bar">

  </nav>
</div>




*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
}

Now the basic structure of the sidebar has been designed using CSS. Here the width: 25rem and height: 100vh of the sidebar have been used.


.container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(-45deg, #ee7752, #e73c7e);
  background-size: 400% 400%;
  position: relative;
}
.nav-bar {
  position: absolute;
  background-color: #122;
  top: 0;
  height: 100vh;
  width: 25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease-out;
}

The basic structure of the sidebar

Above we can see the width of the basic structure of this site bar: 25rem. But now it has to be completely hidden. 

To hide this, we move the sidebar to the left as wide as possible. As a result, the sidebar will not be visible in normal conditions.


.nav-bar {
  left: -25rem;
}

2. Menu button to open CSS Sidebar

Now you need to create a toggle button or menu button. We need to use three lines to create this toggle.


<div class="toggle-menu">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
</div>

The menu button is designed with the following CSS. I have used the width: 4rem, height: 3.5rem, and position: fixed of this button. As a result of using position: fixed, the toggle button can be seen even if the sidebar is completely hidden.


.toggle {
  left: 0;
  box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);

}
.toggle-menu {
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 2rem;
  left: 2rem;
  width: 4rem;
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
}


The sidebar navigation menu button is made up of 3 lines. The following CSS has been used to design those lines. I have used the height of the lines: 4px and white as the background color.


.line {
  width: 100%;
  height: 4px;
  border-radius:5px;
  background-color: #fff;
  transition: 0.2s ease-out;
}


Menu button to open CSS Sidebar

When you click on the menu button, you need to determine what these lines and buttons will change. When you click on the menu button, the first and third lines join together at 45 degrees to form a cross mark. And the middle line will be hidden.


.toggle .line1 {
  background-color: #e73c7e;
  transform: scale(0.9) rotateZ(-45deg) translate(-6px, 4px);
}
.toggle .line2 {
  display: none;
}
.toggle .line3 {
  background-color: #e73c7e;
  transform: scale(0.9) rotateZ(45deg) translate(-6px, -4px);
}

.toggle .toggle-menu {
  background-color: white;
}


menu button is designed with the following CSS

3. Add menu item in Simple Sidebar

Now we will add the menu items to this CSS sidebar navigation bar. Here I will basically add five menus to it. Then I will design them with CSS.


<ul class="nav-list">
    <li class="nav-list-item"><a href="" class="nav-link">Home</a></li>
    <li class="nav-list-item"><a href="" class="nav-link">About</a></li>
    <li class="nav-list-item"><a href="" class="nav-link">Projects</a></li>
    <li class="nav-list-item"><a href="" class="nav-link">Clients</a></li>
    <li class="nav-list-item"><a href="" class="nav-link">Contact Me</a></li>
</ul>



.nav-list {
  list-style: none;
}
.nav-list-item {
  text-align: center;
  padding: 1rem 0;
}
.nav-link {
  color: #fff;
  font-size: 2.2rem;
  text-decoration: none;
  position: relative;
  padding-bottom: 0.4rem;
}


Simple Sidebar Menu Using HTML

Now using CSS before I have added a hover color effect here. When you hover your mouse over those menu items, one underline text will be attached.


.nav-link::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scaleX(0);
  transition: 0.4s ease-in-out;
  transform-origin: left;
}
.nav-link:hover::before {
  transform: scaleX(1);
}


how to create responsive sidebar menu in HTML CSS

4. Activate the CSS Sidebar Menu

Now it's time to activate the Simple Sidebar Menu using JavaScript. I have added some information in the '.toggle' above. 

Now JavaScript has to add that information to the menu button. I have instructed her that when you click on that toggle button, the sidebar will be left: 0, and you will see the sidebar.


const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');


toggleButton.addEventListener('click', () => {
  navBar.classList.toggle('toggle');
});

HTML sidebar menu can be created in different ways. In many cases, Advance has some features and in some cases has a simple structure. Earlier I showed many more advice designs that included profile images, social media icons, and dropdowns.

Hopefully from this article, you have learned how to create a simple sidebar menu. If there is any problem then you can definitely comment.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more