Discussion :

[rems033]

Salut à tous,

Je suis entraine de découvrir ce fameux framework qu'est jquery.

J'ai donc monté un menu principal LavLamp sous Jquery : http://www.gmarwaha.com/blog/?p=7

Le menu fonctionne nickel.

J'ai ajouté un menu vertical de section dans lequel je fais appel au fonction hide et show de jquey lorsque l'utilisateur clique sur le lien (Section "Métier" et "Réglementation" et sous-section "CCPCT" et toutes sur mon site).

J'ai voulu greffer un 3ème effet qui est au survol des items de sous-menus vertical un fadeout et fadein...mais la, les choses se compliquent car je n'ai plus mon animation active sur le menu principal.
Par contre, les effets des sous-menus sont nickels

Lien de mon site fonctionnel : http://www.licence-taxi.fr/new_versi...=petite_remise

Lien de mon site non-fonctionnel : http://www.licence-taxi.fr/new_versi...=petite_remise

J'avoue être un parfait newbie du Javascript pour le moment et je me contente de comprendre le code fournit sur les sites pour les réadapter à ma sauce...

Voici mes déclarations de Header et de fonctions javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<script type="text/javascript" src="scripts/js/dialog_box.js"></script>
<script type="text/javascript" src="scripts/js/cmxform.js"></script>
<script type="text/javascript" src="scripts/js/swfobject.js"></script>
<script type="text/javascript" src="scripts/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="scripts/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="scripts/js/jquery.lavalamp.min.js"></script>
 
<script>
  $(document).ready(function(){
 
 
    $(".hide_metier").click(function () {
      $("ul.menu_nav").slideToggle("normal");
    });
 
    $(".hide_regl1").click(function () {
      $("ul.menu_nav1").slideToggle("normal");
      $("ul.menu_nav2").hide("normal");
      $("ul.menu_nav3").hide("normal");
    });
 
    $(".hide_regl2").click(function () {
      $("ul.menu_nav2").slideToggle("normal");
      $("ul.menu_nav1").hide("normal");
      $("ul.menu_nav3").hide("normal");
    });
 
    $(".hide_regl3").click(function () {
      $("ul.menu_nav3").slideToggle("normal");
      $("ul.menu_nav2").hide("normal");
      $("ul.menu_nav1").hide("normal");
    });
 
    $("a.submenu").hover(function() {
      $(this).fadeOut(200);
      $(this).fadeIn(200);
    });
 
 
  });
 
  <?php
  if($_GET['mode']=="conditions_ccpct" || $_GET['mode']=="dossier_ccpct" || $_GET['mode']=="dates_ccpct" || $_GET['mode']=="epreuves_ccpct" ||$_GET['mode']=="decret_ccpct")
  {
  ?>
      $(window).load(function () {
          $("ul.menu_nav").show();
      });
  <?php
  }
  else
  {
  ?>
       $(window).load(function () {
          $("ul.menu_nav").hide();
      });
  <?php
  }
  ?>
 
  <?php
  if($_GET['mode']=="petite_remise" || $_GET['mode']=="grande_remise" || $_GET['mode']=="taxi" || $_GET['mode']=="loti" || $_GET['mode']=="vsl")
  {
  ?>
      $(window).load(function () {
          $("ul.menu_nav1").show();
      });
  <?php
  }
  else
  {
  ?>
       $(window).load(function () {
          $("ul.menu_nav1").hide();
      });
  <?php
  }
  ?>
 
  <?php
  if($_GET['mode']=="fondamentaux" || $_GET['mode']=="organisation" || $_GET['mode']=="exploitation")
  {
  ?>
      $(window).load(function () {
          $("ul.menu_nav2").show();
      });
  <?php
  }
  else
  {
  ?>
       $(window).load(function () {
          $("ul.menu_nav2").hide();
      });
  <?php
  }
  ?>
 
  <?php
  if($_GET['mode']=="regles_tarifs" || $_GET['mode']=="recherche_tarifs")
  {
  ?>
      $(window).load(function () {
          $("ul.menu_nav3").show();
      });
  <?php
  }
  else
  {
  ?>
       $(window).load(function () {
          $("ul.menu_nav3").hide();
      });
  <?php
  }
  ?>
 
</script>
 
<script type="text/javascript">
    $(function() {
        $("#menu").lavaLamp({
            fx: "backout",
            speed: 700,
            click: function(event, menuItem) {
                return true;
            }
        });
    });
</script>
 
 
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("flash/menu.swf", "flashcontent", "240", "400", "8.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
 
</head>

Je vous remercie d'avance de l'aide que vous pourrez m'apporter car je sèche complet pour le moment !

[rems033]

Problème résolu tout seul comme un grand.
En fait, le problème vient du fait que certaines fonctions jQuery interopère avec celles de mon menu principal (hover par exemple)

J'ai donc remplacé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$("a.submenu").hover(function() {
      $(this).fadeOut(200);
      $(this).fadeIn(200);
    });

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$("a.submenu").mouseover(function() {
      $(this).fadeOut(200);
      $(this).fadeIn(200);
    });

Merci quand même...

Au passage, il serait sympa de savoir par l'intermédiaire d'un petit sondage les frameworks javascript les plus utilisées (rico, scriptaculous, jQuery, Mootools, YahooUI, etc...)

A plus