11548 sujets

JavaScript, DOM et API Web HTML5

Menu déroulant, quand l'un s'ouvre l'autre se ferme

Bonjour,

Je suis en train de créer un menu de 3 onglets déroulant.
Mon niveau en JS est quasi nul.

J'ai tenté de faire quelque chose avec le peu de connaissances que j'ai, mais je bloque pour faire un truc un peu plus avancé. (ne vous moqué pas de mon code, il est a mon avis pas trop optimisé Smiley cligne )

Grâce à ce petit début de script Smiley cligne , je peux ouvrir un menu déroulant avec un petit effet toggle, en cliquant sur le lien de mon onglet. Ce que je souhaiterais faire maintenant, mais qui est au dessus de mes compétences, c'est quand je clique sur un autre onglet, pour faire défiler le menu déroulant, c'est que l'autre onglet qui était ouvert se ferme et ainsi de suite. Pas facile pour un newbie comme moi !

Voici mon code ! merci beaucoup pour votre aide 


<script type="text/javascript">
$(document).ready(function () {
    $("#menu-item-20 ul.sub-menu").hide();   
    $("ul.topnav li#menu-item-20").click(function () {
    $('#menu-item-20 ul.sub-menu').slideToggle('medium');    });
    $('#menu-item-20 ul.sub-menu li').mouseover(function () {
    $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('#menu-item-20 ul.sub-menu li').mouseout(function () {
    $(this).animate({ fontSize: "1em"}, 150 );
    });
    $("#menu-item-20 ul.sub-menu").hide();   
    $("ul.topnav li#menu-item-21").click(function () {
    $('#menu-item-21 ul.sub-menu').slideToggle('medium');    });
    $('#menu-item-21 ul.sub-menu li').mouseover(function () {
    $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('#menu-item-21 ul.sub-menu li').mouseout(function () {
    $(this).animate({ fontSize: "1em"}, 150 );
    });
    $("#menu-item-20 ul.sub-menu").hide();   
    $("ul.topnav li#menu-item-22").click(function () {
    $('#menu-item-22 ul.sub-menu').slideToggle('medium');    });
    $('#menu-item-22 ul.sub-menu li').mouseover(function () {
    $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('#menu-item-22 ul.sub-menu li').mouseout(function () {
    $(this).animate({ fontSize: "1em"}, 150 );
    });
});
</script>

Modifié par dreadstock (17 Oct 2011 - 22:02)
Au final, j'ai laissé tombé la méthode "CLick" pour faire un mouseover, ce sera plus simple quoique !

J'ai fait ca, mais là encore, je suis confronté à un soucis. Quand ma souris va sur ul.topnav li a , le sub-menu apparait bien, mais quand je vais sur le premier lien du submenu et donc que je sors de la zone du ul.topnav li a , le sub-menu disparait. AÏ AÏ AÏ c'est galère. Merci pour vos conseils ! 

$(document).ready(function () {
    
 $("#menu-item-20 ul.sub-menu").hide();   
    $("ul.topnav li a").mouseover(function () {
         $(this).stop().animate({queue:false, duration:600, easing: 'easeOutBounce'})
    $('#menu-item-20 ul.sub-menu').slideToggle('medium');    });
    $('#menu-item-20 ul.sub-menu li').mouseover(function () {
    $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('#menu-item-20 ul.sub-menu li').mouseout(function () {
    $(this).animate({ fontSize: "1em"}, 150 );
    });
    
});
J'ai réussi à pas mal avancer. Mon menu se déroule et je peux cliquer sur l'un des li du menu déroulant, maintenant, mon seul problème est que le menu ne se referme pas quand j'enlève la souris de la zone. Pour remonter le menu, il faut que je sorte ma souris et la zone et que je la ramène que la zone.
Je pense que mon onmouselease est mal placé.
Pourriez vous m'aider ?


$(document).ready(function () {
 
 $("#menu-item-20 ul.sub-menu").hide();   
    $("ul.topnav li#menu-item-20").mouseenter(function () {
    $('#menu-item-20 ul.sub-menu').slideToggle('medium');    });
 
    $('#menu-item-20 ul.sub-menu li').mouseover(function () {
    $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('#menu-item-20 ul.sub-menu li').mouseout(function () {
    $(this).animate({ fontSize: "1em"}, 150 );
    });
    $("ul.topnav li#menu-item-20").mouseleave(function () {
               });
});


Merci
Sujet clos
Aller à