Menu actif sur un élement caché

**Jarod51** · 29/04/2014, 20h20

Bonjour à tous,
Ca fait un gros moment que je m'arrache les cheveux sur ce problème et je me permets de poster le forum dans l'espoir d'avoir de l'aide. J'ai une site WEB qui se présente sous la forme d'un slider horizontal avec un menu fixe. Dans ce menu, j'ai des items qui sont cachés et qui correspondent à la continuité de l'élément -1 de l'item menu. Mon problème, c'est que quand je suis sur l'item caché je voudrais que l'élément parent reste highlighter.
Par exemple, j'ai l'item home puis l'item home2 qui est caché. Home2 est la continuité de home. J'ai essayé de coder un truc mais ça me donne rien. J'ai également un fiddle pour mieux comprendre : http://jsfiddle.net/jarod51/WXm55/

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="cssmenu">
<ul id="list">
    <li id="item1"><a href="#home">Home</a></li>
    <li id="item2" class="hide"><a href="#home2"></a></li>
    <li id="item3"><a href="#newsletter">Newsletter</a></li>
    <li id="item4"><a href="#directions">Directions</a></li>
    <li id="item5"><a href="#directions2">Directions2</a></li>
    <li id="item6"><a href="#contact">Contact us</a></li>
    <li id="item7"><a href="#actor">actor</a></li>
    <li id="item8" class="hide"><a href="#actor2"></a></li>
    <li id="item9" class="hide"><a href="#actor3"></a></li>
    <li id="item10"><a href="#market">market</a></li>
    <li id="item11" class="hide"><a href="#market2"></a></li>
    <li id="item12" class="hide"><a href="#market3"></a></li>
    <li id="item13"><a href="#calendar">calendar</a></li>

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
$(function(){
if( $("#item2").hasClass('active' ))
{
  $("item1").addClass('active2');
}
if ( $('#item2').hasClass('') && $('item1').hasClass('active2' )) {
$('#item1').removeClass('active2');
}
 
 
    if($("item8").hasClass('active'))
    {
        $("item7").addClass('active2');
    }
if ( $('#item8').hasClass('') && $('item7').hasClass('active2' ) && $('item9').hasClass('') {
$('#item7').removeClass('active2');
}
 
});
 
$(function () {
        var 
            animation = function ( href ) {
                var 
                    name = "active",
                    element = $( "a[href='" + href + "']" );
 
                $( "html, body" ).stop().animate( {
                    scrollLeft: $( href ).offset().left
                }, 1200 );
 
                element.closest( "ul" ).find( "li" ).removeClass( name );
                element.parent().addClass( name );
            },
            menu = $( "#list" );
 
        animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
 
        $( "#cssmenu a" ).bind( "click", function( event ) {
            var target = $( this ).attr("href");
 
            animation( target );
 
            event.preventDefault();
        } );
 
        $( "#next, #prev" ).click( function ( event ) {
            var
                positionActiveClass = menu.find( "> li.active" ).index(),
                menuLength = menu.find( "> li" ).length - 1,
                buttonId = $( this ).attr( "id" );
 
            if ( buttonId === "next" ) {
                if ( positionActiveClass === ( menuLength ) ) {
                    newElementActiveClass = menu.find( "li" ).eq( 0 );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
                    animation( newPositionActiveClass );
                } else {
                    newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
                    animation( newPositionActiveClass );
                }
            } else {
                if ( positionActiveClass === 0 ) {
                    newElementActiveClass = menu.find( "li" ).eq( menuLength );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
                    animation( newPositionActiveClass );
                } else {
                    newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
                    animation( newPositionActiveClass );
                }
            }
 
            event.preventDefault();
        } );
 
    } );

**NoSmoking** · 29/04/2014, 20h50

Bonjour,
et la solution de la.lune ne te convient pas ? voir http://www.developpez.net/forums/d14...ant-precedent/.

Au passage il aurait été tout à fait courtois de lui faire réponse

.