Css column et menus accordion

Hello

p'tit problème

dans le contexte d'un "mega menu", j'ai plusieurs listes ul dans un conteneur qui est split en 3 colonnes via column-count pour donc répartir ces listes automatiquement.
Dans certaines listes j'ai des accordions pour un système de sous menu, et quand j'ouvre un accordion par exemple, j'ai des éléments qui bougent dans la colonne d'avant ou d'après, la répartition se refait en quelque sorte, et je n'arrive pas à contourner ce problème malgré ces quelques propriétés sur mes listes :

break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;

une idée ?

Bonsoir,

Tu peut éventuellement utiliser display:grid;, qui par défaut ne crée qu'une colone (mais prend gap et order par exemple). Ce formatage en grille empeche en principe l’élément de s'étaler dans plusieurs colonnes.

Si tu as un exemple, c'est mieux pour bien saisir ton problème

cdt
Modifié par gcyrillus (19 Nov 2024 - 20:47)

En fait via column-count cela permet de créer automatiquement des colonnes, je ne pense pas que grid puisse le faire, enfin pas en remplissant une colonne avant de passer à une autre ? En tout cas je ne souhaite pas choisir dans quelle colonne je met telle liste, je veux que ce soit dynamique
Modifié par Pedrothelion (20 Nov 2024 - 10:36)

J'ai fait un codepen ici

https://codepen.io/julien_sgn/pen/XWvLmBp

Pedrothelion a écrit :
J'ai fait un codepen ici

https://codepen.io/julien_sgn/pen/XWvLmBp

Bonjour,

Je crois comprendre,

ici ton break-inside:avoid-column fonctionne , l'accordéon ne s'ouvre pas au travers de plusieurs colonne, mais bien une seule. Cependant, le li conteneur peut changer de colonne car le contenu de .list s'allonge et est redistribué dans les colonnes. Je ne vois pas de solution pour eviter ce comportement normal autrement qu'en sortant les accordéons du flux (position:absolute) .

Comme tu utilise javascript, Pour Firefox, il serait possible de switcher sur un display:grid et grid-template-rows: masonry en redispatchant les éléments par colonnes. essai en grid masonry pour firefox : https://codepen.io/gc-nomade/pen/jOgjMzB?editors=1111

Mais voilà, webkit voit les choses autrement, ce serait un display:masonry indépendant de display:grid et n'a encore rien mis en place dans les navigateurs il me semble. Un possible CSS masonry n'est pour le moment incertain.

En final, je dirais qu'il n'y aurais que javascript pour faire 3 listes https://codepen.io/gc-nomade/pen/oNKrWNK?editors=1111 et le plus simple serait de faire le script coté serveur pour ne pas avoir de sursaut de page au chargement et 3 liste dans container lui même en colonne CSS.

En gros, a part FF qui aurait une soluce en CSS+JS , je ne vois personnellement pas de soluce, à part te donner quelques idées .

Cdt
Modifié par gcyrillus (20 Nov 2024 - 19:32)