Does your Website Need a Hamburger Menu ?

HTML

Create an HTML file and build a small menu with the following code :

1. Do not forget to add the script at the end of your body in order to use Vue JS.

						
<div id="navigationDemo">
	<div ref="burgerVueDemo" id="navContainerDemo">
		<div @click="burgerMenuActiveDemo" id="iconDemo"></div>
		<nav class="navbarDemo">
			<ul class="navLinksDemo">
				<li class="navElementDemo"><a href="#">Home</a></li>
				<li class="navElementDemo"><a href="#">About us</a></li>
				<li class="navElementDemo"><a href="#">Contact</a></li>
			</ul>
		</nav>
	</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
						
					

CSS

Style your elements and set the behaviour of your elements when the size of the container changes with the following CSS :

1. Add style to the icon and put it on the left corner of your container.
2. Add styles to the demo section.
3. Add styles to the menu links of the navigation bar.
4. Define the behaviour of your elements inside the container when its width goes under 360px.

						
/* 1. */
#iconDemo {
    display: none;
    cursor: pointer;
    font-size: 30px;
    align-self: flex-start;
}

/* 2. */
#navContainerDemo {
    display: flex;
    justify-content: center;
    border-style: solid;
    resize: horizontal;
    overflow: auto;
    margin: 0 auto 0 0;
    min-width: 160px;
    container-type: inline-size;
    font-size: large;
    max-width: calc(70vw - 5px);
}

/* 3. */
.navLinksDemo {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 35px;
}

.navLinksDemo li{
    margin: 0 auto;
    list-style-type: none;
}

.navElementDemo a {
    text-decoration: none;
    font-size: 0.8rem;
}

.commentDemo {
    margin: 30px 20px 0 20px;
}

/* 4. */
@container (width < 360px) {
    #iconDemo {
        display: flex;
        justify-content: end;
        margin: 5px 5px;
    }

    .navbarDemo {
        flex-grow: 1;
    }

    #iconDemo:before {
        content: "\2630";
    }

    .active #iconDemo:before {
        content: "\2715";
    }

    #navContainerDemo.active {
        height: auto;
    }

    #navContainerDemo ul {
        position: relative;
        left: -200%;
        top: 5%;
        flex-direction: column;
        align-content: center;
        margin: 50px 0;
    }

    #navContainerDemo.active ul {
        left: 0;
        padding: 0;
    }

    .navLinksDemo li a {
        font-size: 1.5rem;
    }
}
						
					

Vue JS

1. Select the menu section and the different links.
2. Add an event to the icon : when toggled, it adds the "active" class. The icon appears and the menu disappears.
3. If you clink on a link, it will remove the "active" class, close the hamburger menu and redirects to the page in the link.

						
const burgerMenuDemo = Vue.createApp({
	methods: {
		burgerMenuActiveDemo() {
		const burgerVueDemo = this.$refs.burgerVueDemo;
		if (!burgerVueDemo) {
			console.error('Element with ref="burgerVue" not found.');
			return;
		}
		// 1.
		const links = burgerVueDemo.querySelectorAll("nav li");
		// 2.
		const navbar = this.$el.querySelector(".navbarDemo");

		burgerVueDemo.classList.toggle("active");

		// 3.
		links.forEach((link) => {
			link.addEventListener("click", () => {
			navbar.classList.remove("active");
			});
		});
		},
	},
	});

burgerMenuDemo.mount('#navigationDemo');