Правильный способ показать падение фокуса с помощью CSS

81
8

Я пытаюсь сделать меню с клавиатурой доступным, но я не могу понять, как заставить его показать снимок фокуса.


У меня


.main-menu li:hover ul,
.main-menu li:focus ul {
display: block;
}

Проблема заключается в том, что когда он фокусирует свое внимание на a, который вложен в li и не показывает ul. Tabbing фокусируется на тегах.


Вот мой полный код: http://jsfiddle.net/bxpe4/

спросил(а) 2013-09-19T22:51:00+04:00 7 лет, 1 месяц назад
1
Решение
81

При табуляции вы фокусируете anchor внутри .main-menu li, а не list-item.


Существует два способа обхода:


a) с помощью селектора +


.main-menu li a:focus + ul {
display: block;
}

Тем не менее, это создает проблему для вкладок в другие привязки (при нажатии табуляции он должен перейти к первому якорю в подменю, но он не отображается, поэтому ничего не происходит).


b) с использованием свойства tabindex


Для этого вам нужно установить tabindex на якоря меню на отрицательное значение (удалить их из табуляции) и установить табуляцию в элементы списка.

см. Использование демонстрации tabindex


Вам нужно будет изменить стиль анкеров и элементов списка, чтобы отобразить красный фон, добавив новый селектор:


.main-menu li a:hover,
.main-menu li a:focus,
.main-menu li.dropped > a,
.main-menu li:focus > a /* this one was added */ {
/* your styles */
}

Это, однако, не очень хорошая практика, поскольку сосредоточенные элементы списка означают, что вы не можете получить доступ к якорю с помощью клавиатуры. Вы можете использовать JavaScript для имитации события (привязать нажатие кнопки списка к клику на якоре), в jQuery это будет примерно так:


$('li[tabindex]').on('keypress', function() {
$(this).find('a').click();
});

см. Использование tabindex с демонстрацией моделирования событий


Это не проблема, если у якорей верхнего уровня нет никаких действий (они используются только для выпадающих пурпунов), и в этом случае они вам вообще не нужны.

ответил(а) 2013-09-19T22:56:00+04:00 7 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема