Простые эффекты для выпадающего списка

Содержание

Делаем выпадающий список (select) с картинками на событиях mouseleave и mouseover jQuery

Выпадающий список, он же select, это один из самых часто используемых элементов html. Однако, в то время, когда стандарт разметки создавался, никто и представить себе не мог, что могут понадобиться выпадающие списки с картинками и анимацией. Поэтому, несмотря на то, что браузеры, стандарты стилей (css) и само понимание html ушло уже довольно далеко от первоначального, сами контролы тега select и их представления остаются прежними. Именно по этой причине, сегодня существует масса jQuery скриптов для имитации списков, которые скрывают изначальный тег select и создают подобие меню на любых других тэгах, как div. Безусловно, созданные элементы управления выглядят красиво, но у них есть ряд проблем:

  • Во-первых, выбранные значения всегда приходится дублировать.
  • Во-вторых, усложняется способ использования самих тегов select, так как вы не можете изменять их значения напрямую. Вам необходимо использовать функции скриптовых оберток (плагинов).
  • В-третьих, если вам необходимо использовать дополнительные скрипты, которые должны вызываться в определенных событиях, то вы столкнетесь с проблемами интеграции. Так, например, достаточная часть плагинов рассчитана только на события «change» и «click«, поэтому если вы захотели, например, показывать всплывающие подсказки, при наведении мышки на список, то сделать это будет очень не просто (придется копаться в html коде, чтобы понять, как сделано меню и на какие элементы вы сможете повесить обработчики).
  • В-четвертых, такие обертки/плагины обычно сложно модифицируются под ваши нужды. Другими словами, выглядят они красиво, но адаптировать их под задачи будет достаточно не просто.

Тем не менее, если у вас используются выпадающие списки с небольшим набором элементов (например, состояния, уровни доступа и так далее), то легко можно сделать выпадающий список с картинками, и не заменяя тег select другими конструкциями. И в этой статье будет показано, как при помощи css, а так же событий mouseleave и mouseover сделать такой список.

Рассмотрим проблему с картинками в тегах option внутри select-а

Применительно к данной задаче, основных проблем с выпадающим списком всего две. Первая, внутри тега option не может быть вложенных элементов (html-кода), только текст. И вторая, если список используется в стандартном варианте, без указания атрибута size (размер), то к тегу option можно применить очень ограниченное количество стилей (в основном цвет и шрифт). Наглядно продемонстрируем проблему.

Напишем небольшой css:

Напишем простой html-код, внутри которого попробуем вначале расположить теги img внутри option, затем указать для того же select-а атрибут size, чтобы отображалось сразу несколько элементов. А затем попробуем применить к последнему списку описанные ранее классы в css.

Результат, вы можете увидеть на следующей картинке:

Как видите, в первом варианте «select > option > img» ничего не произошло, список продолжил отображаться ровно так же, как и если бы вы ничего не указывали. Во втором варианте, когда у select был указан атрибут size, картинки так же не появились, но зато стало видно, что к option стало применяться больше стилей, так, например, можно отчетливо заметить «padding-left» (отступ слева). Третий же вариант, оказался наиболее удачным. За счет свойства «background: url(‘. ‘)» рядом с элементами option, появились картинки.

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

Делаем выпадающий список select с картинками в option на событиях mouseleave и mouseover jQuery

В отличии от option, к самому тегу select можно применять большинство стилей, вне зависимости от того, отображается ли выпадающий список, как мультисписок или нет. Это означает, что отображать картинку выбранного элемента вы можете в любой момент времени, просто добавляя необходимые стили, например, через классы css, к самому списку. Остается только лишь реализовать удобный для пользователей механизм перехода от обычного выпадающего списка к множественному. И в этом деле, как раз и пригодятся, события mouseleave и mouseover. Но, обо всем по порядку. Вначале необходимо подключить jQuery следующим образом

Затем дополним стили css.

Как видите, в основном добились лишь небольшие правки к расположению картинки для тега select, а так же подсветка при наведении для option (для красоты).

После чего допишем html код

