Menu De Navigation

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Menu De Navigation

Temps d'étude : 2h30.

Niveau : Facile.

Tags : Menu De Navigation

Fichier(s) utile(s) pour ce cours : /

Un menu de navigation

Avec des liens, nous pouvons également créer des menus de navigation, c'est ainsi que l'on se déplace de rubrique en rubrique sur un site web.

Nous allons créer un nouveau fichier : menu1.html
Ce nouveau fichier sera placé dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/menu1.html

menu1.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu1.css">
			</head>
			<body>
			
				<nav>
					<a href="">Accueil</a>
					<a href="">Actualité</a>
					<a href="">Boutique</a>
					<a href="">Panier</a>
					<a href="">Qui sommes nous ?</a>
				</nav>
				
			</body>
		</html>

Nous utilisons la balise <nav> (dédié à la navigation) avec des liens <a> à l'intérieur.

menu1.css

	nav  a{ /* tous les liens a à l'intérieur de la balise nav */
	float: left; /* effet flottant */
	text-decoration: none; /* pas d'héritage avec effet souligné */
	color: #ffffff; /* couleur du texte */
	background: #000000; /* couleur de fond */
	height: 36px; /* hauteur */
	line-height: 33px; /* interligne */
	padding: 0 10px; /* marges intérieur */
	font-family: sans-serif; /* police d'écriture */
	font-size: 13px; /* taille du texte */
	transition: .5s; /* temps de transition lors du hover : une demi seconde */
	}
	nav  a:hover{ /* tous liens lors du survol dans la balise nav */
	background: #f43c80; /* couleur de fond */
	}

Décryptons les selecteurs et les propriétés du code Css :

nav a permet de selectionner les liens <a> à l'intérieur de la balise <nav>.
float: left; permet de donner un effet flottant côte à côte.
text-decoration: none; permet de retirer l'heritage de l'effet souligné des liens.
color: #ffffff; permet de colorer le texte.
background: #000000; permet de définir une couleur de fond.
height: 36px; permet de donner une hauteur.
line-height: 33px; permet de gérer l'interligne.
padding: 0 10px; permet de fixer la marge intérieure.
font-family: sans-serif; permet de modifier la police d'écriture.
font-size: 13px; permet de modifier la taille du texte.
transition: .5s; permet de gérer le temps de transition.

nav a:hover permet de selectionner les liens <a> à l'intérieur de la balise <nav> lorsque la souris survole les liens du menu.
background: #f43c80; permet de définir une couleur de fond différente lorsque la souris survole les liens du menu.

Et voici le résultat :

Exercice : Essayer de faire en sorte lors du survol que soit appliqué un fond bleu sur le 1er lien du menu.

Correction :

