Responsive Sidebar Menu using HTML CSS and JavaScript

Responsive Sidebar Menu using HTML CSS and JavaScript

Responsive Sidebar Menu using HTML CSS and JavaScript

In this article, you will learn how to create a responsive sidebar menu bar using HTML CSS and JavaScript. Earlier I shared with you the design of many more types of responsive side navigation bars. I took the help of HTML CSS to create the basic structure of the Simple Sidebar. The menu buttons here help Javascript to work.

At first, I created a top bar but did not add any menu items. Just added a logo here and it has a menu button. I’ve added a number of menu items to the sidebar, each with an icon. Under normal circumstances, only icons can be seen and text cannot be seen.

Responsive Sidebar Menu in HTML CSS

Nowadays menu bar is a very important element for any website. Different websites use a top menu bar and some websites use top and side two types of menus. Undoubtedly the sidebar is much more attractive and attracts the attention of the user.

The width of the sidebar is 220px but in the normal case, its width will be 70px. When you click on the menu button here, you will see the icons with full text and the width of the sidebar will be 220px. In the case of small devices, this design (sidebar menu HTML CSS) can completely adapt itself.

Hopefully, the video above has helped you to know how it works. To build it you must have a basic idea of ​​HTML CSS and JavaScript.

Here is a step-by-step tutorial for beginners with a video where we have shared the complete tutorial. There is also a download button at the bottom of the article to download the source code.

Step 1: Sidebar’s basic code

Using the HTML and CSS code below, I have created the basic structure for this sidebar. All HTML code will be added to this HTML structure.

<div class=”wrapper hover_collapse”>
</div>
*{
font-family: ‘Baloo Paaji 2’, cursive;
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body{
background: #f5f5f5;
}

Step 2: Basic structure of the top menu bar

I have created the top menu bar with the help of the following codes. Here I have used the width: 100% and height: 60px of the top navigation bar. The background color is black and ‘top: 0’ and ‘left: 0’ are used to place it on top of the web page.

<div class=”top_navbar”>
</div>
.top_navbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #323233;
box-shadow: 1px 0 2px rgba(0,0,0,0.125);
display: flex;
align-items: center;
}
Basic structure of the top menu bar

1. Create a logo using text

Now a logo has been added to this top bar. I have added this logo with the help of text. Background width of this logo: 250px and font-size: 25px.

<div class=”logo”>Foolish Dev</div>
.top_navbar .logo{
width: 250px;
font-size: 25px;
font-weight: 700;
padding: 0 25px;
color: white;
letter-spacing: 2px;
text-transform: uppercase;
border-right: 1px solid #f5f5f5;
}
Create a logo using text

2. Create menu button

(more…)

Continue ReadingResponsive Sidebar Menu using HTML CSS and JavaScript
Sidebar Menu Using HTML, CSS & JavaScript

Sidebar Menu Using HTML, CSS & JavaScript

Sidebar Menu Using HTML, CSS & JavaScript

In this article, you will learn how to create sidebar menus using HTML, CSS, and JavaScript programming code. I have designed many more sidebar menus before. Hope you like these sidebar menus like those designs. 

In this case, I have used HTML to build and CSS programming code to design. In this case, a small amount of JavaScript has been used to activate the menu button. If you want to create a sidebar menu without JavaScript programming code, you can see the other designs I made. Clicking on the menu button here will hide the entire menu bar. 

When you click on that button again, the full menu bar will appear. This sidebar menu is designed in a modern way and has everything you need to make a sidebar beautiful and attractive. 

Sidebar Menu Using HTML CSS JavaScript

First of all, here I used a profile image. Below that is a place to give names and descriptions. Below that, I have added many menu items here. I added icons to each menu item. Adding icons makes menu items look more beautiful and attractive.

If you want, you can change these menu items to your liking. Here in the background, I have used blue color(background: rgb(5, 68, 104);) and added a hover color effect on menu items. The icons will change the background when you hover or click on the menu items. The sidebar menu is a very simple and simple design that you can undoubtedly learn to make very easily. 

If you want to see a live demo of this structure, you can see the demo section below. You can also copy the required source code from there and use it for your own purposes.

See the Pen
side bar menu by shantanu jana (@fghty)
on CodePen.


(more…)

Continue ReadingSidebar Menu Using HTML, CSS & JavaScript