CSS выпадающие на сенсорных клиентов. Собираются ли выпадения чистого CSS? - PullRequest
Новая
       7

CSS выпадающие на сенсорных клиентов. Собираются ли выпадения чистого CSS?

4 голосов
/ 04 мая 2010

Моя компания начинает движение к добавлению iPad в качестве браузера, на котором я должен протестировать свою работу. Это заставило меня задуматься ...

Поскольку у сенсорных клиентов нет состояния: hover, исчезнут ли просто выпадающие списки CSS?

Тогда я подумал, даже если вы добавите какой-нибудь JavaScript, чтобы меню всплыло при нажатии ... Что происходит, когда пункт меню (который расширяется до другого меню) также является ссылкой. Как вы определяете разницу между кликом для просмотра меню или кликом для перехода по этой ссылке?

Что произойдет с выпадающими меню, когда клиенты с сенсорным экраном станут более распространенными? Есть ли еще какие-нибудь обходные пути?

Ответы [ 3 ]

6 голосов
/ 10 августа 2013

Выпадающие списки CSS возможны на сенсорных устройствах благодаря псевдоклассу: target . По сути, псевдокласс активен для объектов, чей идентификатор соответствует текущему фрагменту URL. Это означает, что фрагмент URI можно использовать для хранения и обмена состоянием с CSS. Например, предположим, что мы находимся на http://example.com/,, который имеет следующие HTML и CSS: 

<style>
    #menu {
        display: none;
    }
    #menu:target {
        display: block;
    }
</style>

<a href="#menu">Show the Menu!</a>
<div id="menu"> ... </div>

Меню скрыто по умолчанию. Нажатие или нажатие на ссылку изменит фрагмент URL на «menu» (полный URI: http://example.com/#menu).. Поскольку теперь существует элемент с идентификатором, равным фрагменту URI («menu»), псевдокласс: target применяется, и свойство display изменяется.

Дальнейшее чтение:

4 голосов
/ 04 мая 2010

Это своего рода проблема дизайна, вызванная технической проблемой. Вероятно, я бы изменил / реорганизовал свой контент одним из трех способов:

1- Мега-меню, активируемые кликом ( пример ). Недостатком здесь является то, что у вас могут быть проблемы с недвижимостью.

2- Ссылки категорий верхнего уровня, которые ведут на страницы навигации. Недостатком здесь является то, что для доступа к контенту требуется дополнительная загрузка страницы.

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

0 голосов
/ 24 июля 2010

моя навигационная панель имеет эту функциональность (collins.class401.com/nav) для нужного вам дерьма это модифицированная версия TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp их версия (и моя) использует видимость для: hover их версия также поддерживает только как элементы меню, в то время как моя также поддерживает (хотя использование пролётов нарушает навигацию клавиатуры), если вам нужно что-то вроде формы или кнопки в вашем меню, как у меня их версия обычно работает для: наведите курсор на Ipod Touch, пока вы нажимаете в «пустое пространство» моя версия намного более удобна для сенсорных устройств и имеет нажимаемые стрелки для переключения дисплея с помощью prototype.js,

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

...