Vue Tutorial How to make a responsive burger menu
Jun 05

A Hamburger menu will help if you have a big menu on your site, it is always recommended that you show pages you want to drive traffic to, like your blog. But sometimes there are a lot of pages on your website, so adding a hamburger menu can help save screen real estate, and it is universally recognized. If you want to add one to your website then you are in the right place.
Today, I will show you how you can add one using Vuejs. The first thing we are going to do is create a component to hold our hamburger code. By adding everything inside of a component you make sure that you can reuse this code for other purposes and it will be cleaner for your code.
Adding the HTML
The HTML for it in Vue is fairly simple. We need a simple parent div, in this case with an ID of burger. This element needs a class for the Dom to know when it is active or inactive, for that, I am going to bind a class using due like :class=“{}”.
This allows us to pass the selector we want and then as the value is a true or false statement, if it's true the css element will be added, if not then it will not add the class. In this case it will :class="{ 'active' : active}”. Keep in mind that in due you can do the same with style.
Adding the CSS
When I needed to add the menu to my client’s site, I looked everywhere and ended up combining different styles and modifying them. As you can see in the result each burger bar has an independent transition to give it a nice effect.
In this case, I use The cubic-bezier option in CSS. As these curves are continuous, they are often used to smooth down the start and end of the animation. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
There is an independent cubic-bezier for different styles, one for the transform, one for the background color one for the opacity, together they allow to create the nice animation you see in the hamburger menu. The transition between it being a hamburger menu and then a close icon (an x).
Changing the state from the parent component
Setting the state in Vue
It is now time to set up the state in our data object in the due instance, in this case, the parent for burger. I am going to set the key as menuActive, and then the value will be if it's mobile then false and if it's desktop then true.
The way I know it's by getting the inner width of the window. You can do it like window.innerWidth > 991, so when the page loads if it's mobile it will hide the menu, and if it's desktop then it will show the menu.
This will complete the work with the default due to animations, they don’t slide or do anything just shows and hides. If you want to add animation then continue reading, I will add animation using Velocity JS
Animating the menu
Vue has a transition mechanism that we can take advantage of the transitions. You can read more about it right here https://vuejs.org/v2/guide/transitions.html
First, we need to add a transition wrapper around the menu, make sure it wraps the element that has the v-show or v-if in it. Once you do that, Vue knows that this has a transition. For this animation, I am going to use Javascript hooks.
The Javascript hooks allow us to specify the transitions that we want at different stages of the transition, in this case, we are going to use the enter and leave hooks, and then the before-enter hook for the overlay. The way we can do this is by binding an event to the transition element. [Transition code with the hooks]
Next, we have to add the methods that the hooks are referring to, we are going to go to the parent of the Birger for this, in my case the due instance itself, but you can use the parent component if that is what you have.
One more state that I am going to set up for the overlay, in our case it will be globalOverlay.active. This way I can show or hide the overlay on the background so that users focus on the menu and not anything else.
Back to the methods, on the beforeEnter method, we will display the overlay, on the enter method, we will use Velocity to make the margin-left 0 and on the leave method, we will use Velocity to make the margin-left -100%.
beforeEnter () {
if (this.isMobile) {
this.globalOverlay.active = true
}
},
enter (el, done) {
Velocity(el, {
marginLeft: 0
}, {
complete: done
}, {
duration: 300
})
},
leave (el, done) {
Velocity(el, {
marginLeft: '-100%'
}, {
complete: done
}, {
duration: 300
}).then(() => {
if (this.isMobile) {
this.globalOverlay.active = false
}
})
},
Conclusion
We now have our animation, and the toggle works with the menu I am going to share the full version of the code on github so you can grab it. The last step is to add the styles for the menu itself, and this is going to account for both the mobile and desktop. Once we add it our menu is done and we can start using it in our website. Make sure you watch the video for more guidance.