menu1.css

	nav  a:hover:first-child{ background: #336699; }

Nous utilisons le pseudo élément first-child mais nous aurions également pu mettre une classe CSS spécifique au lien sur lequel nous souhaitons appliquer un style particulier.

Et après la correction, voici le résultat :

Autre exemple de menu de navigation

Voici un autre menu composé de différents liens.

Nous allons créer un nouveau fichier : menu2.html
Ce nouveau fichier sera placé dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/menu2.html

menu2.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu2.css">
			</head>
			<body>
			
				<nav>
					<a href="">Accueil</a>
					<a href="">Actualité</a>
					<a href="">Boutique</a>
					<a href="">Panier</a>
					<a href="">Qui sommes nous ?</a>
				</nav>
				
			</body>
		</html>

Pour rappel, nous utilisons la balise <nav> dédié à la navigation.

Les balises <a> permettent de créer des liens.

menu2.css

	nav   a{
	float: left;	/* effet flottant */
	text-decoration: none; /* pas d'héritage avec effet souligné */
	color: #ffffff; /* couleur du texte */
	background: url(rubrique_off.png);  /* image de fond */
	height: 36px; /* hauteur */
	line-height: 33px;  /* interligne */
	padding: 0 10px; /* marges intérieur */
	font-family: sans-serif; /* police d'écriture */
	font-size: 13px; /* taille du texte */
	}
	nav   a:hover{
	background: url(rubrique_on.png); /* image de fond */
	}

Décryptons les selecteurs et les propriétés du code Css :

nav a permet de selectionner les liens <a> à l'intérieur de la balise <nav>.
float: left; permet de donner un effet flottant côte à côte.
text-decoration: none; permet de retirer l'heritage de l'effet souligné des liens.
color: #ffffff; permet de colorer le texte.
background: url(rubrique_off.png); permet de définir une image de fond.
height: 36px; permet de donner une hauteur.
line-height: 33px; permet de gérer l'interligne.
padding: 0 10px; permet de fixer la marge intérieure.
font-family: sans-serif; permet de modifier la police d'écriture.
font-size: 13px; permet de modifier la taille du texte.
transition: .5s; permet de gérer le temps de transition.

nav a:hover permet de selectionner les liens <a> à l'intérieur de la balise <nav> lorsque la souris survole les liens du menu.
background: url(rubrique_on.png) permet de définir une image de fond différente lorsque la souris survole les liens du menu.

Autre exemple de menu de navigation (dans un cadre)

Pour cet exemple, nous allons créer un menu dans un cadre, ce genre de menu secondaire peut être suceptible de se trouver à tout endroit sur un site web.

Nous allons créer un nouveau fichier : menu3.html
Ce nouveau fichier sera placé dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/menu3.html

menu3.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu3.css">
			</head>
			<body>
			
				<div class="cadre">
					<span class="cadre">Titre du Cadre</span>
					<a href="">Lien 1</a>
					<a href="">Lien 2</a>
					<a href="">Lien 3</a>
				</div>
				
			</body>
		</html>

menu3.css

	.cadre{
	background: url(cadre-degrade.png) repeat-x left bottom #FFFFFF; /* image de fond */
	border: 1px solid #CACCCD; /* bordure */
	border-radius: 10px; /* bordure arrondie */
	width: 200px; /* largeur */
	}
	.cadre span{
	border-bottom: 1px solid #CACCCD; /* bordure du bas */
	font-size: 15px; /* taille du texte */
	margin: 0; /* marges ext */
	padding: 5px 0; /* marges int. */		
	text-align: center; /* alignement du texte */
	display : block; /* permet de prendre toute la place */
	}
	.cadre a{
	display: block; /* affichage block (pleine largeur)
	border-bottom: 1px solid #CACCCD; /* bordure du bas */
	color: #02A3D9; /* couleur du texte */ 
	padding: 5px; /* marges int. */
	text-decoration: none; /* permet de retirer l'heritage de l'effet souligné des liens */
	}
	.cadre a:hover{
	background: #ffffff; /* couleur de fond */
	}
	.cadre a:last-child{
	border: 0; /* pas de bordure pour le dernier lien */
	}
	.cadre a:hover:last-child{
	border-radius: 0 0 10px 10px; /* arrondie lors du survol pour éviter débordement lors de l'application du hover */
	}

Décryptons les selecteurs et les propriétés du code Css :

.cadre permet de selectionner la balise <div> contenant la classe cadre.
background: url(rubrique_off.png); permet de définir une image de fond.
border: 1px solid #CACCCD; permet de définir une bordure.
border-radius: 10px; permet d'obtenir une bordure arrondie.
width: 200px; permet de définir la largeur du cadre.
.cadre span permet de selectionner la balise <span> à l'intérieur de la classe cadre. Cela représente le sous-titre.
border-bottom: 1px solid #CACCCD; permet d'obtenir une bordure en bas.
font-size: 15px; fixe la taille du texte.
margin: 0; permet de définir les marges extérieures.
padding: 5px 0; permet de définir les marges intérieures.
text-align: center; permet de préciser l'alignement du texte.
display : block; permet de prendre toute la place.
.cadre a permet de selectionner la balise <a> à l'intérieur de la classe cadre. Cela représente tous les liens.
display: block; Nous affichons les liens sous forme de bloc afin qu'ils prennent toute la place en largeur.
border-bottom: 1px solid #CACCCD; permet d'obtenir une bordure en bas.
color: #02A3D9; nous permet de préciser la couleur du texte
padding: 5px; permet de définir les marges intérieures.
text-decoration: none; permet de retirer l'heritage de l'effet souligné des liens.
.cadre a:hover permet de selectionner la balise <a> à l'intérieur de la classe cadre au moment du survol (hover). Cela représente les liens survolés.
background: #ffffff; permet de définir une couleur de fond (ainsi, en survolant les liens, la couleur blanche s'appliquera).
.cadre a:last-child permet de selectionner la dernière balise <a> à l'intérieur de la classe cadre. Cela représente le dernier lien de la liste.
border: 0; pas de bordure pour le dernier lien.
.cadre a:hover:last-child permet de selectionner la dernière balise <a> à l'intérieur de la classe cadre au moment du survol (hover). Cela représente le dernier liens survolé dans la liste.
border-radius: 0 0 10px 10px; permet de définir une bordure arrondie en bas à gauche et à droite au moment du survol sur le dernier lien.

Un menu déroulant horizontal

Comment créer un menu déroulant horizontal avec les langages Html et Css, tout d'abord, est-ce possible ?

Et oui il est possible de créer un menu déroulant (contenant des sous-rubriques) sans l'aide de JavaScript / Jquery.

Pour cela, nous allons créer deux nouveaux fichiers : menu-horizontale.html et menu-horizontale.css

Ce nouveau fichier sera placé dans notre dossier /HtmlCss/09-Lien/.

Ce qui donnera : /HtmlCss/09-Lien/menu-horizontale.html

menu-horizontale.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu-horizontale.css">
			</head>
			<body>
			
				<ul class="niveau1">
					<li><a href="">Accueil</a></li>
					<li class="sousmenu"><a href="">Formation</a>
						<ul class="niveau2">
							<li><a href="">Etudiants</a></li>
							<li><a href="">Emploi du temps</a></li>
							<li><a href="">Recherche de stage</a></li>
							<li><a href="">Documents</a></li>
						</ul>
					</li>
					<li><a href="">Informations</a></li>
					<li class="sousmenu">
						<a href="">Cours</a>
						<ul class="niveau2">
							<li><a href="">Internet</a></li>
							<li><a href="">HTML/CSS</a></li>
							<li><a href="">CMS</a></li>
							<li><a href="">Stats</a></li>
							<li><a href="">Réseaux sociaux</a></li>
							<li><a href="">Référencement</a></li>
							<li><a href="">Marketing</a></li>
							<li><a href="">Cahier des charges</a></li>
							<li><a href="">Photoshop</a></li>
						</ul>
					</li>
					<li><a href="">mon CV</a></li>
				</ul>
				
			</body>
		</html>

Nous emboiterons les <ul> des sous menus à l'intérieur d'autres <ul>.

Vous remarquerez également la présence des classes CSS comme "sousmenu" pour identifier les <li> (élément de liste) contenant d'autres sous-listes.

Nous ajoutons également les classes CSS "niveau1" et "niveau2" permettant de cibler les <ul> (conteneur de listes) de 1er niveau (rubriques principales) et de second niveau (sous rubriques).

Voici le code CSS associé :

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }

