Menus horizontaux

(1918 mots dans ce texte )  -   lu : 5062 Fois     Page Spéciale pour impression

Menu vertical droite
Menus vertical gauche
Menus images

Menu horizontal avec 1 sous-menus

Démo

Code html (A ajouter dans header.html de votre thème par exemple)

Code CSS (A ajouter de le fichier css de votre thème)

/* Menu déroulant - horizontal*/
#header_menu {
	padding : 0; /* pas de marge intérieure */
	margin : 5px 0px 5px 0; /* ni extérieure */
	list-style : none;
	line-height : 20px; /* définit une hauteur pour chaque élément */
	font-weight : bold; /* texte en gras */
	font-family : Arial;
	font-size : 12px; /* hauteur du texte : 12 pixels */	
	z-index: 20;
}

#header_menu ul { /* Liste */     
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none;
	line-height : 20px; /* définit une hauteur pour chaque élément */
}


#header_menu a { /* Contenu des listes */
	display : block; /* Les liens deviennent des balises de type block */
	padding : 0;
	color : #000; /* couleur du texte */
	border: 1px solid #000000;
	text-decoration : none;
}

#header_menu li { /* Éléments des listes */      
	float : left;
	width : 120px;
	background: #b2f1f3;
	text-align:center
}

#header_menu li ul { /* Sous-listes */
	position: absolute;
	width: 120px;
	left: -999em;
	z-index: 30;

}
#header_menu li ul li { /* Eléments de sous-listes */
}

#header_menu li ul ul {
	margin: -20px 0 0 120px;
}

#header_menu a:hover { /* Lorsque la souris passe sur un des liens */    
	color: #fff; /* On passe le texte en noir... */
	background:#67bfd3;
}

#header_menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#header_menu li:hover ul, #header_menu li li:hover ul, #header_menu li.sfhover ul, #header_menu li li.sfhover ul {
	left: auto;
	min-height: 0;
}

Menu horizontal avec 2 sous-menus (voir rubrique Plus-forums)

Démo

Code html

Code CSS (A ajouter de le fichier css de votre thème)

/* Menu déroulant - horizontal*/
#header_menu {
	padding : 0; /* pas de marge intérieure */
	margin : 5px 0px 5px 0; /* ni extérieure */
	list-style : none;
	line-height : 20px; /* définit une hauteur pour chaque élément */
	font-weight : bold; /* texte en gras */
	font-family : Arial;
	font-size : 12px; /* hauteur du texte : 12 pixels */	
	z-index: 20;
}

#header_menu ul { /* Liste */     
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none;
	line-height : 20px; /* définit une hauteur pour chaque élément */
}


#header_menu a { /* Contenu des listes */
	display : block; /* Les liens deviennent des balises de type block */
	padding : 0;
	color : #000; /* couleur du texte */
	border: 1px solid #000000;
	text-decoration : none;
}

#header_menu li { /* Éléments des listes */      
	float : left;
	width : 120px;
	background: #b2f1f3;
	text-align:center
}

#header_menu li ul { /* Sous-listes */
	position: absolute;
	width: 120px;
	left: -999em;
	z-index: 30;
}

#header_menu ul li { /* Éléments des listes */      
	float : left;
	width : 120px;
	background: #b2f1f3;
	text-align:center
}

#header_menu ul li ul { /* Sous-listes */
	position: absolute;
	width: 120px;
	left: -2em;
	z-index: 30;
}

#header_menu ul li { /* (Sous-liste de Sous-listes) Éléments des listes */ 
	float:left; 
	margin-right:172px; 
	position:relative;
}
#header_menu ul li ul li{ /* Sous-liste des Sous-listes */
	position:relative;
	margin-top: -1px;
	z-index:50;
}

#header_menu li ul ul {
	margin: -20px 0 0 120px;
}

#header_menu a:hover { /* Lorsque la souris passe sur un des liens */    
	color: #fff; /* On passe le texte en blanc... */
	background:#67bfd3;
}

#header_menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#header_menu li:hover ul, #header_menu li li:hover ul, #header_menu li.sfhover ul, #header_menu li li.sfhover ul {
	left: auto;
	min-height: 0;
}

Pour toutes questions: Forum




Retour à la sous-rubrique :

Autres publications de la sous-rubrique :