Несложно заметить, что особых изменений нет, по сравнению с третьим вариантом (мультисписок с классами для option), кроме только лишь того, что к тегу добавился класс «select-events» (для простого выбора селектором в jQuery).

И напишем небольшой jQuery-скрипт:

Как видите, скрипт достаточно простой. Функция «cleanSelect» очищает css классы у списка, чтобы во время выбора стили не накладывались друг на друга. А функция «formSelect» формирует все необходимые обработчики, скрывает стилями полосу прокрутки и указывает для select-а класс выбранного элемента.

Теперь, в тот момент, когда вы наведете мышку (событие mouseover) на выпадающий список, он автоматически раскроется до мультисписка со всеми элементами (строка «this.size = $(this).find(‘option’).length;«). После того, как вы выберите элемент и отведете мышку в сторону (событие mouseleave), список снова станет стандартным (строка «this.size = 1;«). Вот картинка с результатом:

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

Скачать архив с демо-проектом вы можете по этой ссылке:

СSS Выпадающий

Создание CSS выпадающего списка при наведении

Демонстрация: Примеров выпадающих списков

Наведите курсор на примеры ниже:

Основы выпадающего списка

Создание выпадающего списка, когда при наведении появляется элемент.

Пример

Объяснение примера

HTML) Используйте любой элемент для открытия выпадающего списка, например: элемент a , или a .

Используйте элемент контейнера (например:

CSS) Класс .dropdown использует position:relative , которая необходима, чтобы выпадающее содержимое находилось прямо под выпадающем кнопкой (с помощью position:absolute ).

Класс .dropdown-content содержит фактическое содержимое выпадающего списка. Он скрыт по умолчанию, и будет отображаться при наведении (см. ниже).

Примечание: min-width имеет значение 160 пикселей. Не бойтесь изменить его.

Совет: Если вы хотите, чтобы ширина выпадающего контента была, как выпадающая кнопку , установите width в 100 процентов (и overflow:auto включить прокрутку на маленьких экранах).

Вместо использования границы мы использовали CSS свойство box-shadow для того, чтобы сделать выпадающее меню как «карточку».

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

Выпадающее меню

Создание выпадающего меню, позволяющего пользователю выбрать параметр из списка:

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

Выпадающий список HTML

Привет! В этой статье вас ожидают примеры выпадающих списков и меню на CSS и, кто бы мог подумать, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.

Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:

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

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в . CSS-код:

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

Цукерберг рекомендует:  26 сервисов для сокращения URL

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил « >

Дальше. В каждый из разделов я вложил дополнительные списки

    , которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

>
/* Обнуляю отступы и убираю маркеры у списков. */
ul , li <
margin : 0 ;
padding : 0 ;
list-style-type : none ;
>

/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu <
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;

/* Задаю стили для блоков выпадающего списка. */
# menu > li <
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
>

/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul <
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
>

/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul <
display : block ;
>
>

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.

Как создать крутое выпадающее меню

Третье готовое, простое и функциональное решение для создания красивого горизонтального меню с выпадающим списком разнообразных элементов.

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

Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.

Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.

Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков

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

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

CSS-код, помещенный в страницы:

Готово! Финальный результат:

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

ul class = «ddropdownn» >
li class = «ddropdownn-top» >
a class = «ddropdownn-top» href = «/» > Красноярский край / a >
ul class = «ddropdownn-inside» >
li > a href = «/» > Минусинск / a > / li >
li > a href = «/» > Ачинск / a > / li >
li > a href = «/» > Красноярск / a > / li >
li > a href = «/» > Железногорск / a > / li >
li > a href = «/» > Канск / a > / li >
li > a href = «/» > Норильск / a > / li >
/ ul >
/ li >

li class = «ddropdownn-top» >
a class = «ddropdownn-top» href = «/» > Свердловская область / a >
ul class = «ddropdownn-inside» >
li > a href = «/» > Екатеринбург / a > / li >
li > a href = «/» > Верхняя Пышма / a > / li >
li > a href = «/» > Нижний Тагил / a > / li >
li > a href = «/» > Первоуральск / a > / li >
li > a href = «/» > Асбест / a > / li >
li > a href = «/» > Каменск-Уральский / a > / li >
/ ul >
/ li >
/ ul >

CSS-код, который я поместил в :

Результат (без наведения курсора):

Результат (при наведении курсора):

Итоги: скачать готовый html+css код выпадающего списка меню

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

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

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

Юзабилити выпадающих списков (Drop-Down): когда вам следует (и не следует) их использовать

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

В электронной коммерции большинство пользователей будут сталкиваться с выпадающими списками при оформлении заказа.

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

Проблемы, вызываемые выпадающими списками, использованными для «неправильных» пунктов, наблюдались во время наших первых раундов тестирования юзабилити, начиная с 2010 года. С тех пор мы подтвердили это поведение пользователя во всех последующих тестах юзабилити. В том числе и в нашем последнем исследование юзабилити Cart & Checkout.

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

  • Почему следует избегать выпадающих списков, когда есть слишком много или слишком мало вариантов выбора
  • Почему (и когда) лучше использовать текстовые поля или радиокнопки (например, для пунктов «Страна» и «Название»)
  • Что использовать вместо выпадающего списка для трех требующих обязательной проверки пунктов, которые часто реализуются именно в виде выпадающих списков (пункты «Штат», «Способ доставки» и «Тип кредитной карты»)

Примечание: Хотя для иллюстрации «слишком много» и «слишком мало» вариантов в раскрывающемся списке используются конкретные цифры, важно не зацикливаться на том, какое точное количество вариантов выбора должно стать причиной использования альтернативного интерфейса ввода данных. Количество вариантов выбора, используемых в этой статье, приведено только для общего руководства – каждый сайт и тип ввода данных имеет индивидуальный контекст, который следует учитывать. Кроме того, все эти выводы применимы для процесса оформления заказа в электронной торговле; другие контексты, такие как формы опроса и прикладное программное обеспечение, могут отличаться.

В общем, избегайте выпадающих списков, если существует более 10 или менее 5 вариантов выбора

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

Возьмем, например, часто используемый в формах оформления заказа, раскрывающийся список «Выбор страны». 47% сайтов в нашем тесте имеют выпадающий список для этого пункта.

Тестирование выявило 3 основные проблемы, вызванные большим количеством вариантов в выпадающем списке для пункта «Выбор страны»:

1) Отсутствие обзора. Просмотр более 20 вариантов, не разделённых на категории, может сбивать с толку и мешать пользователям находить нужную информацию. Длинные выпадающие списки стран (см. здесь в Urban Outfitters) часто включают более двухсот вариантов, поэтому пользователям может быть очень сложно их просматривать.

2) Проблемы с прокруткой. Многочисленные проблемы связаны с прокруткой больших выпадающих списков, которые можно увидеть на сайте Crate & Barrel. Если курсор мыши находится за пределами выпадающего списка, пользователи, скорее всего, будут прокручивать страницу вниз вместо списка, скрывая варианты выпадающего списка на экране. Однако в некоторых браузерах выпадающий список будет прокручиваться до тех пор, пока он имеет фокус, что, вероятно, оставляет пользователей с ошибочными данными.

3) Непоследовательный интерфейс. Интерфейс раскрывающихся списков отличается на разных браузерах и ОС, и он будет не только выглядеть по-разному, но и работать по-разному. Например, Safari и Chrome на MacOS заставляют пользователей наводить курсор на стрелку для прокрутки вверх и вниз, тогда как Firefox предоставляет традиционную полосу прокрутки. Некоторые сайты также используют пользовательские выпадающие списки, которые также часто вызывают проблемы. Сайт American Eagle Outfitters предлагает собственный вариант выпадающего списка. Обратите внимание, что длина выпадающего списка является неоптимальной, так как она слишком мала по сравнению с доступным пространством.

На сайте Build.com, некоторые выпадающие списки содержат всего несколько вариантов – это не эффективно

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

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

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

Что использовать вместо выпадающего списка: текстовые поля и радиокнопки

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

Например, поле «Полное имя» является очень гибким способом поддержки необязательных полей «Title» и «Suffix» (часто неправильно отображаемых в виде раскрывающегося списка). Точно так же необязательное для заполнения текстовое поле инструкций по доставке будет лучшим вариантом, чем выпадающий список.

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

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

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

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

