CSS-меню, дружественное к клавиатуре - PullRequest
Новая
       24

CSS-меню, дружественное к клавиатуре

2 голосов
/ 04 февраля 2011

Мой вопрос является продолжением этого вопроса

Веб-выпадающие меню, доступные с клавиатуры?

В то время как вышеупомянутые вопросы говорят, что

Мы разобрались, как показать меню с сочетанием клавиш, но я не уверен, как выбрать одну из записей

Я выяснил, как выбирать отдельные пункты меню, используя клавиши доступа (и подчеркивая клавишу key ), но я не знаю, как вызвать меню при нажатии клавиши.

Это меню только для XHTML / CSS, XHTML: 

<ul>
    <li>Menu 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

Ответы [ 2 ]

5 голосов
/ 04 февраля 2011

Вы не можете.

Использование accesskey либо активирует, либо фокусирует ссылку (в зависимости от браузера).

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

ul#mainMenu > li > a:focus + ul { display: block }

Но тогда вы не сможете взаимодействовать с чем-либо внутри меню, поскольку оно исчезнет, ​​как только фокус исчезнет.

CSS - хороший инструмент для описания представления, для которого он и предназначен, - очень плохой инструмент для описания логики взаимодействия. Для этого разработан JavaScript, поэтому используйте подходящий инструмент для работы.

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

1 голос
/ 18 мая 2012

Spudley: причина, по которой фокус не работает как hover, заключается в том, что действие hover назначается ul или li, содержащему ссылку.Всплывающее меню - это дочерний элемент этого ul / li, поэтому вы все еще зависаете над элементом внутри ul / li.Фокус может быть размещен только на интерактивных объектах клавиатуры, таких как ссылки и поля формы.Это означает, что когда ссылка имеет фокус, вы можете показать свое меню с помощью селектора CSS3, упомянутого Квентином, но меню не является дочерним по отношению к тегу привязки, чтобы оно было дочерним, ваше подменю должно быть внутритег.Это, как вы можете себе представить, вызовет проблемы со ссылками внутри подменю.Попробуйте поместить свой курсор при наведении на элемент a вместо элемента, включающего символ a, и вы получите те же результаты, что и при использовании метода фокусировки.

Квентин: одна из причин, по которой я сейчас занимаюсь, - это сочетание адаптивного дизайна идоступность.У меня полностью развернуто меню в полноэкранном режиме, но когда вы уменьшаете экран, меню становится маленькой кнопкой на странице, которая расширяется при наведении / фокусировке для экономии места на экранах мобильных телефонов / телефонов.Я также пытаюсь избежать javascript и сделать его доступным с клавиатуры в соответствии с требованиями доступности.Я не думаю, что есть способ сделать это прямо сейчас по той причине, что вы перечислили.Поэтому мой запасной вариант - скрыть меню и показать с помощью JavaScript, а когда он не включен, всегда показывать меню.Менее дружественный для мобильных пользователей (с отключенным js), но они все равно могут получить доступ ко всему для требований доступности.

...