Décryptons les selecteurs et les propriétés du code Css :

nav ul li permet de selectionner la balise <li> à l'intérieur de la balise <ul> , elle-même à l'intérieur de la balise <nav> .
float: left; permet de donner un effet flottant côte à côte.
list-style: none; permet de retirer les puces de la liste.

Ce qui nous conduit au résultat provisoire suivant :

Ensuite, nous allons avoir besoin de cacher les sous rubriques déroulantes, puisque le principe d'un menu déroulant s'est dérouler !

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}

Cette fois ci, nous selectionnons les balises <ul> de second niveau à l'intérieur des balises <ul> de premier niveau. Cela revient à dire "va me chercher les UL à l'intérieur des autres UL" ou encore "Selectionne les UL contenus à l'intérieur d'autres UL".

display: none; permet de masquer les sous-listes.
width: 150px; permet de modifier la largeur de la sous liste (en vue de leur affichage).

Ce qui nous conduit au résultat provisoire suivant :

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}
	nav  li {background:#CCCCCC;}

Nous allons selectionner les éléments de listes représentés par la balise <li> à l'intérieur de la balise <nav>.

Background permet de leur appliquer une couleur de fond (ceci est facultatif).

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}
	nav  li {background:#CCCCCC;}
	nav  li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:150px;}

Nous allons selectionner les liens (balise <a>) à l'intérieur de la balise <li>, elle même contenue dans la balise <nav>.

text-decoration: none; Nous retirons l'effet souligné.

color: #000; Nous modifions la couleur du texte en blanc.

padding: 4px 0 4px; Nous ajoutons de la marge interieure de 4px en haut, 0 à droite, et 4px à gauche.

display:block; Nous en faisons des éléments "blocks".

width:150px; Nous fixons la largeur a 150 pixels.

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}
	nav  li {background:#CCCCCC;}
	nav  li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:150px;}
	nav  ul {padding: 0; margin:0px; text-align:center;}

