Menus - images

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*/
#menu {
	padding : 0; /* pas de marge intérieure */
	margin : 5px 0px 5px 0; /* marges de 5 pixel en haut en bas */
	list-style : none; /* Pas de puce */
	line-height : 25px; /* 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 */	
}
#menu ul { /* Liste */     
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* Pas de puce */
	line-height : 25px; /* définit une hauteur pour chaque élément */
}
#menu a { /* Contenu des listes */
	display : block; /* Les liens deviennent des balises de type block */
	padding : 0; /* pas de marge intérieure */
	color : #000000; /* couleur du texte */
	border: 1px solid #000000; /* bordure noire complète */
	text-decoration : none;
	background: url('images/5.jpg'); /* image de backgound*/
}
#menu a:hover { /* Contenu des listes */
	background: url('images/6.jpg'); /* image de backgound au survol*/
	color : #8e8e8e; /* couleur du texte */
}
#menu li { /* Éléments des listes */      
	float : left; /* Elements se suivant à gauche */
	width : 120px; /* largeur cellules */
	text-align:left; /* text aligné à gauche*/
	text-indent: 5px; /* Indentation du texte de 5 pixels (décalage du texte à gauche  */
}
#menu li ul { /* Sous-listes */
	position: absolute; 
	width: 120px; /* largeur cellules */
	left: -999em;
	z-index: 30; /* Permet de ne pas cacher le sous-menus, en cas de superposition de calques */
}
#menu li ul a { /* Sous-listes */
	background: url('images/7.jpg'); /* image de backgound au survol*/
}
#menu li ul a:hover { /* Sous-listes */
	background: url('images/8.jpg'); /* image de backgound au survol*/
	color: #ffffff;
}
#menu li ul ul {
	margin: -25px 0 0 120px; /* décalage du sous-menu */
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}
#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 img{ /* Images des listes */      
	padding-right: 5px; /* Marge de l'image à droite de 5 pixels  */
	border:0;
	vertical-align:middle; /* Alignement des images au milieu par rapport au texte  */
	width: 19px; /* Largeur des images  */
	height:19px; /* Hauteur des images  */
}

Pour toutes questions: Forum

fouineur
2  

fouineur
  Posté : 29-07-2015 22:04

Bonsoir,
Merci pour le menu fonctionnel nickel.
Juste un détail, un petit téléchargement avec les images aurait été pas mal.

Un grand merci pour tout

  Profil  www
Les Commentaires sont la propriété de leurs auteurs. Nous ne sommes pas responsables de leur contenu.






Cet article provient de NPDS Thèmes

L'URL pour cet article est : http://styles.npds.org/sections.php?op=viewarticle&artid=26