← Article précédent Article suivant →
Publié le 03 octobre 2016

Dans ce tutoriel nous allons nous intéresser à l'icône hamburger en créant un menu responsive.

Introduction


L'idée principale est de pouvoir récupérer notre menu d'origine et l'intégrer dans la sidebar. Une fois notre page convenablement réduite, l'icône hamburger apparaît, s'apparentant à un bouton, une fois cliqué dessus nous venons ajouter une classe à notre noeud parent. De cette façon nous pouvons impacter sur le style de nos éléments lorsque l'hamburger a été cliqué.

La structure HTML


<div id="hamburger">
	<div id="hamburger-content">
		<nav>
			<ul>
				<li><a href="#">Découvrir</a></li>
				<li><a href="#">Comment ça marche</a></li>
				<li><a href="#">À propos</a></li>
				<li><a href="#">FAQ</a></li>
			</ul>
		</nav>
		<a href="#" class="button button-sign-up">S'inscrire</a>
		<a href="#" class="button button-sign-in">Se connecter</a>
	</div>
	<button id="hamburger-button">&#9776;</button>
	<div id="hamburger-sidebar">
		<div id="hamburger-sidebar-header"></div>
		<div id="hamburger-sidebar-body"></div>
	</div>
	<div id="hamburger-overlay"></div>
</div>

Un peu de JavaScript


Le contenu se trouvant dans "hamburger-content" s'ajoutera dans "hamburger-sidebar-body".
var content = document.querySelector('#hamburger-content');
var sidebarBody = document.querySelector('#hamburger-sidebar-body');

sidebarBody.innerHTML = content.innerHTML;
Ici le JavaScript va simplement nous servir à ajouter / retirer la classe ".hamburger-activated".
var button = document.querySelector('#hamburger-button');
var overlay = document.querySelector('#hamburger-overlay');
var activatedClass = 'hamburger-activated';

button.addEventListener('click', function(e) {
	e.preventDefault();

	this.parentNode.classList.add(activatedClass);
});

button.addEventListener('keydown', function(e) {
	if (this.parentNode.classList.contains(activatedClass))
	{
		if (e.repeat === false && e.which === 27)
			this.parentNode.classList.remove(activatedClass);
	}
});

overlay.addEventListener('click', function(e) {
	e.preventDefault();

	this.parentNode.classList.remove(activatedClass);
});

Media Query


Maintenant que nous pouvons savoir si le bouton hamburger a été cliqué ou non, si la taille de notre document est convenablement réduite, alors nous pouvons styliser en conséquence.
@media screen and (max-width: 1024px) {
    h1 {
        font-size: 42px;
        line-height: 56px;
    }

    #hamburger-content {
        display: none;
    }

    #hamburger-button, #hamburger-sidebar,
    .hamburger-activated #hamburger-overlay {
        display: block;
    }

    .hamburger-activated #hamburger-sidebar {
        transform: translateX(0);
    }
}

Retrouvez-moi sur les réseaux sociaux