html css and jquery hamburger menu responsive

Hey folks,

I'm back again with another exciting project. In this post we will learn how to make burger menu with just simple HTML, CSS and 4-5 lines of JQuery.

First of all create 3 files give them name as follows
1 - index.html
2 - style.css
3 - script.js

then import JQuery CDN link in your head area of html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>

Now your HTML file will look like similar to this one

ok so this is the major mistakes newbies do in their projects, they forget to import CDN in their projects.

Now if you know little bit about HTML and CSS you can make it by your own.

Because explaining each and every line of code will be more lengthy post.

But if you are not comfortable with HTML and CSS you can join this Highly rated course hosted on Eduonix.

for jquery part of this project

This is just simple jquery function which is trying to say that when btn Burger button is clicked change this two class to another two classes which is as follows.

.btn == .close-btn
.menu == .open-menu

Hope you are understand everything along this far, Now i highly recommend you to play with this codepen project.

It will help you to clear your concepts.