Есть ли лучший способ структурировать это главное меню?

Question

Здесь находится Сайт . Если вы посмотрите под карту, вы увидите неупорядоченный список

.

вот 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>

вот мой 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;
}

Пока все в порядке, но я застрял, потому что мне нужно, чтобы пользователь мог нажимать на кнопку воспроизведения, и в данный момент она не активна, и мне также нужна кнопка воспроизведения, чтобы перейти к активной ссылке, по которой щелкают ... Например, я хочу переместить его из «Истории» в «Видео», если пользователь щелкает эту ссылку. Я думал об использовании add add class с помощью jquery, но я хотел получить эффект анимации ... любые идеи

Answer 1

@ Укротитель - Вы можете прикрепить обработчик кликов через jQuery к рассматриваемому li:

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

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

});

Также ... вы должны изменить свой CSS, чтобы пользователь знал, что кнопка воспроизведения активна, добавив атрибут курсора:

ul.play_naviation li.active {

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

}

Как переместить кнопку воспроизведения в зависимости от того, какая ссылка нажата, зависит от вас, но пример может быть:

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

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

});

Обратите внимание, что этот метод потребует от вас изменения CSS:

ul.play_navigation li.active

просто изменится на:

.active