Nous ajoutons une ligne permettant de retirer la marge extérieure (margin) et intérieure (padding), cela sera plus pratique en l'absence d'un reset CSS.

Nous alignons le texte au centre (text-align).

Il faut à présent faire ressortir les sous rubriques au moment du survol (hover) :

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}
	nav  li {background:#CCCCCC;}
	nav  li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:150px;}
	nav  ul {padding: 0; margin:0px; text-align:center;}
	nav  ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}

Nous allons selectionner les balises <ul> ayant la classe .niveau2 à l'intérieur de la balise <li> en survol ayant la classe .sousmenu, elle même contenue dans la balise <ul> à l'intérieur de la balise <nav>.

En d'autres termes : nous ciblons les <ul> de niveau 2 lorsque les <li> contenu dans les <ul> de niveau1 sont survolés.

C'est précisément ce qui permettra l'ouverture du menu déroulant !

Le code CSS final :

menu-horizontale.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}
	nav  li {background:#CCCCCC;}
	nav  li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:150px;}
	nav  ul {padding: 0; margin:0px; text-align:center;}
	nav  ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}
	nav  li:hover {background: #EDD;}
	nav  li.sousmenu:hover {background: #EBB;}

Le résultat final :

Un menu déroulant vertical

Voici une version d'un menu déroulant en vertical et uniquement à l'aide des langages Html et Css :

menu-vertical.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu-vertical.css">
			</head>
			<body>
			
				<ul class="niveau1">
					<li><a href="">Accueil</a></li>
					<li class="sousmenu"><a href="">Formation</a>
						<ul class="niveau2">
							<li><a href="">Etudiants</a></li>
							<li><a href="">Emploi du temps</a></li>
							<li><a href="">Recherche de stage</a></li>
							<li><a href="">Documents</a></li>
						</ul>
					</li>
					<li><a href="">Informations</a></li>
					<li class="sousmenu">
						<a href="">Cours</a>
						<ul class="niveau2">
							<li><a href="">Internet</a></li>
							<li><a href="">HTML/CSS</a></li>
							<li><a href="">CMS</a></li>
							<li><a href="">Stats</a></li>
							<li><a href="">Réseaux sociaux</a></li>
							<li><a href="">Référencement</a></li>
							<li><a href="">Marketing</a></li>
							<li><a href="">Cahier des charges</a></li>
							<li><a href="">Photoshop</a></li>
						</ul>
					</li>
					<li><a href="">mon CV</a></li>
				</ul>
				
			</body>
		</html>

menu-vertical.css

	nav  ul li { float:left; list-style: none; }
	nav  ul ul {display:none; width:150px;}
	nav  li {background:#CCCCCC;}
	nav  li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:150px;}
	nav  ul {padding: 0; margin:0px; text-align:center;}
	nav  ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}
	nav  li:hover {background: #EDD;}
	nav  li.sousmenu:hover {background: #EBB;}

Menu fixé en haut de page

Voici une version d'un menu fixé en haut de page à l'aide de la position fixed en CSS :

menu-fixe.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu-fixe.css">
			</head>
			<body>
				<nav>
					<a href="">Accueil</a>
					<a href="">Actualités</a>
					<a href="">Qui Sommes Nous ?</a>
					<a href="">Contact</a>
				</nav>
				<div id="contenu">
					[Ecrivez 100 lignes de texte]
				</div>				
			</body>
		</html>

Et voici le code CSS qui va avec :

menu-fixe.css

nav{
	background: #000; /* fond */
	color: #fff;
	padding: 0.5em 0;
	position: fixed; /* Le menu a une position fixe lors de la descente dans la page */
	text-align: center; /* alignement du texte centré */
	width: 100%; /* largeur 100% de la fenêtre */
	top: 0; /* aligné à 0px du haut */
	left: 0; /* aligné à 0px de la gauche */
	}
	nav  a{ 
	padding: 0.5em 2em; 
	color: #fff; 
	text-decoration: none; 
	height: 33px; 
	}
	nav  a:hover{ 
	background: #fda500; 
	}
	#contenu{
	border: 2px solid #336699; /* bordure */
	margin: 40px 0 0 0; /* marges haut droite bas gauche */
	}

Pour faire des tests, il suffit de scroller vers le bas (descendre la barre de défilement vers le bas), vous appercevrez alors que le menu reste toujours affiché en haut de page.

Allez au chapitre suivant : 16. Les Formulaires