Aide:Boîte déroulante
Un modèle déroulant est un modèle qui a un bouton enrouler/dérouler pour cacher/afficher son contenu : Catégorie:Modèle déroulant.
Une boîte déroulante fait référence aux modèles {{Boîte déroulante}}, {{Boîte déroulante/début}} et {{Boîte déroulante/fin}}.
Une palette de navigation est un modèle dont le nom commence par « Palette ... » et utilisant un mécanisme de boîte déroulante ({{Méta palette de navigation}}).
Exemple de base avec {{Boîte déroulante/début}} :
{{Boîte déroulante/début|titre=Titre de la boîte}}
Contenu de la boîte
{{Boîte déroulante/fin}}
Contenu de la boîte
Sommaire
[masquer]Avantages, limites et inconvénients
Il faut distinguer les problèmes d'utilité, d'ergonomie, d'accessibilité, d'interopérabilité et d'esthétique.
Avantages
- Réduit la place occupée par des paragraphes, des longues listes et/ou des images d'importance secondaire.
- Ajoute des menus de navigation ciblés, sans encombrer les pages d'articles.
- Masque certains passages pour des raisons diverses.
Limites techniques
- l'enroulement nécessite un navigateur Web compatible avec les Feuilles de style et JavaScript. Sans support de javascript, le contenu est affiché déroulé.
- ces modèles sont actuellement paramétrés pour occuper toute la largeur de la page : ils ne peuvent se placer à côté de contenus flottants comme les images, les infobox et les boîtes utilisateurs.
Inconvénients
- Dans tous les cas, le contenu de ces modèles est visible pendant le chargement de la page.
- Même si elle propose un contenu caché, elle nécessite d'être téléchargée, ce qui peut pénaliser les personnes utilisant un internet bas débit si son contenu est particulièrement lourd, c'est-à-dire principalement s'il s'agit d'images multiples.
- Casse les liens ancrés et les liens sur référence qui sont placés dedans, si la boîte n'est pas ouverte.
- Gène la fonction « recherche » des navigateurs web.
- Accessibilité correcte mais améliorable notamment pour les utilisateurs de lecteurs d'écrans.
- Occasionne parfois des surprises à l'impression.
- Pour les boîtes de défilement à ascenseur, la navigation est impossible au clavier si la boîte ne contient pas de liens
Usage
Boîte adaptée
- Dans les articles :
- En tenant compte des contraintes techniques, les modèles déroulants sont en général à bannir du corps des articles;
- Des exceptions sont tolérées pour les sommaires personnels;
- Ils sont admis en bas des articles, sous la forme de palettes de navigation.
- Hors des articles:
- Leur usage est pratique dans les explications et les discussions, surtout pour les listes longues;
- Les boîtes déroulantes sont également utiles dans les pages personnelles des utilisateurs.
Boîte déroulante dans les articles
De manière générale, ne pas utiliser les boîtes déroulantes dans le coeur des articles car les boîtes déroulantes s'alignent mal avec les contenus « flottants » ajoutés aux pages, comme les infobox, les images et les boîtes utilisateurs.
Un modèle déroulant, selon les écrans utilisés, risque de cacher une partie de l'article ou de nuire à sa mise en page générale. C'est pour cette raison que sont tolérées en principe seulement les palettes de navigation, placées tout en bas de page.
Donc, en cas d'utilisation dans un article, placer une fonction {{Clear}} avant la boîte déroulante.
Présentation et paramètrage
Pour des raisons de commodité, standardisation, possibilités et efficacité, WikiGenWeb déconseille le modèle {{Boîte déroulante}} et impose l'utilisation des modèles : {{Boîte déroulante/début}} et {{Boîte déroulante/fin}}
Tableaux
{{Boîte déroulante/début
|titre=La boite déroulante
}}
{| class="wikitable"
|-
|Case 1
|Case 2
|-
|Case 3
|Case 4
|}
{{Boîte déroulante/fin}}
| Case 1 | Case 2 |
| Case 3 | Case 4 |
Boîte déroulante dans une boîte déroulante
Formellement interdit.
Boîte déroulante dans une infobox
Formellement interdit.
Syntaxe
Boîte déroulante par défaut
| Wikitext | Rendu |
|---|---|
{{boîte déroulante/début
|titre=Titre de la boîte
}}
Contenu de la boîte
{{boîte déroulante/fin}}
|
Titre de la boîte
Contenu de la boîte |
Paramètres
| Paramètres obligatoires | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| paramètre | effet | valeurs possibles | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
titre |
Titre affiché de la boîte | Totalement libre, mais le caractère « | » par exemple ne passe pas. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
contenu |
Texte contenu dans la boîte | Totalement libre | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Paramètres facultatifs | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| paramètre | effet | valeur par défaut | valeurs possibles | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
arrondi (activé) |
arrondi des angles | 0.6em |
Les angles peuvent apparaître arrondis si le navigateur le permet. Visible sur les navigateurs Mozilla, non visible sur Internet Explorer. Valeur conseillée : 0.6em, s’exprime en pt, px ou em
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
image |
image à gauche |  |
L’image facultative apparaît à l’ouverture de la boîte. Elle doit être totalement renseignée. Exemple : [[Fichier:Wiki.png|20px]]
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
style |
style complémentaire | Style complémentaire pour l'image, terminé par un « ; ». | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
alignB |
alignement de la boîte | left |
left, right, center ou justify
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hauteur |
hauteur de la boîte repliée | 1.6em |
La hauteur doit être exprimée avec une unité valable. Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
margeHaut |
marge haut (avant la boîte) | 0em |
La hauteur doit être exprimée avec une unité valable. Il est possible de mettre 0 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
margeBas |
marge bas (après la boîte) | 0em |
La hauteur doit être exprimée avec une unité valable. Il est possible de mettre 0 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
marge |
marges L, H, D, B | 0 | marges autour du contenu | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
largeur |
largeur de la boîte | 99% |
La largeur doit être exprimée avec une unité valable. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
couleurBordure |
couleur de la bordure | #AAAAAA |
Expression de couleur valide Table des couleurs
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
couleurFondB |
couleur de fond de la boîte | #FFFFFF
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
couleurFond |
couleur de fond du contenu | white
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
label |
"title" pour accessibilité | [Liste déroulante] |
Totalement libre. texte affiché sur le survol de la boîte. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Texte | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
align |
alignement du contenu | left |
left, right, center ou justify
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
alignT |
alignement du titre | center
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
taille |
taille de police du contenu | 100% |
libre, de préférence exprimé en em ou % : 1em, 0.9em, 150% etc. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
couleurFondT |
couleur de fond du titre | #CCCCFF |
Expression de couleur valide Table des couleurs
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
couleurTexteT |
couleur du texte de titre | black
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
thinning |
titre pas en gras | no |
yes/no | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| paramètre | effet | valeur par défaut | valeurs possibles |
|---|---|---|---|
| Boîte | |||
arrondi (activé) |
arrondi des angles | 0.6em |
Valeur conseillée : 0.6em, s’exprime en pt, px ou em
|
alignB |
alignement de la boîte | left |
left, right, center
|
hauteur |
hauteur de la boîte repliée | 1.6em |
La hauteur doit être exprimée avec une unité valable. Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables |
margeHaut |
marge haut (avant la boîte) | 0em |
La hauteur doit être exprimée avec une unité valable. Il est possible de mettre 0. |
margeBas |
marge bas (après la boîte) | 0em |
La hauteur doit être exprimée avec une unité valable. Il est possible de mettre 0 |
largeur |
largeur de la boîte | 99% |
La largeur doit être exprimée avec une unité valable. |
couleurBordure |
couleur de la bordure | #AAAAAA |
Expression de couleur valide |
couleurFondB |
couleur de fond de la boîte |
#FFFFFF |
Expression de couleur valide |
label |
"title" pour accessibilité | [Liste déroulante] |
Totalement libre. texte affiché sur le survol de la boîte. |
| Titre de la boîte | |||
image |
image à gauche | |
L’image facultative apparaît à l’ouverture de la boîte. Elle doit être totalement renseignée. Exemple : [[Fichier:Wiki.png|20px]]
|
style |
style complémentaire | Style complémentaire pour l'image, terminé par un « ; ». | |
titre |
Titre affiché de la boîte | Totalement libre, mais le caractère « | » par exemple ne passe pas. | |
alignT |
alignement du titre | center |
left, right, center
|
couleurFondT |
couleur de fond du titre | #CCCCFF |
Expression de couleur valide |
couleurTexteT |
couleur du texte de titre | black |
Expression de couleur valide |
thinning |
titre pas en gras | no |
yes/no |
| Contenu | |||
couleurFond |
couleur de fond du contenu | white |
Expression de couleur valide |
marge |
marges L, H, D, B | 0 | marges autour du contenu |
align |
alignement du contenu | left |
left, right, center ou justify
|
taille |
taille de police du contenu | 100% |
libre, de préférence exprimé en em ou en % : 1em, 0.9em, 150% etc. |
Exemples de boîtes
 par défaut (align=left, alignT=center)
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
Contenu à droite (align=right)
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| Contenu centré, titre à gauche (align=center, alignT=left)
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
Contenu justifié, titre à droite (align=justify, alignT=right)
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
Fonction complète
{{boîte déroulante/début
<!-- Boîte -->
|arrondi=0.6em
|alignB=left
|hauteur=1.6em
|margeHaut=0em
|margeBas=0em
|largeur=100%
|couleurBordure=#AAAAAA
|couleurFondB=#FFFFFF
<!-- Titre -->
|image=
|style=
|titre=Titre de la boîte
|alignT=center
|label=
|couleurFondT=#CCCCFF
|couleurTexteT=black
|thinning=no
<!-- Contenu-->
|marge=0px
|couleurFond=white
|align=left
|taille=100%
}}
<-- ici le contenu -->
{{Boîte déroulante/fin}}
<-- ici le contenu -->
