Выпадающий список на css: Как создать выпадающее меню

Дебаунсинг выпадающего списка (меню сайта) средствами одного CSS / Habr

Предыстория

Около пяти-шести лет назад я переделывал меню на рабочем сайте (не называю). Меняли меню каталога со старомодного разворачивающегося на (сейчас относительно) современное выпадающее. Меню делали горизонтальное, выпадающее вправо.

Коллега обратил мое внимание на проблему «цепляния за соседние пункты» при передвижении курсора мыши к выпавшим подпунктам меню. Он предложил решить ее так, как это было тогда сделано на сайте Амазона, и скинул мне местную статью Загадка выпадающего списка «Амазона» (где и постановка задачи и описание решения и ссылки на).

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

Я долго ждал, когда увижу, что кто-то сделал что-то подобное (и мне не придется писать на Хабр), но пока не дождался. Возможно плохо смотрел.

Проблема

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

На картинке, думаю, понятно изображено. Двигать нужно по синим стрелкам. Кратчайшее движение по красной стрелке приведет к перескоку на пункты 4 и 3. Кто хочет проверить: ссылка на jsfiddle.

Мое решение

Живой пример возможно многим пояснит лучше дальнейших слов.

Мое решение: при зависании мыши над корневым пунктом меню закрываем соседние пункты прозрачным дочерним элементом (dom-елементом) этого пункта, таким образом, чтобы на соседних элементах событие hover уже не происходило.

В примере для наглядности этот вспомогательный элемент div. unhover сделал полупрозрачным красным. В продакте, конечно, ставим ему в стиле background: transparent.

А чтобы другой корневой пункт все-таки можно было выбрать, прячем этот вспомогательный div, если курсор передвинут непосредственно на него или на выпавший блок. Но делаем это с анимацией свойства width этого вспомогательного элемента.

В общем при движении курсора к подпунктам (зеленая стрелка) эта «шторка» div.unhover плавно но быстро сворачивается ему вслед. Скорость анимации нужно подбирать по ширине меню и скорости движения мыши среднестатистического посетителя.

Чтобы не происходило осцилляций вспомогательного блока, названия корневых пунктов обернуты в span‘ы, которые при наведении получают больший z-index, чем их сестринский div.unhover.

Заключение

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

Но в последнее время даже на ведущих сайтах в лучшем случае отделываются простой задержкой переключения корневых пунктов. Оно и понятно тач-интерфейсы основательно вышли на передний план.

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	Выберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбора	Раскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey

Позволяет перейти к списку с помощью некоторого сочетания клавиш.

autofocus

Устанавливает, что список получает фокус после загрузки страницы.

disabled

Блокирует доступ и изменение элемента.

form

Связывает список с формой.

multiple

Позволяет одновременно выбирать сразу несколько элементов списка.

name

Имя элемента для отправки на сервер или обращения через скрипты.

required

Список обязателен для выбора перед отправкой формы.

size

Количество отображаемых строк списка.

tabindex

Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Строчные элементыФормы

• Поле со списком

Как настроить выпадающий список с помощью CSS

Знакомо ли вам чувство, которое вы испытываете, когда тратите несколько часов на то, чтобы все выглядело идеально, только для того, чтобы быть побежденным браузером! Позволь мне объяснить. Итак, мой день начался с тестирования страницы, которую я создавал для веб-сайта клиента. И что это, когда я заметил проблему. В то время как это конкретное *раздражение* осталось бы незамеченным неопытным глазом, мои очки дизайнера пользовательского интерфейса сразу же заметили это.

Проблема заключалась в том, что в разных браузерах поле выбора отображалось по-разному. Я знаю, что это не недавняя проблема. Дело в том, что каждый браузер отображает поле по-своему. Firefox — худший (в данном случае)… худший! И эта непоследовательность была темным пятном на моем творчестве.

Итак, прервём драму 😀 . Следующее, что я сделал, очевидно, попытался решить эту проблему. Погуглив об этом. Я не был готов так легко победить. Некоторые форумы предлагали мне использовать свойства -moz-appearance или -webkit-appearance , но я не смог найти действительно работающее решение.

Теперь я знал, что мне нужен CSS, который я должен правильно использовать для решения этой проблемы. Но это было не очень очевидно, пока один из моих экспериментов не натолкнул меня на мысль.

Если не можешь изменить… Спрячь!

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

1. Поместите раскрывающийся список в контейнер
Для начала нам нужна определенная область для поля выбора. Эта область должна быть отмечена контейнером div, а поле выбора размещено внутри другого div.

 <дел>
    <дел>
       <выбрать имя="search_categories">
          Доволен
          Отлично
          Хорошее решение
          Потрясающе