Responsive Navigation Menu with Hamburger Menu


Hey everyone, welcome to responsive navigation menu with a hamburger HTML and CSS  article. In this article, we are going to learn how to create responsive hamburger menu with HTML and CSS. Many times want to create your own navigation menu. Therefore, you use some custom library like bootstrap, foundation and something like. But what if we use our own library to do that.

Responsive Navigation

So In this lecture, we are going to create our own responsive navigation. So we will start with the design and create HTML.

Let’s create a simple project and create two files. One for the HTML design and second for the Style. So let’s start with the HTML first.

Index.html

In the head tag, we put all.css file to add icons from font awesome website. This file is optional if you don’t want to add icons in the navigation you can leave this file. You can download this file from the font awesome website. Just download the complete package and locate the all.css file. Don’t forget to add webfonts folder in the root directory of the project to inform all.css which font you want. 

Just after this file, you will find style.css this file used to style the navigation menu. Create style.css file in the root directory of the project. If you want to change its path you are free to do that.

In the HTML file, we didn’t do anything special. We just created some tags using div and also use the ul tag to create a list of navigations. You can also see we have a toggle-collapse class that represents a responsive navigation menu.

Now, this is a very simple design for a responsive navigation menu. But what about the style. Now let’s look at the style.css file.

Style.css

In this file, I just added a simple style to this navigation menu. If you take a closer look at style.css file then you will find we are using flexbox to make responsive navigation. Flexbox helps us to collapse block-level content when the size of the content is overflow.

I have a complete tutorial of creating a Navigation menu using HTML and CSS.

To create a hamburger menu I have use CSS. Along with that, I added a click event to this toggle menu using javascript. We are going to expand the height of the navigation menu using the height property of CSS. Using Javascript toggle method we are going to add and remove collapse class which has height property. It will create a very amazing toggle effect to the navigation menu.

So this is all about styling and designing what about making them dynamic. So the user can interact with it. let’s do it and make this navigation responsive.

Main.js

We are not adding anything special in this file. because it’s just simple navigation. To envoke click event we added onclick event handler. In the event handler, I will add the collapse class using the toggle method. You can also see toggle method to the event targeted element. It means we add toggle-click class to the targeted element using toggle method.

If you open and run index.html file you will see your navigation menu is completely ready to live. You can now check the responsiveness, check the toggle menu as well as hover effects on navigation links.

So that’s it for now. If you have any question ask me in the comment. If you wanted to download the source code the link is on Github.

That is all for now. I will see you in the next article with a new topic. So I will see you in the next one.

Leave a Reply

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