Comment créer : bouton de menu aligné à droite
- Page précédente Lien de navigation de bord inférieur
- Page suivante Lien de menu central
Apprendre à créer une barre de navigation avec des liens alignés à gauche et à droite.
Créer une barre de navigation supérieure
Première étape - Ajouter HTML :
<div class="topnav"> <a class="active" href="#home">Accueil</a> <a href="#news">Nouvelles</a> <a href="#contact">Contact</a> <div class="topnav-right"> <a href="#search">Recherche</a> <a href="#about">À propos</a> </div> </div>
Deuxième étape - Ajouter CSS :
/* Ajouter une couleur de fond noire pour la navigation supérieure */ .topnav { background-color: #333; overflow: hidden; } /* Définir les styles des liens dans la barre de navigation */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Changer la couleur du lien au survol de la souris */ .topnav a:hover { background-color: #ddd; color: black; } /* Ajouter une couleur pour le lien actif/courant */ .topnav a.active { background-color: #04AA6D; color: white; } /* Partie alignée à droite dans la navigation supérieure */ .topnav-right { float: right; }
pages associées
Tutoriel :Comment créer une barre de navigation supérieure responsive
Tutoriel :Barre de navigation CSS
- Page précédente Lien de navigation de bord inférieur
- Page suivante Lien de menu central