[Résolu] Menu par checkbox

Bonjour,
Voilà plusieurs jours que je me casse la tête à essayer un truc que je crois bien avoir vu faire sur un site de tutoriels de menus déroulants en CSS3 mais que je ne retrouve plus :
Grâce à un système de cases à cocher mis en forme de façon à ce que la case à cocher elle-même ne soit pas visible, il s'agit, grâce à CSS3, de faire apparaître un sous-menu déroulant lorsque l'item du menu est dans l'état "checked". On a donc un sous-menu qui se déroule lorsqu'on clique sur l'élément du menu, et qui reste déroulé tant qu'on ne reclique pas sur ce même élément, un peu comme dans un TreeView, mais sans JavaScript ni JQuery.
L'auteur de ce petit bijou présentait plusieurs exemples de mise en forme de menus avec sous-menus, en utilisant des systèmes de cases à cocher et/ou de boutons radio. Cela semblait ingénieux, mais non seulement je n'arrive pas à le retrouver, mais je me bats avec le CSS depuis plusieurs jours, avec ou sans JavaScript, pour tenter de le refaire et je n'y parviens pas.
Je pense qu'il s'agissait d'un site comme Codrops, CSS3 Create ou Design Spartan.
Le résultat que je cherche à obtenir ressemble à ceci (cliquez) (es sous-menus s'affichent et se réduisent en cliquant sur les flèches) ...Mais celui-ci ne semble pas utiliser de case à cocher, et je n'arrive pas à m'y retrouver dans le code qu'il utilise.
Si quelqu'un peut m'aider, je pense que cela me permettrait de progresser dans mes connaissances, et cela m'aiderait beaucoup.
Merci d'avance pour vos contributions.

salut,
c'est effectivement très ingénieux comme astuce. Perso je pense qu'il faudra malgré tout ajouter un soupçon de JS pour rendre ce menu plus pratique et en plus de ça, il faudra tenir compte du fait que les anciens navigateurs ne te permettront pas de l'utiliser. Cela dit, je trouve que ça vaut le coup et qu'on peut tout de même se débrouiller pour ces vieux navigateurs.
Voici un exemple de ce que tu cherches, je te donne juste le principe, tu adapteras ou t'en inspireras s'il te convient.

Bonjour,

voici une autre approche avec :focus plutôt que :checked (ou :target) , la compatibilité théorique est plus forte car :focus et tabindex sont compris par les plus vieux navigateurs.
1 niveau : http://codepen.io/gc-nomade/pen/Ddgph
2 niveaux : http://codepen.io/gc-nomade/pen/HcAqm

Cdt,

gc-nomade a écrit :
voici une autre approche avec :focus plutôt que :checked (ou :target)

Pfff bien sûr ! Et moi qui comme une cruche trouvais ça ingénieux Je me disais aussi pourquoi je n'avais jamais pensé à ça ou que je n'avais jamais vu ça.
Évidemment que :focus est une bien meilleure solution. Tes exemples le montrent parfaitement.

Il y a une différence entre l'utilisation de :focus et celle de :checked : c'est que, lorsque le sous-menu est ouvert, avec checked, il le reste même s'il perd le focus. L'intérêt d'utiliser des cases à cocher, c'est précisément leur comportement binaire spécifique :true/false, et qui bascule en cliquant et re-cliquant sur le même élément ("toggle").
Dans la solution proposée par gc-nomade, le sous-menu ne se réduit pas lorsque l'on re-clique.

L'utilisation de ce principe n'est pas forcément limitée à des sous-menus, d'ailleurs. On peut imaginer des chapitres d'un texte, un tutoriel, par exemple, qui s'affichent lorsqu'on clique sur le titre. Lorsqu'il est "replié", on ne voit que le plan, et les textes peuvent s'afficher ou se réduire.

Le principe m'a paru simple lorsque j'ai vu la démo, mais je n'arrive pas à le refaire.

Pardon, j'ai dit :"la proposition de gc-nomade", je voulais parler de celle de Zelalsan. Au temps pour moi.

La solution de gc-nomade me plaît bien, mais elle pose le même problème que j'ai évoqué. Le système est suffisant pour réaliser des menus et sous-menus, parce que l'on n'a pas besoin de garder les sous-menus affichés lorsqu'on perd le focus, mais imaginons que l'on veuille afficher ou réduire un élément trop long. Un texte, qui pourrait être réduit aux titres de ses chapitres, ou une liste d'items dont on pourrait afficher la description ou la cacher. On aurait alors besoin que le texte reste affiché lorsqu'on perd le focus.
D'ailleurs, le système d'attribut binaire ("booléen") comme une case à cocher serait le seul à permettre l'affichage de plusieurs "sous-items" simultanément. En effet, avec des systèmes de focus, si l'on clique sur un autre, le premier perd le focus.

Je sais, je suis énervant...

Merci à tous pour vos contributions, je vais les étudier soigneusement. Certaines me paraissent très intéressantes. Cependant, je constate, dans ce que j'ai vu jusqu'à présent, que le problème évoqué dans mon précédent post subsiste.
Personne n'a une idée qui utiliserait des cases à cocher ? Je l'ai pourtant bien vu faire... ou était-ce un mirage ?
Oui, je sais je suis toujours aussi ch... avec mes exigences...
A bientôt !

En fait pour que le menu se replie lorsqu'on clique avec la solution que j'ai proposée, il faut passer par des checkbox et non des radios comme je l'ai fait. C'est relativement simple à faire, ce que j'ai donnée était un simple exemple pour savoir comment utiliser les sélecteurs et la manière dont pourrait être composer le code HTML.
Si je n'ai pas la flemme je le referai.
Par contre je reste sur ce que j'ai dit précédemment, ":focus" gère bien tout cela et c'est bien meilleur que cette astuce.

Comme je l'ai dit, je n'ai pas encore fini d'étudier les propositions, mais je crois que le lien que propose gc-nomade dans dabblet.com ("accordeon ouverture.fermeture... ), dans son deuxième exemple nommé "Accordeon CSS3 avec input et selecteur d'adjacence" devrait correspondre à ce que je cherche, si l'on remplace les boutons radio par des cases à cocher. Je vais l'analyser de plus près, et je vous tiens au courant.
En tout cas, merci encore à tous pour votre aide précieuse, vos efforts et votre savoir-faire.
A bientôt !

Bin comme c'était rapide, voilà en gros à quoi ça ressemble avec des checkbox. Faudrait encore passer par un ":focus" pour ne pouvoir sélectionner qu'un élément à la fois.

Bonjour à toutes et à tous.

Sujet très intéressant et une technique sur le input que je ne connaissais pas du tout !
J'ai quelques questions concernant l'exemple donnée par Zelalsan.

j'ai compris que l'on doit associer un label à un input pour que l'on puisse cliquer sur le texte et non sur la case à cocher qui dans cet exemple n'est pas visible. J'ai fait une recherche sous Google et j'ai compris que cette technique fonctionne aussi bien sur le bouton radio ou la case à cocher !

Ce qui me dérange, c'est le nombre important des "id" que l'on doit mettre dans ce menu, afin d'associer un label à un input. N'y a-t-il pas une autre solution pour simplifier cette écriture un peu lourde ?

D'où je suppose, de passer à une solution JavaScript !

@+
Modifié par tournikoti (28 Oct 2013 - 13:45)

Je crois que je peux marquer ce sujet comme résolu, j'ai réussi à faire quelque chose qui marche. Merci encore à tous pour votre collaboration ! Vos exemples et vos suggestions m'ont beaucoup servi.

A+

Zelalsan a écrit :
Bin comme c'était rapide, voilà en gros à quoi ça ressemble avec des checkbox. Faudrait encore passer par un ":focus" pour ne pouvoir sélectionner qu'un élément à la fois.

heu nan, si tu attribut la même valeur a l'attribut "name" sur un groupe d'input de type radio (comme dans mon exemple de dabblet) , le fait d'en sélectionner un, désélectionne l'autre.

tournikoti a écrit :

Ce qui me dérange, c'est le nombre important des "id" que l'on doit mettre dans ce menu, afin d'associer un label à un input. N'y a-t-il pas une autre solution pour simplifier cette écriture un peu lourde ?

Non , c'est comme cela que ça fonctionne, maintenant il faut voir du coté de "comment" tu genere ton HTML,
A la main ? okay, on ne distribue les couples label/input que là ou ceux-ci sont nécessaires.

Script coté serveur ou js a la volée ? on vérifie si il y a un ul enfant de li et on insère le couple label/input , sur une boucle l’incrémentation permet de générer un nouvel id et for à chaque passage.

Experimental: toggle avec ancre, :target (et :focus en doublure) http://codepen.io/gc-nomade/pen/uHkDg

gc-nomade a écrit :

heu nan, si tu attribut la même valeur a l'attribut "name" sur un groupe d'input de type radio (comme dans mon exemple de dabblet) , le fait d'en sélectionner un, désélectionne l'autre.

heuuu... c'est exactement ce qui est fait dans mon premier exemple

Bonjour à toutes et à tous.

Bien que ce ne soit pas mon sujet, je remercie gc-nomade et Zelalsan, pour la qualité de leur intervention ! J'ai en effet beaucoup appris sur l'usage du input radio (ou checkbox) dans un menu cliquable.

Je reprends les points que je considère comme cruciaux, pour la bonne conception de ce type de menu :

1) le <input type="radio"> sert de bascule entre deux états que peut prendre une subdivision du menu, soit la zone a été cliqué, soit elle ne l'a pas été.

