Nous allons aujourd’hui voir comment créer un menu coulissant venant de la gauche de la page grâce au HTML, CSS et JavaScript. Voilà ce que nous voulons faire :
Commençons donc par le HTML. Il nous faut un contenu de navigation avec la balise nav. A l’intérieur, nous créérons 3 div pour les barres du menu et bien sûr des liens pour le menu. Puis nous ferons un bloc pour le texte informatif du milieu et enfin, un autre bloc sera créé pour mettre les icones des réseaux sociaux grâce à https://fontawesome.com :
<nav>
<div class="menu-btn">
<div class="line line--1"></div>
<div class="line line--2"></div>
<div class="line line--3"></div>
</div>
<div class="nav-links">
<a href="#" class="link">début</a>
<a href="#" class="link">milieu 1</a>
<a href="#" class="link">milieu 2</a>
<a href="#" class="link">fin</a>
</div>
</nav>
<div class="inform">
<p>Sublime<em>Code</em></p>
</div>
<div class="support">
<a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://codepen.io/000Bo/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>
Nous allons maintenant nous intéresser au CSS. Je vous donne le code de la première partie(car il y en aura plusieurs) et nous nous interressons à sa signification après.
html, body {
height: 400px;
width: 100%;
}
body {
margin: 0;
padding: 0;
background-image: radial-gradient(circle 248px at center, #16d9 0%, #37ec 47%, #46ae 100%);
}
nav {
overflow: hidden;
position: relative;
transform: translateX(-300px);
height: 100%;
width: 400px;
transition: all 800ms cubic-bezier(.8, 0, .33, 1);
border-radius: 0% 0% 100% 50%;
}
nav .menu-btn {
position: absolute;
top: 10%;
right: 5%;
padding: 0;
width: 30px;
cursor: pointer;
z-index: 2;
}
nav .menu-btn .line {
padding: 0;
width: 30px;
background: #fff;
height: 2px;
margin: 5px 0;
transition: all 1250ms cubic-bezier(.9, 0, .3, 1);
}
nav .menu-btn .line.line--1 {
width: 30px;
transform: rotate(0) translateY(0);
}
nav .menu-btn .line.line--2 {
width: 28px;
transform: translateX(0);
}
nav .menu-btn .line.line--3 {
width: 20px;
transform: rotate(0) translateY(0);
}
nav .nav-links {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(-100px);
opacity: 0;
transition: all 900ms cubic-bezier(.9, 0, .33, 1);
}
nav .nav-links .link {
margin: 20px 0;
text-decoration: none;
font-family: sans-serif;
color: rgba(0,0,0,0.9);
font-weight: 700;
text-transform: uppercase;
font-size: 1.2em;
transition: all 300ms cubic-bezier(.9, 0, .33, 1);
}
nav .nav-links .link:hover {
color: rgba(0, 0, 0, .5);
}
.inform{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.8);
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.support{
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
}
a{
margin: 0 20px;
color: #fff;
font-size: 2rem;
transition: all 400ms ease;
}
a:hover{
color: #222;
}
Ca fait un gros paquet de CSS, mais pas de panique. On définit tout d’abord des dimensions à notre page et on lui applique un dégradé radial en couleur de fond. Puis on met en forme le menu et on lui applique une translation de -300px pour ne pas le voir et on définit une transition précise grâce à cubic-bezier pour tout. Ensuite, on créer un fond pour les lignes des menus. Enfin, on définit la police, la couleur etc des liens et du texte.
Nous allons maintenant passer au code JavaScript qui est relativement simple. Il suffit juste de créer des classes HTML via le JS quand l’icône du menu est cliquée. D’abord, on récupère les balises qui nous intéressent dans des variables grâce à la méthode querySelector de document et ensuite on créer l’évènement du clic avec addEventListener. On utilise pour cela une fonction anonyme.
var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('nav .menu-btn .line--1');
var lineTwo = document.querySelector('nav .menu-btn .line--2');
var lineThree = document.querySelector('nav .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
nav.classList.toggle('nav-open');
lineOne.classList.toggle('line-cross');
lineTwo.classList.toggle('line-fade-out');
lineThree.classList.toggle('line-cross');
link.classList.toggle('fade-in');
})
Maintenant que nous avons créé les classes en JS, il faut les faire en CSS!
C’est donc là notre 2ème partie de CSS :
nav.nav-open {
transform: translateX(0px);
border-radius: 0;
background: rgba(255, 255, 255, 0.6);
}
nav .menu-btn .line.line--1.line-cross {
width: 30px;
transform: rotate(45deg) translateY(10px);
background: rgba(0,0,0,0.6);
}
nav .menu-btn .line.line--2.line-fade-out {
width: 28px;
transform: translate(30px);
opacity: 0;
}
nav .menu-btn .line.line--3.line-cross {
width: 30px;
transform: rotate(-45deg) translateY(-10px);
background: rgba(0,0,0,0.6);
}
nav .nav-links.fade-in {
opacity: 1;
transform: translateX(0px);
}
On retrouve ici toutes les classes que nous avons créées en JS. Pour ouvrir le menu, on lui fait faire une translation depuis -300px jusqu’à 0. Et(c’est là le plus intérressant!) on applique des translations aux lignes du menu pour qu’elles forment une croix pour fermer. Enfin, on applique une opacité de 1 aux liens pour les voir! Nous pourrions l’améliorer en créant un responsive design.
J’espère que ce tutoriel vous a plu et aidé. Vous pouvez le partager et le liker. Abonnez-vous aussi!!!
SublimeCode 