Как перемещаться по клавиатуре через элемент <ul> <li>

Возможный дубликат:
Навигация по клавиатуре для меню с помощью jquery

Я создал меню, используя теги <ul> <li> и показывая его пользователю, когда он нажимает клавишу Enter в текстовом поле. Он может выбирать элементы меню (перемещаться по меню) с помощью мыши, но я хочу также позволить ему выбирать элементы из этого меню, используя кнопки вверх/вниз на клавиатуре, например.

Можно ли это сделать с помощью jQuery или CSS?

Мое меню имеет следующую структуру:

<div class="services">
  <div class="items">
    <ul>                           
        <li class="mail-icon"><a href="#" id="mail"><?php echo $langmsg['mail']; ?></a></li>
        <li class="forum-icon"><a href="#" id="forum"><?php echo $langmsg['forum']; ?></a></li>
        <li class="chat-icon"><a href="#" id="chat"><?php echo $langmsg['chat']; ?></a></li>
    </ul>
  </div>
</div>

Примечание: элемент <li> также имеет фоновое изображение.

Ответ 1

Работа jsFiddle

Вот как обрабатывать круговой выбор:

if (e.keyCode == 38) { // up
    var selected = $(".selected");
    $(".services li").removeClass("selected");

    // if there is no element before the selected one, we select the last one
    if (selected.prev().length == 0) {
        selected.siblings().last().addClass("selected");
    } else { // otherwise we just select the next one
        selected.prev().addClass("selected");
    }
}

CSS

.services li.selected {
    background-color: grey;   
}

Ответ 2

Это уже возможно, только с HTML, с клавишей "tab", затем клавишей "Enter". Вы можете удвоить свой стиль CSS a:hover с помощью a:focus, который выделит эту возможность =)