jQuery : Menu déroulant (accordéon)

Publié le par

Menu simple

1
2
3
4
5
<ul>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
</ul>
1
2
li {cursor:pointer;}
.actif {color: red}
1
2
3
4
$('li').click( function(){
    $(this).siblings().removeClass('actif');
    $(this).addClass('actif');    
})

Menu un peu plus élaborer avec une pseudo-classe :

1
2
3
4
5
6
7
8
9
10
11
<ul id="navigation">
    <li>
        <a href=""><h1>Titi</h1></a>
    </li>    
    <li>
        <a href=""><h1>Toto</h1></a>
    </li>    
    <li>
        <a href=""><h1>Tata</h1></a>
    </li>
</ul>
1
2
3
4
5
.selected {  background-color: rgba(233, 147, 26,0.5); }
li {
    border:solid;
    border-color:silver;
}
1
2
3
4
5
$('#navigation li a').click( function(e){
    e.preventDefault();
    $(this).closest('li').siblings().find('h1').removeClass('selected');
    $(this).find('h1').addClass('selected');    
})

Laisser un commentaire