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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="header"> <div class="header__inner flex--end"> <div class="burger-menu"> <label id="burger"> <div></div> <div></div> <div></div> </label> <nav class="sidemenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Get in Touch</a></li> </ul> </nav> </div> </div> </div> |
That does not look good right? So our next step is to add some style, nothing fancy.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
* { box-sizing: border-box; padding: 0; margin: 0; } .flex--end { display: flex; justify-content: flex-end; align-items: center; height: 100%; } .header { height: 96px; position: fixed; width: 100%; background-color: #fcd232; box-shadow: 0px 1px 10px 0px rgba(83, 83, 83, 0.68); } .header__inner { width: 90%; margin: 0 auto; } .sidemenu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #302f38; transform: translateX(-100%); transition: all 0.3s ease-in-out 0s; } /* active class on menu */ .sidemenu.active { transform: translateX(0%); } #burger { cursor: pointer; width: 30px; height: 27px; display: flex; justify-content: space-between; flex-direction: column; } #burger > div { height: 4px; z-index: 999; border-radius: 20px; align-self: flex-end; width: 100%; background-color: #302f38; transition: 0.2s ease-in-out; } .sidemenu ul { margin: 96px 0 0 20px; } .sidemenu ul li { list-style-type: none; margin-bottom: 30px; } .sidemenu ul li a { font-family: "Tangerine", serif; text-decoration: none; color: #fff; font-size: 18px; text-transform: uppercase; } #burger div:nth-child(2) { width: 80%; } #burger div:nth-child(3) { width: 60%; } #burger:hover div { width: 100%; } /* active class on burger*/ #burger.active div:nth-child(1) { transform: translateY(11px) rotate(45deg); background-color: #fff; width: 100%; } #burger.active div:nth-child(2) { opacity: 0; background-color: #fff; } #burger.active div:nth-child(3) { transform: translateY(-12px) rotate(-45deg); background-color: #fff; width: 100%; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Selection of HTML objects const burger = document.querySelector("#burger"); const sidemenu = document.querySelector(".sidemenu"); const sidemenuLink = document.querySelectorAll(".sidemenu ul li a"); // Defining a function function toggleMenu() { burger.classList.toggle("active"); sidemenu.classList.toggle("active"); } // Calling the function after click event occurs burger.addEventListener("click", toggleMenu); sidemenuLink.forEach((link) => { link.addEventListener("click", toggleMenu); }); |
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 :).