Menus horizontaux
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
|