На Etsy используются радиокнопки, когда есть только три возможных ответа.

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

Примечание по флажкам: Флажки – хороший вариант, когда пользователям приходится выбирать между включением или отключением (просто да / нет) и когда большинству пользователей следует обратить пристальное внимание на этот выбор. Типичные примеры включают в себя подписку на рассылку, покупку дополнительных функций (страхование, подписка и т. д.), а также выбор «адрес доставки = адрес выставления счета». Таким образом лучше использовать открытые текстовые поля формы или радиокнопки, когда у вас слишком много или мало вариантов выбора для выпадающего списка.

Цукерберг рекомендует:  Тренды программирования в 2020 году

Что делать с тремя полями оформления заказа, часто реализуемыми в виде выпадающего списка

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

«Окей, он уже распознал, что это в Далласе. Отлично», – сказал пользователь во время тестирования, и был приятно удивлен, когда штат и город были автоматически определены на основе введенного почтового индекса. У других пользователей была похожая положительная реакция.

Адрес доставки, поле «Штат». Важность выпадающего списка для поля «Штат» может быть уменьшена за счет реализации автоопределения zip-кода, которое позволит подавляющему большинству пользователей вообще пропустить взаимодействие с полем «Штат». Тем не менее, мы обнаружили, что только 33% сайтов имеют автоопределение почтовых индексов для поля «Штат» или других аналогичных полей.

На сайте Lowe’s выпадающий список используется для выбора способа доставки, что довольно рискованно, потому что пользователь может его не заметить. С другой стороны, сайт Zalando использует радиокнопки, что значительно упрощает поиск и оценку пользователями различных вариантов.

Выбор способа доставки. Во время тестирования выпадающие списки для выбора варианта доставки часто полностью игнорировались, не воспринимались как важные, страдали от недостатка информации в свернутом состоянии и редко имели достаточную информационную иерархию. Вместо этого радиокнопка – лучший выбор. (К счастью, только 4% сайтов электронной коммерции используют раскрывающийся список для выбора способа доставки).

На сайте Northern Tool пользователям предлагается выбрать тип карты из выпадающего списка. Однако на сайте H&M тип карты пользователя автоматически определяется по IIN карты.

Оплата, поле «Тип карты». Основываясь на первых цифрах номера кредитной карты, можно определить ее тип, поэтому нет необходимости тратить время на то, чтобы просить пользователей самостоятельно выбрать тип карты. Вместо этого тип карты должен быть автоматически определен из диапазона IIN. Тем не менее, наш тест показывает, что 23% сайтов используют раскрывающийся список «Тип карты».

Примечание: Одним из полей, в которых допустимо (даже предпочтительно) использовать раскрывающийся список, даже при наличии более 10 вариантов, являются числовые данные ввода (например, поле «Действителен до» количество товара). При тестировании мы наблюдали, что пользователи, взаимодействующие с этими выпадающими списками, не имеют проблем юзабилити.

Как решить, является ли выпадающий список подходящим выбором для ввода данных

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

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

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

Вполне вероятно, что в большинстве случаев, например, для ввода данных в поля «Заголовок», «Страна», «Штат» или «Регион», «Выбор способа доставки» и «Тип карты», есть лучшая альтернатива раскрывающимся спискам, которая поможет пользователям быстрее и с меньшими трудностями оформить заказ или другой процесс, требующий от пользователей ввода данных.

В этой статье представлены результаты исследований только 1 из 642 рекомендаций по UX в Baymard Premium получите полный доступ, чтобы узнать, как создать современный пользовательский опыт.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Решено с помощью CSS! Выпадающие меню

Дата публикации: 2020-05-15

От автора: реализация выпадающего меня с помощью HTML и CSS, обеспечение необходимого уровня доступности навигации, фокусировка пунктов, поддержка браузерами — об этом в статье.

CSS становится все более мощным, и с помощью таких функций, как CSS-сетка и пользовательские свойства (также называемые переменные CSS), мы можем реализовать многие действительно креативные решения. Некоторые из этих решений имеют своей целью не только сделать Интернет красивее, но и сделать его более доступным, и улучшить опыт создания доступных стилей. Я определенно придерживаюсь этой точки зрения!

