Création de la barre de navigation

Brice BITOT

Available since 06-03-2023 à 15:13

Language available

Ensuite nous allons devoir lui créer un ID qui sera appelé dans le fichier CSS (**style.css**)

Nous allons lui mettre un ID qui va s'appeler "**nav**" comme ceci :

```
<ul id="nav">
    <li><a href="index.html">Accueil</a></li>
    <li><a href="contact.html">Contactez-nous</a></li>
</ul>
```

Puis dans le fichier CSS nous allons l'appeler comme ceci :
```
#nav {
   
}
```

Nous allons maintenant :

* Mettre le texte au centre
* Mettre la navbar tout en haut 
* Lui mettre une position fix
* Lui mette une couleur de fond qui sera bleue
* La rendre extensible sur toutes la longeur.
* Agrandir sa taille

```
#nav {
		text-align: center;
    top: 0;
    position: fixed;
    background-color: blue;
    width: 100%;
    height: 65px;
}
```

![NAVBAR GITE 1](https://api.codingschool.app/images/users/1678184184.png)

Ensuite, nous allons aligner les balises `<li>`

```
#nav li {
		display: inline;
}
```

![NAVBAR GITE 2](https://api.codingschool.app/images/users/1678184194.png)

Nous allons maintenant nous occuper des liens hyper text avec la balise `<a>` :

* Mettre une couleur blanche
* Les espacer sur la ligne
* Augmenter leur taille
* Retirer le soulignage 
* Mettre un margin

```
#nav a {
    color: white;
    line-height: 65px;
    font-size: 20px;
    text-decoration: none;
    margin: 0 100px;
}
```

![NAVBAR GITE 3](https://api.codingschool.app/images/users/1678184205.png)

Enfin, nous allons faire en sorte que quand l'utilisateur passera sa souris sur "**Accueil**" ou "**Contactez-nous**" la couleur se changera en vert avec une petite transition :

```
#nav a:hover {
   color: green;
   transition: .7s;
}
```

![NAVBAR GITE 4](https://api.codingschool.app/images/users/1678184215.png)

Création de la barre de navigation

1 . Barre de navigation - HTML

2 . Barre de navigation - CSS

Summary