Menu qui se ferme quand on clique n'importe où

[soul.eater]

Bonjour,

J'ai remarqué le sujet sur le menu déroulant pour la toolbar (https://forum.forumactif.com/t361913-menu-deroulant) et trouvant l'idée géniale je me suis empressé de le mettre en place pour mon forum (pour l'instant sur un forum de test http://bwaah.forumactif.org/forum).

Jusqu'ici tout va bien mais le soucis est qu'il est obligatoire de recliquer sur le menu pour le fermer et je souhaiterai qu'il se referme également lorsque l'on clique sur un autre élément de la toolbar (ou de la page).

Après de longues heures de recherches cette nuit je n'ai rien trouvé de probant, j'ai testé des parcelles de codes mais étant assez néophyte en la matière il n'y a rien qui a fonctionné.

Je remet le code Javascript ici :

Code:

jQuery(window).load(function() {
if (_userdata["session_logged_in"] == '1') {
jQuery('#fa_search').prepend('<a id="fa_profil" href="#" onclick="return false;" style="margin-top:4px; font-size:14px;">Menu Principal</a><div id="hmenu" style="position:fixed;"onclick="return false;"><a href="/c5-la-loi-c-est-nous-et-c-est-ici">La Loi c\'est nous et c\'est ici</a><br/><a href="/c2-faisons-connaissance">Faisons connaissance</a><br/><a href="/c1-ici-c-est-chez-les-admins" style="color:#F00808">Ici c\'est chez les admins</a><br/><a href="/c10-conseil-des-sages" style="color:#FF5100">Conseil des Sages</a><br/><a href="/c3-espace-detente">Espace d\étente</a><br/><a href="/c11-espace-d-informations">Espace d\'informations</a><br/><a href="/c8-vos-statistiques">Vos statistiques</a><br/><a href="/c14-espace-autres-jeux">Espace autres jeux</a><br/><a href="/c7-la-boite-a-idees">La boite a id\ées</a><br/><a href="/c9-ici-on-s-entraide">Ici on s\'entraide</a><br/><a href="/c4-tu-es-un-peu-perdu-tu-ne-sais-pas-ou-poster-cette-section-est-pour-toi">Tu ne sais pas ou poster ?</a><br/><a href="/c13-sites-et-forums-de-nos-amis-gamers">Sites et Forums de nos amis gamers</a><br/></div>');
jQuery('#hmenu').hide();
jQuery('#fa_profil').click(function() { jQuery('#hmenu').toggle().offset(jQuery(this).offset()); });
}
});

Merci d'avance pour votre aide, Cordialement,

Jonas

[Invité]

Salut soul.eater ,

il suffit d'ajouter en dessous de ton script celui-ci:

Code:


$(function(){
$('#wrap').click(function() {
$('#quinfo').hide("500");
});
});


Ton script complet:

Code:


        jQuery(window).load(function() {
        if (_userdata["session_logged_in"] == '1') {
        jQuery('#fa_search').prepend('<a id="fa_profil" href="#" onclick="return false;" style="margin-top:4px; font-size:14px;">Menu Principal</a><div id="hmenu" style="position:fixed;"onclick="return false;"><a href="/c5-la-loi-c-est-nous-et-c-est-ici">La Loi c\'est nous et c\'est ici</a><br/><a href="/c2-faisons-connaissance">Faisons connaissance</a><br/><a href="/c1-ici-c-est-chez-les-admins" style="color:#F00808">Ici c\'est chez les admins</a><br/><a href="/c10-conseil-des-sages" style="color:#FF5100">Conseil des Sages</a><br/><a href="/c3-espace-detente">Espace d\étente</a><br/><a href="/c11-espace-d-informations">Espace d\'informations</a><br/><a href="/c8-vos-statistiques">Vos statistiques</a><br/><a href="/c14-espace-autres-jeux">Espace autres jeux</a><br/><a href="/c7-la-boite-a-idees">La boite a id\ées</a><br/><a href="/c9-ici-on-s-entraide">Ici on s\'entraide</a><br/><a href="/c4-tu-es-un-peu-perdu-tu-ne-sais-pas-ou-poster-cette-section-est-pour-toi">Tu ne sais pas ou poster ?</a><br/><a href="/c13-sites-et-forums-de-nos-amis-gamers">Sites et Forums de nos amis gamers</a><br/></div>');
        jQuery('#hmenu').hide();
        jQuery('#fa_profil').click(function() { jQuery('#hmenu').toggle().offset(jQuery(this).offset()); });
        }
        });
$(function(){
$('#wrap').click(function() {
$('#quinfo').hide("500");
});
});


a++

[soul.eater]

Bonjour Milouze,

Tout d'abord je vous remercie énormement pour le retour d'aide que vous apportez à mon sujet.

Si j'ai tout bien compris, je dois modifier les éléments ('#wrap') et ('#quinfo') en correspondance avec mon code et ce que je souhaite.

J'ai donc mis ce code à la suite de mon javascript :

Code:

$(function(){
$('#fa_menu').click(function() {
$('#hmenu').hide("500");
});
});

Donc en cas de clique sur #fa_menu (le "Bienvenue ..." de la toolbar) celui-ci doit masquer le #hmenu (l'appelation du div de mon menu) mais malheuresement ça ne fonctionne pas.  

Cordialement,

Jonas

[Ea]

Bonjour,


Je pense qu'il faut laisser le #wrap plutôt que le remplacer par #fa_menu

Cordialement.

[soul.eater]

Bonjour Ea,

Merci beaucoup pour votre aide sur mon sujet, je viens de tenter en laissant le #wrap et ça fonctionne bien lors du clique sur la zone principale de la page (en dessous de la bannière).   

Je vais paraître peut être un peu chiant mais y a-t-il un moyen pour que la fonction masque le menu lors d'un clique sur un autre élément de la toolbar ?   

Si c'est pas possible ou trop compliqué n'hésitez pas à me le dire (je placerai alors le sujet en résolu), c'est déjà fonctionnel actuellement et je vous remercie énormement pour l'aide que vous m'avez apporté avec Milouze.

Cordialement,

Jonas

[Ea]

Peut-être remplacer le code de milouze par :

Code:

var ignore_click = false;
$(function() {
  $("#hmenu,#fa_profil").on("click", function() {
    ignore_click = true;
  });
  $("#wrap").on("click", function(e) {
    ignore_click || ($("#hmenu").hide("500"), ignore_click = false);
  });
});

[soul.eater]

Re Bonjour Ea,

Même résultat qu'avec le code de Milouze, ça fonctionne mais uniquement sur la zone principal du forum (en dessous de la bannière).  

Cordialement,

Jonas

[Ea]

Alors avec :

Code:

var ignore_click = false;
$(function() {
  $("#hmenu,#fa_profil").on("click", function() {
    ignore_click = true;
  });
  $(document).on("click", function(e) {
    ignore_click || $("#hmenu").hide("500");
    ignore_click = false;
  });
});

sinon la bannière semblant être en flash, la page n'est pas au courant des clics fait dessus.

[soul.eater]

Bonjour Ea,

Le nouveau code provoque une ouverture/fermeture lors d'un seul clique sur le bouton de menu.

Effectivement la bannière actuelle de mon forum est en flash, je viens de faire du coup un essai sur mon forum de test et l'ancien code fonctionne bien même sur la zone de banniére (sauf sur la toolbar).

J'estime que vous en avez déjà fait bien assez pour ma demande et c'est fonctionnelle ainsi alors je place le sujet en résolu pour ne pas abuser de votre gentillesse.

Encore un grand merci à vous et à Milouze pour votre aide apporté à mon sujet.   

Cordialement,

Jonas