Discussion :

[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 :

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

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 :

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
<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 :

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

$("#menu > li")

[sadkat]

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

[Bovino]

Code :

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

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

[sadkat]

Alors, mon code donne ça maintenant :

Code :

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

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 :

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

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

il faut supprimer cette partie.