Menu actif sur un élement caché
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:
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:
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();
} );
} ); |
