Exemple de Menu

Cette page vous donne un exemple de la mise en place d'un menu réactif au survol de la souris. Cet exemple peut vous être utile dans le cadre de votre projet.

Ci dessous, vous trouverez la démo, le code source et un lien de téléchargement des fichiers source. A vous ensuite de personnaliser les deux fichiers : le fichier HTML pour personnaliser le contenu de votre menu et le fichier CSS pour personnaliser le visuel graphique.

Lien de téléchargement des sources : Sources

Lien de la démo : Démo

code source :

Fichier CSS :

	
		        .menu-top a , 
				.menu-top a:link , 
				.menu-top a:visited , 
				.menu-top a:hover {
		        	letter-spacing: normal; 
					text-decoration: none; 
					word-spacing: normal;
		        }
                
		        .menu-top , 
				.menu-top ul {
		        	margin: 0px; 
					padding: 0px; 
					display: block; 
					list-style-type: none;
		        }
                
		        .menu-top li {
		        	float: left; 
					display: block;
		        }
                
		        .menu-top li li {
		        	float: none;
		        }
                
		        .menu-top ul {
		        	visibility: hidden;
		        }
                
		        .menu-top li:hover > ul {
		        	top: 100%; 
					visibility: visible;
		        }
                
		        .menu-top , .menu-top ul {
		        	min-height: 0px;
		        }
                
		        .menu-top ul li {
		        	clear: both;
		        }
                
		        .menu-top a {
		        	overflow: hidden; 
					text-decoration: none; 
					display: block;
		        }
                
		        .menu-top ul a {
		        	overflow: hidden; 
					display: block; 
					white-space: nowrap;
		        }
                
		        .nav ul.menu-top ul span , 
				.nav ul.menu-top ul span span {
		        	float: none; 
					display: inline; 
		        }
                
		        .menu-top a .t {
					color: black;
					background-color:#9CF ;
					padding:5px;
				}
                
		        .menu-top a:hover .t , 
				.menu-top li:hover a .t , 
				.menu-top li:hover > a .t {
		        	color: red;
		        }
                
		        .menu-top a.menu-current .t {
		        	color: blue;
		        }
                
		        .menu-top ul li a:hover , .menu-top ul li:hover > a {
		        	color: black;
		        }
                
		        .nav .menu-top ul li a:hover span , 
				.nav .menu-top ul li a:hover span span , 
				.nav .menu-top ul li:hover > a span , 
				.nav .menu-top ul li:hover > a span span {
		        	color: green;
					background-color:#FFC;
		        }

Fichier HTML :

<!DOCTYPE html>

<HTML>

<HEAD>
  <TITLE>Accueil</TITLE>
  <META charset="utf-8">
  <LINK href="menu_fichiers/style.css" rel="stylesheet" type="text/css"> 
</HEAD>

<BODY>
	<CENTER>
		<DIV class="nav">
			<UL class="menu-top">
				<LI>
					<A title="Accueil" class="menu-current" href="#" target="_top">
						<SPAN class="t">Accueil</SPAN>
					</A>
					<UL>
						<LI>
							<A title="sousmenu0" href="#" target="_top">
								<SPAN class="t">sousmenu0</SPAN>
							</A>
						</LI>
					</UL>
				</LI>
				<LI>
					<A title="menu1" href="#" target="_top">
						<SPAN class="t">menu1</SPAN>
					</A>
					<UL>
						<LI>
							<A title="sousmenu1" href="#" target="_top">
								<SPAN class="t">sousmenu1</SPAN>
							</A>
						</LI>
						<LI>
							<A title="sousmenu2" href="#" target="_top">
								<SPAN class="t">sousmenu2</SPAN>
							</A>
						</LI>
						<LI>
							<A title="sousmenu3" href="#" target="_top">
								<SPAN class="t">sousmenu3</SPAN>
							</A>
						</LI>
					</UL>
				</LI>
				<LI>
					<A title="menu1" href="#" target="_top">
						<SPAN class="t">menu2</SPAN>
					</A>
					<UL>
						<LI>
							<A title="sousmenu4" href="#" target="_top">
								<SPAN class="t">sousmenu4</SPAN>
							</A>
						</LI>
						<LI>
							<A title="sousmenu5" href="#" target="_top">
								<SPAN class="t">sousmenu5</SPAN>
							</A>
						</LI>
						<LI>
							<A title="sousmenu6" href="#" target="_top">
								<SPAN class="t">sousmenu6</SPAN>
							</A>
						</LI>
						</UL>
				</LI>
			</UL>
		</DIV>
	</CENTER>
</BODY>

</HTML>