Show | Hide en full CSS

(reprise du message précédent)

gcyrillus a écrit :
Voici un menu qui fonctionne apparemment http://codepen.io/gcyrillus/pen/pyjrjP

En fait chez moi ce code ne fonctionne pas non plus...

Mais précisons : les liens adjacents fonctionnent - environ une fois sur deux - si je clique dessus alors que la transition n'est pas encore terminée (c'est aussi le cas pour mon accordéon), mais une fois la transition achevée ces liens sont bloqués.

J'ai fais des tests hors environnement CodePen et j'ai le même problème. Et à ce propos, j'ai moi aussi rencontré des problèmes avec ce site, mais plutôt liés à du cache non vidé après la MAJ d'un code.

@Olivier

je n'ai rencontré qu'un probleme avec IE, qui se solutionne en mettant l'element en position:relative; (ce qui le remet en avant plan).

ul ul {
  box-shadow: 0 0 0 2px;
  background: tomato;
  /* IE */
  float:none;
  position:relative;
}

Chrome, Opera, FF ne me font pas de misere .

La vielle version de safari pour windows a besoin d'un tabindex sur le lien pour emuler le :focus.

<a tabindex="0" href="#">level 1.1</a>

Je n'ai pas de Mac a dispo.

Merci pour ces retours
Modifié par gcyrillus (04 Mar 2016 - 23:06)

Raphael a écrit :

Je parle bien de l'astuce du pointer-events: none; on est d'accord ?

Au temps pour moi.

J'ai un peu suivi votre sujet et dès le départ, je pensé au souci d'un lien dans le bloc. Moi même j'étais tombé dans le panneau il y a quelque temps. J'ai remarqué qu'il vaille mieux cibler enfant que frère. Le contrôle est bien meilleur.

Bonjour à toutes et tous,

Un sujet qui déchaine les passions
Pour tout un tas de raison, et principalement que moi non plus, je n'ai pas très envie d'ajouter un élément de formulaire juste pour du style, j'ai tenté la solution de gcyrillus.

Par contre, j'ai un petit souci... Le contenu de mon div n'est pas du texte, mais un formulaire.
Et si je clique sur un champ du formulaire, le <div> se referme..

Une solution pour ce souci?

Grand merci pour l'astuce en tout cas, c'est très sympa

caema a écrit :

Par contre, j'ai un petit souci... Le contenu de mon div n'est pas du texte, mais un formulaire.
Et si je clique sur un champ du formulaire, le &lt;div&gt; se referme..

Tu as essayé l'astuce de gcyrillus, à savoir un position: relative sur le formulaire afin de lui conférer un contexte d'empilement ?

caema a écrit :
Bonjour à toutes et tous,

Un sujet qui déchaine les passions
Pour tout un tas de raison, et principalement que moi non plus, je n'ai pas très envie d'ajouter un élément de formulaire juste pour du style, j'ai tenté la solution de gcyrillus.

Par contre, j'ai un petit souci... Le contenu de mon div n'est pas du texte, mais un formulaire.
Et si je clique sur un champ du formulaire, le &lt;div&gt; se referme..

Une solution pour ce souci?

Grand merci pour l'astuce en tout cas, c'est très sympa

En cliquant sur le formulaire tu déplace le :focus, et donc , sur ce montage, tout se referme.
les autres methodes css seraient :target ou :checked avec un élément de formulaire.

exemple de comparaison de methode http://codepen.io/gcyrillus/pen/dsvwF (au lieu de pointer-events, c'est un élément positionné au dessus de l’élément lorsqu'il prend le focus pour qu'il le perde au prochain click ... bref, même résultat )
Modifié par gcyrillus (07 Mar 2016 - 17:06)