Bonjour à vous,

j'ai un menu qui est censé apparaître sur chacun des articles.

Le menu apparaît bien mais j'ai quelques anomalies que je n'arrive pas à résoudre.

1) Le menu ne disparaît pas quand je scrolle. J'ai pu résoudre ce 1er point en ajoutant le code jQuery suivant :

    $(window).scroll(function () {
        $('.dropdown-content').removeClass('show');    
    });

2) Si j'ouvre un 1er menu en cliquant sur un article et que je clique sur les 3 petits d'un autre article, le 1er menu ouvert ne disparaît pas. Je dois automatiquement recliquer sur les 3 petits points pour que le menu disparaisse sélectionné disparaisse ou à côté pour que les 2 ou plusieurs menus ouverts disparaissent.

3) Si j'ouvre le menu d'un article, les 3 petits points de l'article qui suit ne sont pas cachés par l'affichage du menu de l'article qui le précède.
4) Finalement, lorsque je souhaite consulter le menu du dernier article, tout une partie du menu est caché car la page n'est pas assez grande que pour afficher le menu en entier. Je ne sais même pas scrollé pour voir la suite du menu.

Voici à quoi ressemble mon code :

https://codepen.io/anon/pen/MNEOOG

Merci à vous,

Passez une agréable journée
Thierry

Salut,

tu veut dire que le menu est censé changer en fonction de l'article ?

Salut.

Pour pallier aux 4 problèmes à la fois, il suffit de mettre en application ce que j'ai écris ici.

En effet, avec un menu unique, il n'y en a qu'un d'ouvert (résout les points 2 et 3), il est indépendant du défilement s'il est positionné avec "position: fixed;" en CSS (résout le point 4). Quant au point 1, pour masquer le menu, il suffira de tout décocher ou d'avoir un bouton "fermer le menu" sur le menu même.

As-tu besoin d'une démo ou est-ce bon ?

---

J'avais un peu de temps, alors voilà qui est fait : https://codepen.io/anon/pen/NQaBvj

Présentation :

Cette démonstration permet de faire apparaître un menu dès que l'on sélectionne des éléments, grâce à des cases à cocher personnalisées (ici elles sont moches, mais avec deux images SVG on peut faire quelque chose de très sympa). Quand on désélectionne toutes les cases cochées, le menu disparaît. On peut également cliquer sur "Tout désélectionner" dans le menu.

Explications :

Le code est en Javascript ES6. Le tableau "checked" permet de stocker l'identifiant des articles sélectionnés.

Reste à faire :

N'afficher "Éditer" dans le menu que lorsqu'un seul article est sélectionné et faire fonctionner les boutons éditer et supprimer.

-
Edité par Diatomée 3 août 2019 à 20:14:27

Bonjour thirt05,

Un autre exemple :

https://codepen.io/Zonecss/pen/Eqwbrz

Bonsoir AliasDmc,

je tenais à vous remercier pour votre aide.

Vous pouvez trouver ci-dessous une version qui fonctionne pour les différents points mentionnés dans ce sujet :

https://codepen.io/thirt/pen/jggBgb?editors=0010

J'ai juste un dernier souci à résoudre. En fait, quand je clique sur les 3 petits points, le menu s'affiche et les 3 petits points sont entourés d'un cercle bleu. Si je clique à côté de l'article, le menu disparaît ainsi que le cercle bleu autour des 3 petits points. Quand je scrolle, le menu disparaît mais pas les 3 petits points.

Merci d'avance

Bonne soirée
Thierry