Y a-t-il une meilleure façon de structurer ce menu?

Question

Voici le Site si vous regardez ci-dessous la carte, vous verrez la liste non ordonnée

Voici le code html

<ul class="play_navigation"> 
    <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> 
    <li><a href="#" class="barino_video_bottom">The Video</a></li> 
    <li><a href="#" class="barino_gallery_bottom">The Gallery</a></li> 
    <li><a href="#" class="barino_equipment_bottom">The Equipment</a></li>       
</ul> 

ici est mon CSS

ul.play_navigation { 
    list-style:none; 
    padding:0; 
} 

ul.play_navigation li { 
    display: inline; 
} 

ul.play_navigation li a { 
    color: #00506B; 
    font-family: Helvetica,sans-serif; 
    font-weight: bold; 
    padding-right: 34px; 
    text-decoration:none; 
    margin-left: 18px; 
} 

ul.play_navigation li.active { 
    background:url(images/play-button.png) no-repeat left; 
} 

Je regarde ok jusqu'à présent, mais Je suis bloqué parce que j'ai besoin que l'utilisateur puisse cliquer sur le bouton de lecture et actuellement c'est un li et non cliquable et j'ai aussi besoin du bouton de lecture pour passer au lien cliqué actif ... Donc par exemple je veux le déplacer de "The Story" ove r « La vidéo » si l'utilisateur clique sur ce lien .. Je pensais à l'aide d'ajouter la classe remove via jquery, mais je voulais un effet d'animation ... toutes les idées

Answer 1

@Tamer - Vous pouvez joindre un gestionnaire de clic via jQuery à la li en question:

$("li.active").click(function(){ 

    // actions you want to do when you click play go here 

});

aussi ... vous devez modifier votre CSS pour l'utilisateur que le bouton de lecture est cliquable en ajoutant l'attribut du curseur:

ul.play_naviation li.active { 

    background:url(images/play-button.png) no-repeat left; 
    cursor: pointer; 

}

Comment déplacer le jeu Le bouton basé sur le lien sélectionné dépend de vous, mais un exemple pourrait être:

$("ul.play_navigation > a").click(function(){ 

    $("li.active").removeClass("active"); 
    $(this).parent().addClass("active"); 

});

Notez que cette méthode vous obliger à modifier votre CSS:

ul.play_navigation li.active

serait tout simplement passer à:

.active