Общий шаблон пользовательского интерфейса, который мы видим в Интернете, — это выпадающие меню. Они используются для более детального отображения связанной информации, не нагромождая большого количества кнопок, текста и параметров. Чаще всего они используются для областей заголовка и навигации сайта.

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Давайте посмотрим, можем ли мы создать одно из этих меню с помощью только CSS. Мы создадим список ссылок внутри компонента навигации следующим образом например:

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

Теперь у нас есть двухуровневая система навигации. Чтобы содержимое было скрыто и отображалось, когда мы хотим, нам нужно применить некоторый CSS. Все свойства стилей для ясности взаимодействия были удалены из следующего примера:

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

Проблема

Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете — это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=»navigation» — это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.

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

Теперь важно отметить, что теоретически вы выделили фокусом элемент подменю, и программа чтения с экрана сможет проанализировать это, считав Sub-One, но пользователи клавиатуры не смогут определить, что сейчас происходит.

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

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: «:focus-inside»

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

Бесплатная подборка из 40 эффектов CSS

В посте собрана подборка различных эффектов и анимации CSS, которые могут пригодиться в работе, а кроме того избавят от необходимости постоянно прибегать к JavaScript. Возможно примеры не самые новые и необычные, но на мой взгляд, полезные.

1. Часы CSS3 с jQuery

Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.

2. Аналоговые часы CSS

Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.

3. Вращающийся 3D-куб

Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.

4. Несколько выдвигающихся 3D-кубов

Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition. Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.

5. Accordion меню

Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.

6. Параллакс-скроллинг на CSS

Это анимированный автоматический параллакс-скроллинг с использованием CSS переходов на основе WebKit. При наведении на текстовое окно, звезды на фоне начинают плавно двигаться в сторону. Создается эффект полета.

7. Матрица

Культовый фильм «Матрица» — одна из лучших фантастических кинокартин. На примере показано, как воссоздать примерно такую же удивительную анимацию (черный экран с бегущими цифрами) в CSS3.

8. Динамичные Палароиды

В этом примере проводится подробное описание создания анимированных фотографий, основанной на командах CSS3. При клике на изображение, оно увеличивается и выдвигается на передний план.

9. Масштабирование изображений

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

10. Эффекты JavaScript на CSS3

В качестве альтернативы JavaScript, в посте предложено семь эффектов на CSS3: различные блоки, которые вращаются, исчезают, выезжают, увеличиваются и т.д.

11. Виртуальные пластинки DJ Hero

В посте рассказывается, как создать крутящиеся пластинки. Скорость вращения можно регулировать прямо на экране.

12. Скользящий винил

Эффект скольжения виниловых пластинок создается с помощью переходов CSS3 и HTML. Подобная анимация оживляет веб-страницу, добавляет оригинальности стандартной обложке альбома и т.д.

13. Эффекты при наведении на картинку

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

14. Вращающийся треугольник

При нажатии на треугольник, он начинает вращаться.

15. Космос

Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).

16. «Менины» в 3D

Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.

17. CSS для Mac OS Х

В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.

Цукерберг рекомендует:  28 бесплатных CSS фрэймворков и библиотек

18. Drop-In Modals

CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.

19. Анимирование объектов

Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.д.

20. Цветные часы

Цветные часы созданы на основе jQuery и CSS3. Подобный эффект придется кстати в контексте ожидания времени завершения какого-нибудь конкурса, голосования и тому подобного.

21. Гелерея Lightbox на jQuery и CSS3

Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox. Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.

22. «Эластичные» превью

Увеличение превью изображений при наведении. Таким образом при клике меню пропорционально увеличивается.

23. Динамичные карточки

Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.

24. Выдвижное JQuery меню

Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.

25. Табы CSS

В примере наведение курсора мыши на заголовки табов сопровождается сменой приведенного ниже списка.

26. Fisheye меню

На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.

27. Выпадающее меню

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

28. Титры из «Звездных войн»

Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.

29. Еще эффекты Fisheye на CSS

