Blog

La création d’un menu attrayant et fonctionnel est essentielle pour toute page web. Dans cet article, nous allons explorer comment créer un menu de navigation simple mais élégant en utilisant HTML5 et CSS3. Suivez ces étapes simples pour donner à votre site créer en HTML5 et CSS3 une navigation intuitive.

Étape 1 : Structure HTML5

Commencez par mettre en place la structure de base de votre page HTML5. Utilisez les balises <header> et <nav> pour encadrer votre menu de navigation.

Étape 2 : Style CSS3

Créez un fichier CSS séparé (styles.css) pour styliser votre menu. Utilisez des sélecteurs pour cibler les éléments HTML spécifiques.

Ce code CSS est destiné à styliser une page HTML, en particulier un en-tête (<header>) contenant un menu de navigation (<nav>). Voyons chaque partie du code en détail :

1. Style du Corps (body)

body { font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

}

• font-family: Définit la police de caractères pour le texte du corps de la page. Dans cet exemple, la police est définie comme ‘Arial’ et, si elle n’est pas disponible, le navigateur doit utiliser une police générique sans empattement (sans-serif).
• margin et padding: Les valeurs 0 pour les marges et les rembourrages éliminent tout espacement par défaut autour du corps de la page, assurant un rendu plus cohérent sur différents navigateurs.

2. Style de l’En-tête (header)

header { background-color: #5DADE2;

color: #fff;

text-align: center;

padding: 1em 0;

}

• background-color: Définit la couleur de fond de l’en-tête.
• color: Définit la couleur du texte à l’intérieur de l’en-tête. Dans cet exemple, c’est blanc (#fff).
• text-align: Centre le texte à l’intérieur de l’en-tête.
• padding: Ajoute de l’espace intérieur à l’en-tête. 1em signifie que le rembourrage est égal à la taille de la police utilisée dans l’en-tête.

3. Style du Menu de Navigation (nav)

nav ul { list-style-type: none;

margin: 0; padding: 0;

display: flex; justify-content: center;

}

• list-style-type: Supprime les puces de la liste des éléments de navigation.
• margin et padding: Définissent les marges et les rembourrages des éléments de la liste à zéro pour éliminer les espaces indésirables.
• display: flex: Utilise Flexbox pour aligner les éléments de la liste horizontalement.
• justify-content: center: Centre les éléments de la liste horizontalement.

4. Style des Éléments de Liste (nav li)

nav li { margin: 0 15px;

}

• margin: Ajoute une marge de 15 pixels à droite et à gauche de chaque élément de la liste. Cela crée un espacement entre les éléments de la liste.

5. Style des Liens (nav a)

nav a { text-decoration: none;

color: #fff; font-weight: bold;

font-size: 1.2em;

transition: color 0.3s;

}

• text-decoration: Supprime la décoration par défaut des liens, telle que les soulignements.
• color: Définit la couleur du texte des liens (#fff pour blanc).
• font-weight: Définit l’épaisseur de la police à “bold” (gras).
• font-size: Définit la taille de la police à 1.2 em.
• transition: Ajoute une transition fluide de 0.3 secondes à la propriété de couleur. Cela crée un effet de transition en douceur lorsqu’un lien est survolé.

6. Style au Survole (nav a:hover)

nav a:hover { color: #ffd700;

/* Changez la couleur au survol selon votre préférence */

}

• Définit une couleur différente (#ffd700 pour jaune) lorsque le lien est survolé, créant un effet visuel interactif.

En combinant ces styles, vous obtenez un en-tête avec un menu de navigation horizontal centré, des liens stylisés de manière attrayante et des effets de survol pour une meilleure expérience utilisateur.