Dans notre exercice de mise en page en Responsive Design, une précision sur l’utilisation d’un menu « burger » et de son menu déroulant, avec deux méthodes possibles, en sachant que la seconde version est adaptée aux mobiles.

VERSION 1 : au passage de la souris sur le burger

Le code HTML (avec raccourci Emmet) :

<!– raccourci emmet : nav#navigation-principale>ul>li*3>a[href= »# »]>{Page $} –>
<nav id= »navigation-principale »>
<ul>
<li><a href= »# »>Page 1</a></li>
<li><a href= »# »>Page 2</a></li>
<li><a href= »# »>Page 3</a></li>
</ul>
</nav>

Le code CSS :

#navigation-principale::before {
content: « \2261 »;
display: block;
padding: .4rem 1rem;
text-align: right;
color: white;
font-size: 32px;
}

#navigation-principale ul {
display: none;
}

#navigation-principale:hover ul {
display: block;
}

VERSION 2 : en cliquant sur le burger avec la souris.

Le code HTML :

<label for= »case-a-cocher-01″></label>
<input type= »checkbox » id= »case-a-cocher-01″>
<nav id= »navigation-principale »>
<ul>
<li><a href= »# »>Page 1</a></li>
<li><a href= »# »>Page 2</a></li>
<li><a href= »# »>Page 3</a></li>
</ul>
</nav>

Le code CSS :

#navigation-principale,
#case-a-cocher-01 {
display: none;
}

:checked + #navigation-principale {
display: block;
}

label[for= »case-a-cocher-01″] {
display: block;
padding: .4rem 1rem;
text-align: right;
color: white;
font-size: 32px;
}

label[for= »case-a-cocher-01″]::after {
content: « \2261 »;
}

Avant :

Après :