2) l'astuce principale est d'associer à ce input qui n'est pas affiché à un texte encapsulé dans un label. Ce texte pour qu'il soit cliquable doit être associé au travers du label au input et de ce fait, nous devons utiliser le même identificateur.

3) autre astuce, concernant l'ouverture et la fermeture des subdivisions du menu, est de déclarer la même variable pour un même niveau. Si on met la même variable pour tous les niveaux, on aura l'inconvénient de voir le niveau 1 (ITEM) se ferme lorsqu'on clique sur le niveau 2 (SUB-ITEM).

Une question : quel est l'intérêt d'avoir un menu cliquable ?
Le menu classique CSS avec des hover fonctionnent tout aussi bien.
Je ne vois pas dans quel usage on peut se servir de cette fonctionnalité.

@+

Zelalsan a écrit :

heuuu... c'est exactement ce qui est fait dans mon premier exemple

oups, ben j'ai pas compris ce que tu voulais dire a propos de :focus alors

@tounikoti le menu cliquable , ou plutot , sa conception, prend tout son interet sur un media depourvue de souris , pour les mobile, il peut-être intéressant de coupler :valid a :checked en doublure et assurance.

Je crois bien que raphael a fait un article ou une demo sur ce sujet.

Merci gc-nomade. En effet, je n'avais pas pensé aux mobiles !
Modifié par tournikoti (30 Oct 2013 - 10:44)