KooNDeLLiTcH²

Nous allons nous inspirer du célèbre site Mashable pour créer notre barre de navigation. Le site de Mashable est une référence dans le monde pour les sujets liés au Web et à ses grands acteurs. Aussi, il est normal qu’il soit pris en modèle par les intégrateurs web du monde entier. Et le code de celui-ci est très propre et lisible. Aussi, je vous propose de reproduire la navigation comme ci-dessous pas-à-pas en expliquant comme d’habitude le pourquoi et le comment.

Cliquer pour agrandir la navigation de Mashable

Voyons de plus près comme elle marche. Les boutons de la barre de navigation ont deux états : le premier est celui non sélectionné ni survolé et le second donc change la couleur d’arrière plan du bouton et ajoute une bordure supérieure de couleur qui varie en fonction de la catégorie choisie. Notez que le dernier élement est un peu en retrait (poussé sur la droite) et de couleur de texte différente.Un point important est que le site de Mashable utilise les tags header et nav définit dans HTML5 (qu’on appelle maintenant HTML vu que c’est un standard vivant non versionné). Rien d’autre à savoir pour le moment. On est déduit donc le code HTML suivant :

Comme d’habitude, tout se passe principalement dans la feuille CSS. Aussi, penchons-nous dessus. Première étape, on va faire ce qu’on appelle un reset, c’est-à-dire forcer des valeurs à s’initialiser pour tout un tas de tags HTML génériques. C’est une chose très répandue pour réduire les différences entre les browsers. Certains sites intègrent d’ailleurs une feuille de style reset.css dès le début. Nous, on va simplifier notre reset au minimum de ce que l’on va utiliser :

html, body, div, a, ul, li, header, nav {
	margin: 0;
	padding: 0;
}

Voilà. On enlève toute marge et tout padding vu qu’IE les gère différemment que Firefox par exemple. Ensuite nous allons styler notre tag header. On y définit tout d’abord le style de texte par défaut à appliquer. Une chose à faire lorsqu’on ne style pas de texte d’article est de mettre la taille de la ligne égale à la taille de la font avec la directive line-height:1. Cela permet de faciliter le placement des textes sans prendre en compte les marges intrinsèques de la police de caractères. Puis on va donner une hauteur, une couleur d’arrière plan et une bordure inférieure dans un bleu un brin plus foncé. Voilà ce que cela donne :

header {
	line-height: 1;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif; 
	height: 10px;
	background: #E3EDF4;
	border-bottom: 1px solid #C9DBEC;
}

Ensuite nous allons styler la barre de navigation elle-même et la liste qu’elle contient. Pour ce faire, on va styler les tags nav et ul. Le nav est centré et un peu plus grand que la liste qu’il contient. Tout le texte qu’il contient est automatique en majuscule (text-transform: uppercase) et sera décalé vers le bas d’autant de pixels que la hauteur du header pour donner cet effet « tombant » (padding-top: 10px). Le ul, quant à lui, a une hauteur fixe égale à la hauteur desboutons qu’il contient pour pouvoir mettre une couleur d’arrière-plan. Il a aussi ses paddings droits et gauche égaux et des paddings haut et droit permettant d’aérer la liste. Il a ses deux coins bas arrondis de 3 pixels. les autres restants carrés. Ce qui nous donne le code CSS suivant :

nav {
	width: 972px;
	margin: 0 auto;
	font-size: 0.8em;
	text-transform: uppercase;
	padding-top: 10px;
}
nav ul {
	width: 940px;
	height: 16px;
	background: #C9DBEC;
	padding: 11px 16px 7px;

	border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 3px;
	border-top-left-radius: 0px 0px;
	border-bottom-left-radius: 3px 3px;
	border-top-right-radius: 0px 0px;
	border-bottom-right-radius: 3px 3px;
}

Passons maintenant aux tags li. Pour le moment, notre liste est verticale. On passe les li en ligne en les poussant tous à gauche (float:left) et on cache les points par défaut (list-style-type: none). Enfin, on espace chacun des éléments de 3 pixels (margin-right: 3px;). On obtient l’image ci-dessous en ajoutant le code CSS sous l’image :

