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é
)
Grâce à ce petit début de script
, 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
Modifié par dreadstock (17 Oct 2011 - 22:02)
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é

Grâce à ce petit début de script

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)