Graphiste » Blog » Webdesign » Menu Responsive

Menu responsive – HTML & CSS

Qu’est-ce qu’un menu responsive ?

Le menu responsive sert simplement à optimiser la navigation de vos pages principales sur toutes les tailles d’écrans. En général, nous trouvons 2 versions différentes du menu dont l’un sur un ordinateur, et l’autre sur mobile. Par exempte, la position du menu et son style, tel que son background, ou bien sa couleur, peuvent être configurés différemment sur un téléphone. Cela améliore l’accessibilité, mais peut également jouer sur l’expérience utilisateur sur votre site internet.

Méga menu

Vous aviez peut être envisagé de créer un méga menu : On a tendance à mettre trop élément dans ce type de navigation. Résultat : trop de liens s’affichent sur un petit écran. Le site perd toute son ergonomie sur mobile, et votre visiteur a juste envie de s’enfuir.. Le méga menu est également l’un des gros inconvénient en SEO ( Comme par exemple, le fait que le PageRank soit divisé )

 

Je ne vous conseille pas d’opter pour un méga menu, mais plutôt de réfléchir à une architecture cohérente entre vos différentes pages et catégories sur votre site web.

Menu classique

Faites un menu responsive simple et efficace : Limitez-vous au page les plus importantes. Le fait d’avoir un site simple aide clairement l’utilisateur à comprendre votre structure. Il est important d’avoir très peu de lien dans son menu, et de déployer le contenu au fur et à mesure. Au delà de 8 pages dans le menu principal, je vous conseille de réfléchir à un meilleur moyen de naviguer entre vos pages.

Menu responsive

Créer une page simple en HTML

Pour créer une page HTML, rien de plus simple, vous pouvez copier ce code et l’enregistrer dans un fichier .html. Sur ce code, nous trouverons une page html super classique, contenant un <link> vers un fichier CSS. Également, vous trouverez une structure très simple du menu avec la balise <nav>. J’y ai incrusté des classes pour que vous compreniez à quoi correspond quel élément.


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'un menu responsive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="Le_menu">
<div class="Toutes_les_pages>
<a href="#">Accueil</a>
<a href="#">Actualité</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>

Styliser le menu en CSS

Maintenant que le menu est en place, il faut développer son style et l’adapter à vos besoins. Par exemple, si vous ne souhaitez qu’il fasse 8 colonnes, il faudra l’indiquer clairement dans le code. Dans le cas où vous utilisez Bootstrap, vous pouvez vous servir la balise <div class= »col-lg-8″> pour intégrer votre menu. Dans mon exemple, le menu sera à 100% de la largeur de l’écran. Voici le code CSS à intégrer à votre feuille de style :

.Le_menu {
margin: 100px auto;
width: 50%;
height: 100px;
background: #48435C;
}

.Le_menu .Toutes_les_pages
{
display: flex;
justify-content: space-around;
align-items: center;
}

.Le_menu .Toutes_les_pages a 
{
width: 20%;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
text-decoration: none;
font-family: Roboto, sans-serif;
color: white;
}

.Le_menu a:hover 
{
background: #5A5766
}

Ajouter un menu hamburger personnalisé

Maintenant que votre menu est parfait sur une taille d’écran orientée PC, il faut s’occuper du mobile. Il faudra donc créer le menu hamburger ( en forme de trois traits horizontaux ), qui permettra de cliquer dessus et déplier le menu. Par contre, il faut configurer ce menu hamburger pour qu’il ne soit accessible que sur mobile, et pas sur ordinateur.

Label

Ce label, c’est en faite le code qui permet de créer le menu hamburger. Vous pouvez le placer ou vous le souhaitez sur votre page ( comme par exemple en position : absolute ). Dans cet exemple, je vais le mettre juste à la suite de la classe Toutes_les_pages.

<label class=" label-hamburger">☰</label>

CheckBox

Nous allons également ajouter un <input> après ce <label> qui nous servira un peu plus tard. Voici le code à intégrer :

<input type="checkbox" id="toggle">

Modifier l’apparence du menu sur mobile

Maintenant que votre menu hamburger est parée, alors il faudra styliser le menu sur téléphone. Pour cela, un jolie petit bout de code est à intégrer dans votre fichier CSS. En voici un exemple que vous pourrez adapter à vos besoins ( couleurs, typographie… )

@media all and (max-width: 991px)
{
.Le_menu 
{
height: 60px;
}

.Le_menu .Toutes_les_pages
{
display: none;
}

.label-hamburger
{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 40px;
color: white;
cursor: pointer;
}
}

Activer le menu sur mobile

Une fois que votre menu est désigné pour ordinateur et pour mobile, il faudra écrie un nouveau code en CSS permettant d’afficher le menu sur téléphone, qu’après avoir cliqué sur le menu hamburger. Ajouter donc ceci à votre fichier CSS :

label, #toggle
{
display: none;
}

@media all and (max-width: 991px)
{
.Le_menu 
{
height: 60px;
}

.Le_menu .Toutes_les_pages 
{
display: none;
flex-direction: column;
background: #48435C;
height: 220px;
}

.Le_menu .Toutes_les_pages a {
width: 50%;
}

.label-hamburger
{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 40px;
color: white;
cursor: pointer;
}

#toggle:checked + Toutes_les_pages {
display: flex;
}
}

Découvrir d’autres articles

Vous cherchez une information spécifique ?

Generic selectors
Exact matches only
Search in title
Search in content