How to Make a Sidebar in HTML CSS and JavaScript


In this article, we will show you how to make a sidebar in HTML CSS and JavaScript. Well, There is thousands of article made about sidebar creation using JavaScript. But in this article, we will take a look at the toggle menu animation with sidebar sliding effect. Basically, Sidebar behaviour is simple. When you click on the toggle menu sidebar will slide in and you will see the navigation menu. We will create the same behaviour but we also add toggle menu animation with sliding. To use the event in our project we used JavaScript. JavaScript is the client-side programming language. It is very powerful and can be used for multiple purposes.

In the above image, you will see the sidebar with toggle menu. This sidebar contains site title, navigation item and social icons. On the right side, you will also see the sidebar toggle menu. When you click on the toggle menu it will animate. We will expand two bars of the navigation when we click on the toggle menu.

Look at the example. we will demonstrate everything from start to end.

Create Index.html

In this tutorial, we are creating two files. Index.html and Style.css. In Index.html file we design the sidebar and in the style.css file, we will style the HTML element. Now first look at the index.html file we will demonstrate all this code just after the code.

  • Well, In the above code we will first create a simple HTML5 snippet which contains the meta viewport, character set and title. After that, we will link two files. We will link font awesome website that helps us to use icons in the project. Just copy CDN( Content Delivery Network) and paste it in the head section.
  • Just after that link Style.css file in the head section. Use the link tag and specify the file path in the source attribute.
  • Well in the body section we insert container class. after that create a navbar class and specify id navID. we are using this id to access the element in javascript section. You can use separate javascript file but we will use the <script> tag to create javascript code. we will discuss it later in this article.
  • after that, we will create the toggle button and insert the span tag inside of it. Using this span tag we will create toggle menu button using CSS.
  • After that using unorder list and list tag we create navigation item. In the list tag, we will insert anchor tag and specify website name. Then specify home, blog, features and pricing text. At the last navigation item, we specify social icons.

Style.css

In the style.css file, we will style the HTML element. We specify static with for the sidebar if you want to change this value then you can change it. Following it the Style for the sidebar. You can make changes and create your own sidebar.

  • In this the stylesheet, we align sidebar on the right side of the screen. Add some styling like colour, background colour, font family, font size and many more.
  • After that, we will create a toggle menu. We will show this code separately. following is the code written in the style.css file to create toggle menu button.

    Using this code we create a toggle menu. You will see at the last we add show class. we use this class and add in the javascript toggle function. If you look at the code you will find we specify the different width for two bars of toggle menu.
  • Now everything is completed but we need to add some javascript code to generate an event.

JavaScript

We wanted to add javascript to add an event in the project. So we will first create the <script> tag and insert it just before the closing body element. Using script tag you can generate javascript code. Now Insert script tag and write this code inside of it.

In this function, we specify event parameter to the function. In this function, we call the toggle method of javascript. This method will add and remove CSS classes when you click on the HTML element. There is no limitation to use this toggle method you can use it for any type of event.

After that create an elem variable and get the navigation using document.getElementByID and specify navID. Then we will get the right CSS property and store it in the top variable. Well, you can specify any name for this variable. Then we create if and else statement to check if the navigation is expanded or not. To know that the top property helps us. If your navigation is expanded then we will change the right property value and shrink the navigation.

You will see in the if and else statement we changed the right property of the navigation menu. if you are finding out where is the click event? Then let me tell you in the index.html file we already specify it.

Here we specify click event to the button element. You can also use addEventListener to create the event. Now everything is done. What you need to do is just run the application.

After execution, you will able to access all the navigation element just in one click. When you click on the toggle button toggle bars will increase there size and you will see sidebar navigation. We also added the Hover effect to the navigation item so just move your mouse cursor over the element you will see the hover effect.

This example explained to you how you can create your own sidebar and use it on your website. There is more article on this website to know how you can make different elements. That is all for this article. Now you learnt How to make sidebar in HTML CSS and javascript.  For more information follow us on youtube.