Responsive Collapsible Hamburger Menu Using HTML-CSS-JQuery

In this article, we are creating Responsive Collapsible Hamburger Menu using HTML-CSS-JQuery. This article will demonstrate all about creating a responsive menu with HTML and CSS. For most of the reason, we need to create a responsive mobile friendly navigation menu. Especially, when you are a mobile-friendly friendly website.

Responsive Collapsible Hamburger Menu Using HTML-CSS-JQuery

Responsive Menu Using JQuery

In this article, we are creating this responsive collapsible hamburger Menu Using HTML-CSS-Jquery.

So let’s Jump into to code.

Step 1:-

Open up your text editor. we are using visual code. We recommend you to use this editor because it is light-weight.

After that, Create Index.html file you can choose any name for it. Then create a Style.css file to use the cascading style sheet.

Simply create a simple snippet of HTML5 in the index.html file. which content meta tag for responsiveness. title of your page.

Now, We will link Style.css file. So insert this code in the <head> tag.

And just after that, we will link font awesome. Using font awesome we will use icons in the project. So place this link in the head tag.

So now, In the body tag, we will create navigation menu design. If you are familiar with Twitter Bootstrap then this design will not difficult to understand.

In the above code, we created a <nav> tag. In this tag, we created div with navbar class and then insert website brand name and collapsible hamburger menu. We are using font awesome icon to create hamburger menu. so we just put this  <i class="fas fa-align-center fa-lg"></i> code to create hamburger.

Then we had created div with collapse class. this div will collapse when we click on the toggle button.

This div content ul and li tags. In the li tag, we specify navigation items and close both tags.

Step 2:-

In the second step, we will focus on styling. In the style.css file, we insert some classes to make navigation looks better. So import this code into the style.css file.

In this code, we added background code to navigation, change navigation brand font and color. and also float navigation brand in left and hamburger button on the right side. But you will only see the hamburger button when your screen size is less than 400 pixel. And we also created a hover effect to the hamburger menu button.

Now we will make this navigation Responsive. To make this responsive we will use media query of CSS.

Using @media we will apply all the style only when screen mate 456-pixel screen size.

Now we will create style classes which we wanted to apply for mobile or table size devices. So we put CSS classes in @media query.

This all classes were applied to the navigation menu when the screen mate 456-pixel screen. You can change this pixel size to your comfort.

And at the end of the class, you will see the .collapse class. we will call this class when the user clicks on the hamburger menu icon.

we will discuss this letter in this article.

Step 4:-

Now we will insert JQuery in our project. So we will copy jquery link from jquery CDN website and place it just before the closing </body> tag in the index.html file.

After that, we will create some code to create a click event. We wanted to create click event on the hamburger menu button. so we will create that in the <script> tag.

we are using jquery so we first create a document.ready() function. This function will execute when the whole page is loaded.

And then create click event on .toggle-collapse class which we provided to the div.

In the click event, we will call .navbar-collapse class which is created in the style.css file. and then call toggleClass function of jquery which is just like a switch.

Everything was created. our Responsive Collapsible Hamburger Menu Using HTML-CSS-JQuery is created Now.

Now run your project and resize screen size. if you are using chrome then just right click on the browser and select Inspect. On this screen select the mobile icon from the right side of the screen and resize your window.

You can also resize the browser window to see this effect.

After that press hamburger menu icon and you will see all navigation item will collapse down. After that when you again press the icon you will see menu item will collapse back.

When you change the screen size for the tablet then hamburger icon will disappear. and when you resize it to the mobile devices it again appears on the right side.

So that’s all for this Article.

If you like this article then comment us and share this article with your friends.

Follow us on Facebook Instagram and Youtube.

For more information subscribe to our daily tuition channel. On this channel, you will learn this from video tutorials.

Thank you.

 

Leave a Reply

Your email address will not be published. Required fields are marked *