Question

Here is the Site if you look below the map you will see the unordered list

here is the 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>

here is my 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;
}

I looks ok so far but I am stuck because I need the user to be able to click on the play button and currently its a li and not clickable and I also need the play button to move to the active clicked link…So for example i want to move it from “The Story” over to “The Video” if the user clicks that link.. I was thinking of using add remove class via jquery but i wanted some animation effect…any ideas

Answer 1

@Tamer – You can attach a click handler via jQuery to the li in question:

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

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

});

Also … you should modify your CSS to let the user know the play button is clickable by adding the cursor attribute:

ul.play_naviation li.active {

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

}

How to move the play button based upon what link is clicked is up to you, but an example could be:

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

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

});

Note that this method would require you to modify your CSS:

ul.play_navigation li.active

would simply change to:

.active