[Résolu] Bandeau déroulant

Bonjour,

en visite sur le site service-public.fr, je vois ça :


(attention, les traits de délimitation du bandeau n'apparaissent pas ici, je ne sais pas pourquoi). Si vous voulez le voir :
https://www.service-public.fr/particuliers/vosdroits/F1194

J'ai extrait une partie du code avec Firbug :

<button class="btn btn-collapse" data-toggle="collapse" data-xiti-type="navigation" type="button" data-target="#fiche-item-1" data-xiti-name="Particuliers::Vos_droits::Depliant::De_quoi_s'agit-il&nbsp;?_F1194_Emancipation_d_un_mineur" aria-expanded="true" role="button" id="ui-collapse-zz4avzoge7egcesphwcos" data-atclickmanagement="no"><span>De quoi s'agit-il&nbsp;?</span></button>

mais comment réaliser ce genre de bandeau ? Y-a-t-il un tuto quelque part, pour ne pas chercher des heures à refaire la roue.

Merci pour les conseils.
Modifié par Bongota (21 Sep 2018 - 17:13)

Ils utilsent un script JS
Perso je ré-inventerai la roue avec du pure CSS en utilisant un <input type="checkbox"> que je cacherai à la vue de tout le monde et en emballant le bouton dans le label associé
Reste après juste à ajuster la hauteur du <div> en fonction de l'état coché ou non, avec une petite transition pour épater la foule.

Si l'on ne veut pas réinventer la roue alors autant utiliser Bootstrap pour ce genre de chose...

Bonjour,
Bootstrap, très peu pour moi, je préfère me casser les dents sur Grid que sur Bootstrap
On peut aussi, tout bêtement, utiliser un menu déroulant, en le détournant de son but initial. Je viens de tester sur un site d'essai que j'ai sur ma machine. Il faut juste enlever les <a href..., laisser <ul> et encadrer le texte souhaité dans <li>. Il restera à justifier ce texte parce que dans mon exemple, il se place en justification centrale, comme les sous-menus. On peut même se permettre de déterminer la couleur du fond qui va apparaître sous le texte, comme on le fait pour les sous-menus.
Là, c'est peut-être moi qui réinvente la roue, d'autres ont du sans doute déjà y penser.

Merci pour les réponses.

Un début de piste pour la roue :
https://codepen.io/bazooka07/pen/PdLVrb