Texte en SVG
Découvrez comment créer un menu réactif et accessible sans utiliser JavaScript. Notre solution utilise uniquement du CSS pour offrir une expérience de navigation flexible et intuitive.
Dans le monde du développement web, la création de menus réactifs est une pratique courante pour garantir une expérience utilisateur fluide sur différents appareils. Habituellement, l'utilisation de JavaScript est nécessaire pour implémenter cette fonctionnalité, mais saviez-vous qu'il est possible de créer un menu réactif sans utiliser JavaScript ? Dans cet article, nous allons explorer une approche novatrice en utilisant uniquement CSS pour créer un menu réactif attrayant et fonctionnel.
Le code que nous allons examiner illustre cette technique. Il présente un menu réactif qui peut être ouvert et fermé sans aucun recours à JavaScript. Jetons un coup d'œil au fonctionnement général de ce code.
- Les règles CSS définissent l'affichage des éléments du menu en fonction de leur état (ouvert ou fermé). Lorsque le menu est fermé, seuls les éléments `<li>` (à l'exception du dernier élément représentant le bouton de fermeture) sont affichés. Lorsque le menu est ouvert, tous les éléments `<li>` sont affichés, y compris le bouton de fermeture.
- L'utilisation de la pseudo-classe `:target` est essentielle pour détecter les changements d'URL cible et ajuster l'état du menu en conséquence. Lorsqu'un lien pointe vers l'ID `#menu`, le menu est ouvert, et lorsque le lien pointe vers `#menu-closed`, le menu est fermé.
- Des médias queries (`@media`) sont utilisés pour rendre le menu réactif aux petits écrans. Les styles spécifiques s'appliquent lorsque la largeur de l'écran est de 768 pixels ou moins, garantissant une expérience utilisateur optimale sur les appareils mobiles et les tablettes.
Code css
* {margin: 0; padding:0;}
*,*::before, *::after {
box-sizing: inherit;
}
html {
box-szing: border-box;
font-family: -apple-system, "Ubuntu", "Cantarell", sans-serif;
background: #fafafa;
padding: 0 2rem 2rem;
color: #223;
}
nav {
font-size: 12px;
box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
margin: 5px 3rem;
padding: 0 0 0 1em;
height: 75px; /* Menu height */
overflow: hidden; /* Don't show anything outside the nav */
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 150px; /* Menu height x 2 */
position: relative; /* Position the menu button relative to this item */
text-align: center;
}
nav li {
display: inline-block;
}
nav li:hover {
}
nav a {
background-color: #FFF;
display: block;
padding: 0 1em;
color: #444;
font-weight: 700;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
line-height: 75px; /* Menu height */
height: 75px; /* Menu height */
}
nav a:hover {
background-color: rgba(162,242,156, 1);
}
nav li:last-child { /* The menu button */
position: absolute; /* Move the menu button out of flow */
right: 0;
bottom: 75px; /* Move upwards, the same distance as the menu height */
background: #fff;
box-shadow: -.2rem 0 .5rem rgba(0,0,0,.7), -.4rem 0 .5rem rgba(0,0,0,.3);
padding: 0 1em;
}
nav li:nth-last-child(2) { /* The close button */
display: none;
}
#menu:target {
height: auto;
padding: 0;
overflow: visible;
box-shadow: 0 0;
}
#menu:target ul {
max-height: 10vh;
height: auto;
text-align: left;
}
#menu:target li {
display: block;
}
#menu:target a {
background:#5c1a12;
color: #fff;
display: block;
height: 3rem;
line-height: 3rem;
transition: .4s
}
#menu:target a:hover {
background-color: rgba(162,242,156, .5);
color: #444;
text-indent: 2rem;
}
#menu:target li:last-child {
display: none;
}
#menu:target li:nth-last-child(2) {
background: #fff;
position: absolute;
top: 0;
right: -2px;
margin: 0;
}
#menu:target li:nth-last-child(2) a {
background: inherit;
color: #C51F0A;
}
#menu:target ~ * {
display: none;
}
La création d'un menu réactif sans JavaScript est une alternative intéressante pour les développeurs web qui souhaitent offrir une expérience utilisateur fluide sans alourdir le site avec du code JavaScript supplémentaire. En utilisant astucieusement les sélecteurs CSS et les pseudos-classes, il est possible de créer un menu réactif attrayant et fonctionnel.
Ce code est un excellent exemple de cette approche. En comprenant son fonctionnement, vous pouvez l'adapter et l'appliquer à vos propres projets. En utilisant uniquement des styles CSS, vous pouvez créer des transitions fluides entre l'état ouvert et l'état fermé du menu, tout en garantissant une compatibilité avec différents navigateurs.
De plus, la légèreté du code et sa compatibilité élargie font de cette méthode une solution idéale pour les sites web qui doivent être accessibles rapidement et efficacement à un large éventail d'utilisateurs.
Il est important de noter que cette approche peut être étendue et personnalisée pour répondre à vos besoins spécifiques. Vous pouvez ajouter des animations, des effets visuels et des styles supplémentaires pour rendre votre menu encore plus attrayant et interactif.
En conclusion, créer un menu réactif sans JavaScript en utilisant uniquement CSS offre de nombreux avantages. Cela permet d'optimiser les performances du site, d'améliorer la compatibilité avec les navigateurs et d'offrir une expérience utilisateur accessible. Explorez cette approche innovante et donnez vie à vos menus réactifs de manière élégante et efficace.
Voici le code complet
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu réactif sans JavaScript, uniquement avec CSS</title>
<style>
* {margin: 0; padding:0;}
*,*::before, *::after {
box-sizing: inherit;
}
html {
box-szing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background: #fafafa;
padding: 0 2rem 2rem;
color: #223;
}
nav {
font-size: 12px;
box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
margin: 5px 3rem;
padding: 0 0 0 1em;
height: 75px; /* Menu height */
overflow: hidden; /* Don't show anything outside the nav */
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 150px; /* Menu height x 2 */
position: relative; /* Position the menu button relative to this item */
text-align: center;
}
nav li {
display: inline-block;
}
nav li:hover {
}
nav a {
background-color: #FFF;
display: block;
padding: 0 1em;
color: #444;
font-weight: 700;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
line-height: 75px; /* Menu height */
height: 75px; /* Menu height */
}
nav a:hover {
background-color: rgba(162,242,156, 1);
}
nav li:last-child { /* The menu button */
position: absolute; /* Move the menu button out of flow */
right: 0;
bottom: 75px; /* Move upwards, the same distance as the menu height */
background: #fff;
box-shadow: -.2rem 0 .5rem rgba(0,0,0,.7), -.4rem 0 .5rem rgba(0,0,0,.3);
padding: 0 1em;
}
nav li:nth-last-child(2) { /* The close button */
display: none;
}
#menu:target {
height: auto;
padding: 0;
overflow: visible;
box-shadow: 0 0;
}
#menu:target ul {
max-height: 10vh;
height: auto;
text-align: left;
}
#menu:target li {
display: block;
}
#menu:target a {
background:#5c1a12;
color: #fff;
display: block;
height: 3rem;
line-height: 3rem;
transition: .4s
}
#menu:target a:hover {
background-color: rgba(162,242,156, .5);
color: #444;
text-indent: 2rem;
}
#menu:target li:last-child {
display: none;
}
#menu:target li:nth-last-child(2) {
background: #fff;
position: absolute;
top: 0;
right: -2px;
margin: 0;
}
#menu:target li:nth-last-child(2) a {
background: inherit;
color: #C51F0A;
}
#menu:target ~ * {
display: none;
}
</style>
</head>
<body>
<nav id="menu">
<ul id="menu-closed">
<li><a href="#">Acceuil</a></li>
<li><a href="#">Evennement</a></li>
<li><a href="#">Calendrier</a></li>
<li><a href="#">Portefeuille</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">A Propos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
<li><a href="#menu-closed">× Fermer</a></li>
<li><a href="#menu">☰ Menu</a></li>
</ul>
</nav>
<h1>Menu interactif : Astuces CSS pour une alternative au menu hamburger sans JavaScript</h1>
<p>Découvrez notre approche novatrice pour un menu sans JavaScript. En utilisant uniquement des styles CSS, nous offrons une alternative conviviale et accessible au menu hamburger traditionnel.
Optez pour un menu moderne et</p>
</body>
</html>
Voici une explication détaillée du fonctionnement du code :
Le code HTML commence par la déclaration du doctype et la définition de la langue (lang="fr") de la page. Ensuite, nous avons la section <head> qui contient les balises <meta> pour la configuration du jeu de caractères et du viewport, ainsi que la balise <title> pour le titre de la page
À l'intérieur de la balise <style>, nous avons le code CSS qui définit les styles pour le menu réactif. Le code utilise des sélecteurs pour cibler différentes parties du menu et appliquer des styles spécifiques
Le menu lui-même est contenu dans la balise <nav>, qui a un identifiant unique (id="menu") pour être utilisé plus tard dans les sélecteurs CSS
À l'intérieur de la balise <nav>, nous avons une liste non ordonnée <ul> avec l'identifiant menu-closed pour représenter les éléments du menu. Chaque élément du menu est représenté par une balise <li> avec un lien <a> à l'intérieur
Les styles CSS appliqués au menu définissent sa hauteur, sa mise en page et ses comportements de survol. Par exemple, les éléments du menu ont un fond blanc, une marge et un espacement définis, et une hauteur et une ligne hauteur de 75 pixels. Lorsque l'utilisateur survole un élément du menu (`nav li:hover`), aucun style particulier n'est appliqué dans le code fourni, mais vous pouvez ajouter des styles supplémentaires selon vos besoins
Le dernier élément de la liste (`nav li:last-child`) représente le bouton de menu. Il est positionné absolument à droite du menu avec un fond blanc et une ombre, et il contient le texte "☰ Menu"
En utilisant la pseudo-classe `:target`, le menu réagit aux clics sur les liens internes (`<a href="#...">`). Lorsque l'un de ces liens est ciblé (`#menu:target`), certaines propriétés CSS sont modifiées pour afficher le menu déroulant. Par exemple, la hauteur du menu devient "auto", le débordement est visible, et les éléments du menu sont affichés en bloc
Le lien de fermeture du menu (`<a href="#menu-closed">× Fermer</a>`) permet de cibler à nouveau l'élément `menu-closed` pour fermer le menu lorsqu'il est cliqué
En dehors de la balise `<nav>`, vous trouverez un titre `<h1>` et un paragraphe `
` qui présentent le concept du menu interactif sans JavaScript
En résumé, ce code HTML et CSS montre comment créer un menu réactif sans utiliser JavaScript. Il utilise des sélecteurs CSS pour appliquer des styles spécifiques aux éléments du menu et utilise la pseudo-classe `:target` pour activer le menu déroulant lorsqu'un lien interne est ciblé. Cela offre une alternative conviviale et accessible au menu hamburger traditionnel.
Retour à l'accueil du site