Sous IE7 mon menu saccade

[sadkat]

Bonjour,
J'ai un menu horizontale en CSS, tout simple avec des listes.
Et pour que, lorsque je passe d'un sous menu à l'autre l'entrée de mon menu se colore j'utilise ce code ou la class survol ajoute un background :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() { 
    // Permet les jeux de couleur dans le menu
    $("#menu li").mouseover(
    function(){ 
        $("#menu li").removeClass("survol");
        $(this).addClass("survol")
    });
    $("#nav").mouseout(
    function(){ 
        $("#menu li").removeClass("survol");
    });
});

Et voici la liste :

Code :

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
<ul id="menu">
    <li id="menu_accueil"><a href="<?= $path ?>">A</a></li>
    <li id="menu_enseigne"><a href="<?= $path ?>franchise.html">Toutes les enseignes</a>
        <ul>
            <li><a href="<?= $path ?>franchise/nouveaux-concepts.html">Nouveaux concepts</a></li>
        </ul>
    </li>
    <li id="menu_actu"><a href="<?= $path ?>actualite.html">Actualité</a>
        <ul>
            <li><a href="<?= $path ?>actualite/breves.html">Les infos en direct</a></li>
            <li><a href="<?= $path ?>actualite/entretiens.html">Interviews de franchiseurs</a></li>
            <li><a href="<?= $path ?>actualite/secteurs.html">L’actu des secteurs</a></li>
            <li><a href="<?= $path ?>actualite/communiques.html">Communiques des enseignes</a></li>
        </ul>
    </li>
    <li id="menu_enquete"><a href="<?= $path ?>enquetes-exclusives.html">Enquêtes exclusives</a>
    <ul>
        <li><a href="<?= $path ?>enquetes/les-reseaux-en-chiffres-1.html">Les réseaux en chiffres</a></li>
        <li><a href="<?= $path ?>enquetes/combien-coute-la-franchise-2.html">Combien coûte la franchise ?</a></li>
        <li><a href="<?= $path ?>enquetes/aide-au-demarrage-3.html">Aide au démarrage</a></li>
        <li><a href="<?= $path ?>enquetes/animation-des-reseaux-4.html">Animation des réseaux</a></li>
        <li><a href="<?= $path ?>enquetes/combien-rapporte-la-franchise-5.html">Combien rapporte la franchise ?</a></li>
        <li><a href="<?= $path ?>enquetes/avez-vous-le-profil-6.html">Avez-vous le profil ?</a></li>
        <li><a href="<?= $path ?>enquetes/les-villes-ou-s-implanter-7.html">Les villes ou s’implanter</a></li>
    </ul>
    </li>
    <li id="menu_creer"><a href="<?= $path ?>guide/">Créer sa franchise</a>
        <ul>
            <li><a href="<?= $path ?>guide/">Devenir franchisé</a></li>
            <li><a href="<?= $path ?>guide/franchiseur/">Devenir franchiseur</a></li>
            <li><a href="<?= $path ?>conseils.html">Les conseils à suivre</a></li>
            <li><a href="<?= $path ?>">Franchise a l'international</a></li>
            <li><a href="<?= $path ?>opinions.html">L'avis des experts</a></li>
        </ul>
    </li>
    <li id="menu_local"><a href="<?= $path ?>financement-franchise.html">Local et financement</a><ul>
            <li><a href="<?= $path ?>financement-franchise.html">Trouver un financement</a></li>
            <li><a href="<?= $path ?>trouver-un-emplacement.html">Trouver un local</a></li>
            <li><a href="http://www.cession-commerce.com/vendeurs?from=franchise">Vendre votre affaire</a></li>
        </ul>
    </li>
</ul>

Mon problème c'est que sous IE7 à chaque fois que je passe d'une liste de mon sous menu à une autre il m’exécute le $("#menu li").mouseover( et donc retire la class survol puis la rajoute. Je me retrouve avec un stroboscope !

Comment éviter ça ?

J'aimerais juste que si je passe ma souris sur le sous menu "Les réseaux en chiffres" l'entrée "Enquêtes exclusives" se colore et le reste tant que je suis dans ce sous menu là.

Merci d'avance

[Bovino]

Code :

$("#menu > li")

[sadkat]

Bonjour,
Merci de me répondre, où mets tu ça ? Car moi peut importe où ça ne marche pas.

[Bovino]

Code :

1
2
3
$("#menu > li").hover(function(){
    $(this).toggleClass('survol');
});

[sadkat]

Alors, mon code donne ça maintenant :

Code :

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() { 
    // Permet les jeux de couleur dans le menu
$("#menu > li").hover(function(){
    $(this).toggleClass('survol');
});
    $("#nav").mouseout(
    function(){ 
        $("#menu li").removeClass("survol");
    });
});

Mais ça ne fait pas ce que je veux, quand je passe sur le lien dans le menu, le li se colore oui mais ensuite, une fois que je passe dans le sous menu là l'entrée initiale perd sa class survol.

[Bovino]

Code :

1
2
3
4
$("#nav").mouseout(
    function(){ 
        $("#menu li").removeClass("survol");
    });

il faut supprimer cette partie.

[sadkat]

Super !
Merci beaucoup

[sadkat]

J'ai un nouveau problème sur ce menu !

Je n'arrive pas à l'expliquer alors je vous montre :
http://www.franchise-magazine.com/dev/test.php

Posez votre souris sur actualité par exemple. Puis, laissez la là et actualisez votre page. Vous allez voir que le système de class s'inverse.

Et je n'arrive pas à éviter cela.

Please, help.

Edit : Et plus seulement sur IE.. c'est partout le cas.

[titmael]

Bonjour,

et si dans ton css tu mets un style à menu_actu (car il n'en a pas actuellement), ça résout le prob ?

[Bovino]

Mouais... c'est un peu vicieux ta façon de faire

Essaye comme ça si tu préfères :

Code :

1
2
3
4
5
$("#menu > li").hover(function(){
    $(this).addClass('survol');
}, function(){
    $(this).removeClass('survol');
});

[sadkat]

Heuuu je vois pas quel style mettre.

Et puis ça me semble être un problème JS...
Il inverse le toggle dès le chargement de la page puisque le pointeur est sur l'entrée du menu.

[sadkat]

Ca ne fonctionne pas mieux avec le code de Bovino....

Du coup je me demandais, on peu forcer le pointeur de la souris à se placer hors d'une div au rechargement d'une page ?