What do you need?

  • Basic knowledge about HTML, CSS and JavaScript
  • Text editor of your choice

Final code of this tutorial is uploaded on Code Pen. The link can be found on the bottom of the article.

Let’s start with writing our markup in html file:

That does not look good right? So our next step is to add some style, nothing fancy.

So, we are almost there. Now we need to add interactivity to our navigation. What I mean is to trigger an action after an event occurs. In our case we want to make our sidemenu appear after clicking on the burger icon on the top right. Also to make the icon change to an X icon that will make the sidemenu disappear. Entire JavaScript code that operates this functionality is quite short and takes just a couple lines:

All we do is toggle the CSS classes. When a click event occurs (burger icon is clicked), the callback function executes and toggles the classes “active” on both burger and sidemenu.

Extra: The same ToggleMenu function is executed on click on any of the links in the sidemenu (in this case removes the classes “active”).

I’ve uploaded project’s code on Code Pen so you can have a look on it, experiment, change stuff to check if it works :).

Code Pen Link

 

Spread the love

Leave a Reply

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