Skip to main content

Box - nav

Création d'un menu

Tout site utilise un menu on va donc en crée un.

nav

Html​

Pour le "titre" de notre menu c'est un text et si on regarde un peu la doc on voit que la balise header convient parfaitement.

Afin d'être propre on va préférer utiliser la balise nav plutot q'une simple div.
Nav indique un élément de navigation c'est justement la nature de notre menu donc autant l'utiliser.

Ensuite un menu c'est classiquement une liste ( ul ) qui est stylisé. Chaque élément de notre menu va etre dans un li et chaque élement est clicable il s'agit donc d'un tag a.

Tout l'html qu'on vient d'écrire on va l'encapsuler dans une balise div qui à la class .container ( encapsuler est une façon de dire mettre dedans ).

Essayer de crée cette strucutre html avec comme éléments de menu:

  • Accueil
  • Produits
  • Promotions
  • À propos
  • Contact

Pour ne pas s'embeter avec le lien vous pouvez utiliser un href='#'. Ca dit que le lien redirige vers le site lui mm.

Solution

Css​

On à tout ce qui faut en termes de textes et de balise html mais c'est moche.
Il nous faut du css maintenant pour rendre ça plus agréable.

Faire page blanche​

De base notre navigateur peut ajouter un style minmaliste.
On va reset ce comportement on donnant nos propres regles de base

* { /* * signifie pour toutes choses */
  margin: 0;
  padding: 0;
}

Avoir une base correct​

On va déjà déclarer une règles css sur body afin d'avoir un cadre général.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
  padding: 20px;
}
info

On a plusieurs font-family car si la police de caractère n'est pas trouvé le navigateur passe à la suivante. Les polices installé par défaut sont les save fonts, les plans b qui marchent toujours. Il est bien sur possible d'ajouter ses propres polices/fonts

Plus de context​

La balise div.container contient tout notre html. On va venir lui donner un style par défaut.
Container est utilisé comme un cadre au sein duquelle les autres composants vont évoluer.

.container {
  max-width: 1200px; /* empeche la div et donc son contenu de dépasser une certaine largeur */
  margin: 0 auto; /* centre la div */
  background-color: white;
  padding: 0;
}

C'est notre premier enfant de la div.container. Son role est d'afficher le titre de notre site et une phrase d'accroche.
Il contient naturellement un h1 et un p. Ici le rendu du p nous convient on va donc travailler sur header puis h1.

Première chose à faire et la plus visible c'est de changer la couleur de fond en: #3f51b5
Histoire d'avoir un contraste sympa on va mettre notre texte en blanc. Que ce soit notre titre ou notre p on veut du blanc donc on le définit dans leur parent c'est à dire header.

Pour mettre en valeur notre titre et son texte on va ajouter un peux d'espacement interne en haut et en bas on met 20px et sur les cotés 30px.
Maintenant on va cassé les angles mais attention seulement ceux d'en haut à droite et à gauche et mettre un arrondie de 11px.

Sur notre titre on lui demande de pousser son élement frère ( le p ) de 10px.

Il reste une subtilité. On voit qu'en bas de header il y a une ligne d'une couleur différente que celle du fond.
On va donc devoir crée cette ligne et pour celà on peut crée une bordure mais une bordure limité au bas de header et lui donner une largeur de 5px et une couleur #303f9f

Sur la nav on utilise une couleur de fond pas très éloignée de celle de notre head #5c6bc0.
On va donner de l'espace intérieur à nos éléments enfants en ajoutant un 10px en haut et en bas et 20px sur les cotés.
Pour garder l'aspect arrondie on va fair la même chose que pour le header mais ici que sur les bord inférieurs.

ul​

De base une liste affiche des points noir pour chaque élements. Ici ça nous intéresse pas trop donc on va dire à notre ul qu'on ne veut pas de style pour cette liste.
Petite astuce ( on voit ça plus tard dans le cours ) pour la mise en page on va ajouter css display:flex; qui va nous aider à mettre notre liste à l'horizontal.

li​

Là on travail sur les éléments de notre menu. Ce sont les "cases" qui vont venir héberger nos balise a. On va leur demander de s'écarter des autres élements sur la droite de 20px

a​

Maintenant le seule élément element utilise c'est notre balise a qui va nous permettre de nous déplacer dans notre site.
De base la balise a ajoute son propre style ( souligné, bleu, ...) ce qui casse notre theme général. On va donc lui dire de ne mettre aucun style, aucune décoration de texte.
On insiste sur la couleur blanche pour nos textes et on les mets en gras. Pour donner plus de lisibilité on va ajouter des espaces intérieurs de 5px en haut et en bas et 10px sur les cotés.
Pour anticiper l'afficher du hover on va ajouter des arrondis de 4px sur nos angles

Une petite touche en plus c'est d'ajouter un effet de transition css transition: background-color 0.3s;

Il nous reste l'effet hover à faire et pour ca on va juste une couleur de font mais au format rgba cette fois ci.
RGBA nous permet de donner un effet de transparence sur notre couleur.

background-color: rgba(255, 255, 255, 0.2);

Solution​

solution