Si nous voulons créer une barre de navigation en HTML, nous devons alors suivre les étapes indiquées ci-dessous. En utilisant ces étapes, nous pouvons facilement créer la barre de navigation.
Étape 1: Tout d'abord, nous devons saisir le code HTML dans n'importe quel éditeur de texte ou ouvrir le fichier HTML existant dans l'éditeur de texte dans lequel nous voulons créer une barre de navigation.
Make a Navigation Bar
Étape 2: Maintenant, nous devons définir la balise dans la balise où nous voulons créer la barre.
remplacement de la chaîne Java
You are at JavaTpoint Site.....
Étape 3: Ensuite, il faudra définir le
- tag , qui est utilisé pour afficher la liste non ordonnée. Et puis nous devons définir les éléments de la liste dans le
- étiqueter. Nous devons définir les éléments que nous voulons afficher dans la barre de navigation.
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....
Étape 4: Ensuite, il faut placer le curseur juste après la fermeture de la balise titre. Et puis, il faut définir la balise . Étape 4 : Ensuite, nous devons placer le curseur juste après la fermeture de la balise de titre. Et puis, il faut définir la balise.
Make a Navigation Bar
Étape 5 : Maintenant, nous devons spécifier différents attributs id qui sont utilisés pour définir la position et la couleur de la barre de navigation. Nous devons donc utiliser le code suivant dans la balise head. Nous pouvons également modifier la valeur des propriétés selon nos exigences.
body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } Étape 6 : Après cela, nous devons taper la balise juste avant la balise d’ouverture. Et nous devons également fermer cette balise. Et enfin, nous devons enregistrer le fichier HTML puis exécuter le fichier dans le navigateur .
Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... Testez-le maintenant La sortie du code HTML ci-dessus est affichée dans la capture d'écran suivante :
