Как сделать навигацию по меню с помощью клавиш?

Question

[Ilya Bobkov]

Всем привет! Есть меню:

<ul>
 <li>пункт 1</li>
 <li>пункт 2</li>
 <li>пункт 3</li>
 <li>пункт 4</li>
</ul>

Есть стили:

li
{
 cursor:pointer;
 font-size:126%;
 text-align:left;
 width:99%;
 border-radius: 5px;
 padding:2%;
 margin:2%;
 border: 1px solid rgb(200,200,250);
}
li:hover
{
 background: rgb(100,200,150);
}

Как теперь сделать навигацию по этому меню с помощью клавиш вверх-вниз на jquery?

Answer 1

[Денис Инешин]

Примерно так: jsfiddle.net/IonDen/0hk6bhms

var $menu = $('.menu'),
    $items = $menu.find('li'),
    num = $items.length,
    current = -1;

$(document).on('keyup', function (e) {
    var key = e.which;
    
    switch (key) {
        case 38:
            current--;
            if (current < 0) {
                current = num - 1;
            }
            
            break;
            
        case 40:
            current++;
            if (current > num - 1) {
                current = 0;
            }
            
            break;
    };
    
    $items.eq(current).addClass('active').siblings().removeClass('active');
});

Comments

[Ilya Bobkov]

а разве нельзя hover задействовать, который уже есть в стилях и работает при наведении?

[Денис Инешин]

Илья Бобков: нельзя

[Денис Инешин]

Илья Бобков: в любом случае навигация без какого-то класса active не имеет смысла. Этот класс - по сути фокус на элементе, дает нам возможность как то использовать его дальше. А просто ховер ничего не дает.
Тут скорее вам нужно убрать этот ховер из CSS и тоже перенести в JS навешивание класса active при ховере.

Answer 2

[Дмитрий Ковальский]

1) Ловить события keyPress, keyUp и уточнить во время разработки коды нужных вам клавиш
2) Чуток разобраться - а часто ли будет использоваться сия функциональность, учитывая что рядовой пользователь при нажатии этих кнопок(если вобще их использует) ожидает легкого скролирования.

Comments

[Ilya Bobkov]

для себя нужно