TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 98948 visiteurs

 1 visiteur en ligne

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 :

  1. onglet STRUCTURE
  2. BOÎTES MENUS DÉROULANTS
ADMIN_DD_boiteMenu.png Choisir le type de menu
ADMIN_DD_boiteMenuTitre.png Indiquer le titre de la boîte

Étape 2 : création des options du menu :

  1. onglet STRUCTURE
  2. OPTIONS DE MENU DÉROULANT
Les options du menu vertical et du menu horizontal se configurent de la même manière
DDH1.png Ce qui est toujours visible dans le menu horizontal ou vertical
DDH1_1.png Le 2ème niveau d'une option, visible quand il est survolé
DDH1_2_1.png Le 3ème niveau d'une option, quand un item est survolé
Menu horizontal Menu vertical
DDHorizontal1.png DDvertical1.png

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;
}
/*************/

DDHorizontal1.png

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             down-arrow.png li.L2            down-arrow.png

Exemple, couleur du lien :

.DDH10 ul.dropdown-horizontal li.L1-3 a {
    color: #c00000; /*couleur rouge*/
}

li.L1-1
li.dir.L1-2      right-arrow.png li.L1-2-1
li.L1-3

DDvertical1.png

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          down-arrow.png li.L1-1
li.L2 li.dir.L1-2    right-arrow.png li.L1-2-1
li.L1-3

Exemple, couleur du lien :

.DDV15 ul.dropdown-vertical li.L1-3 a {
    color: #c00000; /*couleur rouge*/
}

DDLineaire.png

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 :

li.T0 li.T1 li.T2

li.C0

Exemple, 3ème item du menu :

.DDL413 ul.dropdown-linear li.T2 {

    background: #ff3333; /*fond rouge*/
    color: #ffffff; /*couleur blanc*/
}

Mots-clés associés

Date de création : 27/06/2013 15:37
Dernière modification : 08/06/2014 12:20
Page lue 6394 fois


Vous êtes ici :   Accueil » Menus déroulants