Responsive Navbar Menu (VueJs)
One of the most important parts of the website nowadays is of course the navbar and not just a simple one but a responsive one.
In this example, I would like to show you a very simple way to create a navbar using VueJs framework (optional and can be replaced by a simple JavaScript or another framework).
HTML Structure
Here is a classing component of VueJs including the desktop navbar and its mobile version.
<template><div><div class="nav-menu"> // Menu container<i
class="fas fa-bars"
@click="showMenu()">
</i> // Hamburger icon with click method<div
class="nav-content"
:class="this.showMobileMenu ? 'open-menu' : 'closed-menu'"
> // Menu content<div class="logo">Logo</div> // Here can be a logo<ul class="nav-items">
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul><div class="login-button">Login</div></div>
</div>
</div></template>
The space between the tags is used for better understanding the example. In real-life coding, try to avoid useless whitespaces. 😉
For better understanding, here is the navbar with the styles on it. 👇
CSS Styles for Desktop and Mobile Versions
In the given example we have two versions of the navbar: desktop and mobile.
Then best and the simplest way to create a responsive navbar is to use FlexBox.
Our navabar consists of three blocks: logo, menu items and login. It is possible to create a simple navbar with just the menu items and to use flex just one time.
We have a general div (nav-menu) in which we created another div (nav-content) with our three blocks. It is better to do that way to be able to hide and show the menu (nav-content) on mobile version but still to have our navbar visible (nav-menu).
Please note, that some of the styles used for this example are not necessary and can be modified as you want it.
<style lang="scss" scoped>.nav-menu {
background-color: white;
}.nav-content {
display: flex;
justify-content: space-between;
padding: 10px 30px;
align-items: center;
}.nav-items {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;li {
padding: 0 10px;
}
}i {
display: none;
}// Mobile version - hidden hamburger menu@media screen and (max-width: 768px) {.nav-menu {
padding-top: 10px;
position: absolute;
width: 100%;
}.open-menu {
opacity: 1;
height: 150px;
}.closed-menu {
opacity: 0;
height: 0;
padding: 0;
}.nav-content {
flex-direction: column;
z-index: 100;
position: relative;
transition: all 0.2s ease-out;
}.nav-items {
flex-direction: column;
}i {
display: block;
text-align: right;
padding: 0 10px 10px 0;
}
}</style>
Open-menu and closed-menu are the two styles that allow us to change the condition of the menu on mobile version.
I decided to use opacity and height for the transition animation. It makes it smooth and more user friendly.
❌ You cannot use any animations for display: none — display:block.
JavaScript method
Here is the final step with the help of which you can actually activate your hamburger menu and show it on click.
In this example, we use VueJs methods but you can easily do the same action with a classic JavaScript structure.
<script>export default {data() {
return {
showMobileMenu: false,
};
},methods: {
showMenu() {
this.showMobileMenu = !this.showMobileMenu;
},
},
};</script>
Thank you for reading and I hope this example was useful for you. 😊