Опять таки, увеличивающиеся при наведении значки.

30. Анимация по типу «кадр за кадром»

Возможны несколько вариантов демонстрации.
В первом примере для обеспечения смены кадров необходимо кликать на изображение. Каждый клик — одно движение. Кадры повторяются, создается определенная зацикленность.
Во втором примере для смены кадров достаточно провести курсором по изображению. Соответственно и скорость анимации будет зависеть от быстроты движения мыши.

31. Имперский шагоход AT-AT

И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.

32. Еще одна «гармошка» CSS

При клике на строку, таблица раскладывается.

33. Простое выдвижное меню

При наведении секции меняют цвет и выдвигаются.

34. Магические анимационные эффекты в CSS

Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.

35. Меню из закладок

36. Прогресс бар

Анимационный прогресс бар на CSS.

37. Салют CSS

В примере показано, как создать салют из кругов на JQuery и CSS.

38. Включатель/выключатель

На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.

39. Цветная загрузка

Пример оригинальной разноцветной анимации загрузки на CSS.

40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.

jQuery работа с выпадающим списком select (пример)

Очень часто приходится сталкиваться с выпадающим HTML списком

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

1 — Получить значение выбранного элемента:

2 — Получить текст того же выбранного элемента:

3 — Сделать недоступным:

5 — Удалить выбранный элемент:

6 — Удалить первый элемент:

7 — Удалить последний элемент:

8 — Удалить элемент, у которого value=’2′:

9 — Очистить весь список :

10 — Перебрать все элементы списка :

11 — Сделать выбранным последний элемент:

12 — Сделать выбранным второй элемент:

13 — Сделать выбранным элемент, содержащий текст ‘Второе поле имеет значение value=2’:

14 — Сделать выбранным элемент, value которого = 2:

15 — Добавить элемент в начало списка :

16 — Добавить элемент в конец списка :

17 — Добавить новый элемент после второго:

18 — Количество элементов option в списке :

19 — Проверяем, выбран ли элемент в списке :

20 — Сделать все элементы в списке не выбранными:

21 — Добавить несколько элементов option в список из массива:

Так же Вы можете скачать пример работы скрипта из вложения в конце статьи для большего понимания.

Полагаю этого вполне достаточно для управления списками. Если у Вас есть, что дополнить к этому, пишите в комментариях.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

JavaScript урок13. Объектная модель документа (продолжение) и идентификация

Событие javascript onresize объекта window

Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window .

Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.

Рассмотрим на примере:

window.onresize = message; function message()

window.onresize = function message()

HTML-код:

пожалуйста, измените размер этого окна.

Объект javascript выпадающий список — select

Объект select — выпадающий список — предоставляет список значений для выбора. Выбор может быть как одного пункта, так и нескольких пунктов сразу. Это сложный объект, обращение к которому в скрипте происходит и как к объекту select , и как к его пункту option .

Свойства объекта select:

  • length — количество пунктов списка
  • name — атрибут name
  • options[] — массив пунктов
  • selectedIndex — индекс выбранного пункта option
  • defaultSelected — выбранный пункт option по умолчанию
  • selected — выбранный пункт

Получить значение выпадающего списка (select) в javascript можно через свойство value . Но есть и другие способы.

Идентификация значения списка:

  • Добавьте текстовое поле и список select с четырьмя пунктами option с текстом.
  • В открывающий тег select добавьте обработчик события onchange .
  • Отождествите обработчик события onchange с функцией, изменяющей текст в текстовом поле (в текстовое поле поместите значение выбранного пункта меню).

Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:

В данном примере при изменении пункта меню генерируется событие onChange . В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка ( selectedIndex ).

Объект javascript option — пункт меню

Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:

  • text — строка текста, которая размещается в контейнере LI
  • value — значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION
  • selected — альтернатива выбрана(true/false)

Доступ к конкретному пункту меню происходит через коллекцию (массив) options:

Рассмотрим пример использования свойства text объекта option:

Рассмотрим еще одно решение с использованием списка множественного выбора:

Свойства outerHTML и innerHTML в javaScript

innerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента.
Рассмотрим выполненный пример:

outerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента вместе с самим элементом.
Пример:

Как сделать выпадающий список с красивым эффектом на CSS и JQuery.

Всем привет! Сегдня я покажу, как сделать выпадающий список с красивым эффектом на CSS и JQuery.

Посмотреть, как это работает, вы можете здесь

Теперь приступим к созданию

В .html файле пропишем следующую структуру

Стили будут примерно такими. Однако вы можете их менять так, как захотите

$dark: #35414a;
$semilight: #86919a;
$blue: #5aafee;
*, *:before, *:after <
box-sizing: border-box;
margin: 0;
padding: 0;
>
@font-face <
font-family: pfs-bold;
src: url(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf’);
>
body <
background: $dark;
>
.drop <
width: 20em;
margin: 5em auto;
font-family: pfs-bold;
color: $semilight;
text-transform: uppercase;
position: relative;
transition: width 0.5s;
will-change: width;

.option <
padding: 1em;
cursor: pointer;
background-color: #485761;

.option <
transform: translateZ(0);
opacity: 1;

.option <
transition: background-color 0.1s;

&:after, &:before <
content: «»;
position: absolute;
top: 1.5em;
right: 1em;
width: 0.75em;
height: 0.75em;
border: 0.2em solid $semilight;
transform: rotate(45deg);
transform-origin: 50% 50%;
transition: opacity 0.2s;
>
&:before <
border-left: none;
border-top: none;
top: 1.2em;
>
&:after <
border-right: none;
border-bottom: none;
opacity: 0;
>
>

.mini-hack <
opacity: 0;
transform: translateY(-50%);
>

И, наконец, простой скрипт на JQuery.

$(document).ready(function() <
$(«.drop .option»).click(function() <
var val = $(this).attr(«data-value»),
$drop = $(«.drop»),
prevActive = $(«.drop .option.active»).attr(«data-value»),
options = $(«.drop .option»).length;
$drop.find(«.option.active»).addClass(«mini-hack»);
$drop.toggleClass(«visible»);
$drop.removeClass(«withBG»);
$(this).css(«top»);
$drop.toggleClass(«opacity»);
$(«.mini-hack»).removeClass(«mini-hack»);
if ($drop.hasClass(«visible»)) <
setTimeout(function() <
$drop.addClass(«withBG»);
>, 400 + options*100);
>
triggerAnimation();
if (val !== «placeholder» || prevActive === «placeholder») <
$(«.drop .option»).removeClass(«active»);
$(this).addClass(«active»);
>;
>);

function triggerAnimation() <
var finalW ) ? 22 : 20;
$(«.drop»).css(«width», «24em»);
setTimeout(function() <
$(«.drop»).css(«width», finalWidth + «em»);
>, 400);
>
>);

Вот так просто можно сделать красивый выпадающий список на JQuery.

Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    jQuery работа с выпадающим списком select (пример)

    Очень часто приходится сталкиваться с выпадающим HTML списком

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

    1 — Получить значение выбранного элемента:

    2 — Получить текст того же выбранного элемента:

    3 — Сделать недоступным:

    5 — Удалить выбранный элемент:

    6 — Удалить первый элемент:

    7 — Удалить последний элемент:

    8 — Удалить элемент, у которого value=’2′:

    9 — Очистить весь список :

    10 — Перебрать все элементы списка :

    11 — Сделать выбранным последний элемент:

    12 — Сделать выбранным второй элемент:

    13 — Сделать выбранным элемент, содержащий текст ‘Второе поле имеет значение value=2’:

    14 — Сделать выбранным элемент, value которого = 2:

    15 — Добавить элемент в начало списка :

    16 — Добавить элемент в конец списка :

    17 — Добавить новый элемент после второго:

    18 — Количество элементов option в списке :

    19 — Проверяем, выбран ли элемент в списке :

    20 — Сделать все элементы в списке не выбранными:

    21 — Добавить несколько элементов option в список из массива:

    Так же Вы можете скачать пример работы скрипта из вложения в конце статьи для большего понимания.

    Полагаю этого вполне достаточно для управления списками. Если у Вас есть, что дополнить к этому, пишите в комментариях.

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