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
|  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 |
|
|
Accueil
Membres
Connexion
News
Plus
Accueil
Membres
Connexion
News
Plus