Affichage / Masquage du menu ...

Bonjour à tous,

au départ, dans ma page d'origine, j'ai la possibilité de cliquer sur les 3 petits points pour afficher le menu.

Si j'ajoute un article dynamiquement en cliquant sur le bouton "Ajout article" dans le header, je n'ai plus la possibilité d'afficher le menu.

1) Trouvez-vous que c'est une bonne méthode pour afficher le menu quand on clique sur les petits avec ce code javascript ?
2) Existe-t-il une autre méthode qui me permettrait d'afficher ce menu plus facilement ? En fait, ce menu doit s'afficher sur chaque article comme vous l'aviez certainement deviné.

Voici une copie du code à l'heure actuelle :

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

Menu pour votre aide.

Passez une agréable journée
Thierry
Modifié par THIRT05 (04 Aug 2019 - 11:14)

Salut

Les trois petits points sont intuitifs (pour moi) et indique des fonctionnalités plus détaillés sur une partie du site, en occurrence un article.


Pour les menus qui se fonctionne pas par article après l'ajout de celui ci, c'est normal car tu dis :

Array.from(document.querySelectorAll('.container .dropbtn')).forEach(($button)=>{
            $button.addEventListener('click', (e)=>{

Ce qui en gros dit "Au chargement du site, ajouter moi un event sur le click de ce boutton"

Donc au chargement du site les nouveaux/futures articles n'existent pas encore.
Donc pas d’événement pour eux. logique. il faut revoir ton algo.

Tu parles d'ajax, mais je ne vois pas d'ajax

Bonjour Jencal,

j'ai trouvé une solution plus simple en javascript pour afficher ce menu.

Cependant, j'ai quelques soucis par rapport à ce menu.

J'ai donc 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

Bonjour THIRT05
Un exemple sans jquery à toi d'adapter :
https://codepen.io/Zonecss/pen/Eqwbrz

Bonjour aliasdmc,

je tenais à vous remercier pour votre aide et votre disponibilité.

Bonne soirée à vous,
Thierry