nav ul li {
	float: left;
	list-style-type: none;
	margin-right: 3px;
}

Bon maintenant il est temps de styler les tags a de notre barre. On va enlever le souligné (text-decoration:none), donner une couleur, mettre en gras (font-weight:bold), ajouter 12px de padding en haut et en bas et 6px de passing à gauche et à droite (padding: 12px 6px). Oui ça dépasse la hauteur spécifiée pour du ul. Mais c’est voulu. Vous verrez après. Enfin on va spécialiser le comportement du dernier élément en le poussant à droite (float:right sur le last) et changeant sa couleur de texte. On ajoute donc :

nav ul li a {
	color: #1E598E;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 6px;
}
nav ul li.last {
	float: right;
}
nav ul li.last a {
	color: #ff8c00;
}

Il ne nous reste plus qu’à créer l’effet en mode sélectionné et survolé avec les couleurs de bordure supérieure spécifique pour chaque bouton de navigation. Pour ce faire, on va définir une bordure supérieure par défaut de 2 pixels d’épaisseur. Vu que la hauteur de nos a avec les paddings est supérieure à la hauteur du ul, la bordure va apparaitre au-dessus et donc dans le header. C’est un bel effet mais il faut donc que la couleur de bordure par défaut soit la même que la couleur d’arrière-plan du header. On pourrait forcer aussi la couleur d’arrière-plan par défaut à transparent, mais normalement c’est le cas pour tous les navigateurs. On ajoute donc la ligne suivante dans le nav ul li a qui devient :

nav ul li a {
	color: #1E598E;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 6px;
	border-top: 2px solid #E3EDF4;
}

On a presque fini. Il faut maintenant changer la couleur de la bordure et la couleur d’arrière-plan pour chaque élément de navigation en état sélectionné (i.e ont aussi la classe « .selected) et survolé (meta-classe :hover). En gardant les différentes couleurs originelles du site on ajoute donc le lot de directives CSS suivantes :

nav ul li.nav_home a:hover,
nav ul li.nav_home.selected a {
  border-color: #89ae67;
  background: white; }
nav ul li.nav_social-media a:hover,
nav ul li.nav_social-media.selected a {
  border-color: #079ce9;
  background: white; }
nav ul li.nav_tech a:hover,
nav ul li.nav_tech.selected a {
  border-color: #fba322;
  background: white; }
nav ul li.nav_video a:hover,
nav ul li.nav_video.selected a {
  border-color: #620f5c;
  background: white; }
nav ul li.nav_mobile a:hover,
nav ul li.nav_mobile.selected a {
  border-color: #6ac496;
  background: white; }
nav ul li.nav_dev-design a:hover,
nav ul li.nav_dev-design.selected a {
  border-color: #77aab1;
  background: white; }
nav ul li.nav_business a:hover,
nav ul li.nav_business.selected a {
  border-color: #6ebb4d;
  background: white; }
nav ul li.nav_social-good a:hover,
nav ul li.nav_social-good.selected a {
  border-color: #00c8a4;
  background: white; }
nav ul li.nav_startups a:hover,
nav ul li.nav_startups.selected a {
  border-color: #f64e2f;
  background: white; }
nav ul li.nav_media a:hover,
nav ul li.nav_media.selected a {
  border-color: #993333;
  background: white; }
nav ul li.nav_classifieds a:hover,
nav ul li.nav_classifieds.selected a {
  border-color: #ff8c00;
  background: white; }

Pour parfaire le tout, on va se servir des changements de couleur d’arrière-plan et de bordure supérieure pour ajouter une petite transition CSS3 avec les notations pour tous les navigateurs. La fonction d’easing qu’on utilise est ease-in-out pour faire l’effet progressif et inverse lorsque le curseur quittera l’élément de navigation. On complète donc le style de chaque a ce qui donne :

nav ul li a {
	color: #1E598E;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 6px;
	border-top: 2px solid #E3EDF4;
	
	transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-webkit-transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-o-transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

Et voilà ! Une magnifique barre de navigation compatible HTML 5 et CSS3. Jolie !