La mise en forme générale se fait dans la section de style.css concernée (3ème section en partant du bas).
- Configuration
- Style - Généralités
- Style - Menu horizontal
- Style - Menu vertical
- Style - Menu Linéaire
Les menus déroulants se configurent depuis le panneau d'administration :
Étape 1 : création de la boîte menu :
- onglet STRUCTURE
- BOÎTES MENUS DÉROULANTS
 |
Choisir le type de menu |
 |
Indiquer le titre de la boîte |
Étape 2 : création des options du menu :
- onglet STRUCTURE
- OPTIONS DE MENU DÉROULANT
Les options du menu vertical et du menu horizontal se configurent de la même manière |
 |
Ce qui est toujours visible dans le menu horizontal ou vertical |
 |
Le 2ème niveau d'une option, visible quand il est survolé |
 |
Le 3ème niveau d'une option, quand un item est survolé |
Menu horizontal |
Menu vertical |
 |
 |
Menu linéaire
Le menu linéaire peut contenir plusieurs options. Quand une option est survolée, une boîte s'affiche. Cette boîte est comme une boîte libre, dans laquelle on peut mettre tout ce qu'on veut :
- un menu
- du texte
- un tableau
- une image
- un diaporama
- une vidéo
- etc.
|
Les attributs généraux des menus déroulants sont dans ces lignes :
/******* Menus déroulants******/
ul.dropdown {
font-weight: bold;
list-style: none;
margin: 0;
padding: 0;
position: relative;
float: left;
}
ul.dropdown li { /*niveau 1*/
padding: 7px 10px;
border: 1px solid #C0C0C0;
background-color: #F78709;
color: #FFF;
list-style: none;
margin: 0;
float: left;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li:hover { /*niveau 1 survolé*/
background-color: #0386BE;
color: #FFF;
position: relative;
z-index: 599;
cursor: pointer;
}
ul.dropdown a:link, ul.dropdown a:visited { /*lien et lien visité*/
color: #FFF;
text-decoration: none;
}
ul.dropdown a:hover { /*lien survolé*/
color: #FFF;
}
ul.dropdown ul {
width: 150px;
margin-top: 1px;
list-style: none;
margin: 0;
padding: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
ul.dropdown ul li {
font-weight: normal;
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li *.dir {
padding-right: 20px;
}
ul.dropdown-horizontal ul li *.dir { /*menu horizontal*/
padding-right: 20px;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown-vertical { /*menu vertical*/
width: 160px;
}
ul.dropdown-vertical ul {
top: 1px;
left: 99%;
}
ul.dropdown-vertical li {
float: none;
}
ul.dropdown-linear { /*menu linéaire*/
width: 100%;
font-size: 12px;
}
ul.dropdown-linear li {
font: 12px Arial, Helvetica, sans-serif;
}
ul.dropdown-linear ul li {
float: left;
font: 10px Arial, Helvetica, sans-serif;
background-color: #FFF;
border: 1px solid #c0c0c0;
}
ul.dropdown-linear li:hover {
position: static;
background: #FFF;
}
ul.dropdown-linear ul li:hover {
background-color: #FFF;
}
ul.dropdown-linear ul ul {
display: none !important;
}
/*************/
|

Un menu horizontal est identifié par DDHxx (xx étant le numéro de la boîte).
Pour personnaliser votre menu horizontal, ajoutez les lignes suivantes à la fin du fichier style.css (n'oubliez pas de changer le numéro de la boîte !) :
/**** MENU DÉROULANT HORIZONTAL ****/
.DDH10 ul.dropdown-horizontal { /*ensemble du menu*/
width: 400px;
}
.DDH10 ul.dropdown-horizontal li { /*niveau 1*/
border: 1px solid #000;
background: #c0c0c0; /*gris*/
}
.DDH10 ul.dropdown-horizontal li:hover { /*niveau 1 survolé*/
background-color: #abf713; /*vert*/
color: #000;
}
.DDH10 ul.dropdown-horizontal li:hover a { /*lien niveau 1 survolé*/
color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li { /*niveau 2*/
margin-left: -1px;
background: #fff; /*blanc*/
border: 1px solid #000;
color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li a { /*lien niveau 2*/
color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li:hover { /*niveau 2 survolé*/
color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li:hover a { /*lien niveau 2 survolé*/
color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li ul li { /*niveau 3*/
margin-top: -2px;
margin-left: 2px;
width: 200px;
background: #f7d413; /*jaune*/
color: #000;
}
/*************************************/
Il est possible de personnaliser une partie du menu, les classes sont :
li.L1  |
li.L2  |
Exemple, couleur du lien :
.DDH10 ul.dropdown-horizontal li.L1-3 a {
color: #c00000; /*couleur rouge*/
}
|
li.L1-1 |
|
li.dir.L1-2  |
li.L1-2-1 |
li.L1-3 |
|
|

Un menu vertical est identifié par DDVxx (xx étant le numéro de la boîte).
Pour personnaliser votre menu vertical, copiez les lignes ci-dessous à la fin du fichier style.css (n'oubliez pas de changer le numéro de la boîte !) :
/**** MENU DEROULANT VERTICAL ****/
.DDV15 ul.dropdown-vertical { /*ensemble du menu*/
width: 400px;
}
.DDV15 ul.dropdown-vertical li { /*niveau 1*/
border: 1px solid #000;
background: #c0c0c0; /*gris*/
}
.DDV15 ul.dropdown-vertical li:hover { /*niveau 1 survolé*/
background-color: #abf713; /*vert*/
color: #000;
}
.DDV15 ul.dropdown-vertical li:hover a { /*lien niveau 1 survolé*/
color: #000;
}
.DDV15 ul.dropdown-vertical li ul li { /*niveau 2*/
margin-left: -1px;
background: #fff; /*blanc*/
border: 1px solid #000;
color: #000;
}
.DDV15 ul.dropdown-vertical li ul li a { /*lien niveau 2*/
color: #000;
}
.DDV15 ul.dropdown-vertical li ul li:hover { /*niveau 2 survolé*/
color: #000;
}
.DDV15 ul.dropdown-vertical li ul li:hover a { /*lien niveau 2 survolé*/
color: #000;
}
.DDV15 ul.dropdown-vertical li ul li ul li { /*niveau 3*/
margin-top: -2px;
margin-left: 2px;
width: 200px;
background: #f7d413; /*jaune*/
color: #000;
}
/***********************************/
Il est possible de personnaliser un item en particulier du menu, les classes sont :
li.L1  |
li.L1-1 |
|
|
li.L2 |
li.dir.L1-2  |
li.L1-2-1 |
|
|
li.L1-3 |
|
|
|
|
|
|
Exemple, couleur du lien :
.DDV15 ul.dropdown-vertical li.L1-3 a {
color: #c00000; /*couleur rouge*/
}
|

Un menu linéaire est identifié par DDLxx (xx étant le numéro de la boîte).
Pour personnaliser votre menu linéaire, copiez les lignes suivantes à la fin du fichier style.css (n'oubliez pas de modifier le numéro !) :
/**** MENU DEROULANT LINEAIRE ***/
.DDL413 ul.dropdown.dropdown-linear { /*largeur du menu*/
width: 600px;
}
.DDL413 ul.dropdown.dropdown-linear li { /*titre du menu*/
width: 130px;
background: #961649;
border: 0px;
padding-left: 20px;
color: #fff;
border: 1px solid #701c3d;
}
.DDL413 ul.dropdown.dropdown-linear li ul li { /*contenu du menu*/
background: url(img/cfs.png);
width: 400px;
color: #404040;
border-radius: 0px;
border: 1px solid #701c3d;
}
.DDL413 ul.dropdown.dropdown-linear li ul li a { /*lien dans le menu*/
color: #961649;
}
/***********************************************/
Pour personnaliser une seule partie du menu linéaire, les classes sont :
Exemple, 3ème item du menu :
.DDL413 ul.dropdown-linear li.T2 {
background: #ff3333; /*fond rouge*/
color: #ffffff; /*couleur blanc*/
}
|