Как сделать выпадающий список при наведении в html: Как сделать всплывающее меню при наведении

html — Как при наведении курсора на текст сделать выпадающий список с номерами телефонов , заключенных в div?

Вопрос задан 1 год 3 месяца назад

Изменён 1 год 3 месяца назад

Просмотрен 252 раза

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

<p title="Этот текст будет показан при наведении">Просто текст</p>

текст показывает при наведении курсором, а как туда «засунуть» следующий div?

<div>
                <div>
                                        <a href="tel:+79829349099"><span>+7 (982)</span> 934-90-99</a>
                    <div>Работаем без выходных, с 8:00 до 21:00</div>
                </div>

просто в title никак не получается вписать этот участок кода

Если вы делаете эффект наведения мыши, то это делается не через параграфы и блоки, а через выпадающие списки.

<div>
        <ul>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u>
                <ul><div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                </div></ul></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
        </ul>
    </div>

.  main {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.main > li {
    display: inline-block;
    position: relative;
}
.main > li:hover > ul {
    visibility: visible;
    opacity: 0.9;
    transition: all 0.2s ease-in-out; 
}
.main > li > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0.1;
    visibility: hidden;
    background: #FFFFFF;
    position: absolute;
    top: 50px;
    left: 0;
} 
li.content{
    margin-right: -13px;
}
li.content::after {
    content: " / ";
    color: white;
    font-size: 20px;
    padding-top: 10px;
    margin-left: 13px;
}
li.content:last-child::after{
    content: none;
}
div {
    background: #d6161d;
    height: 50px;
    color: white;
    font-family: Trebuchet MS;
}
ul.main {
    margin-left: 100px;
}
div > ul > li {
    margin-left: 30px;
    padding-top: 10px;
}
a {
    color: #FFFFFF;
}
#shadow {
    box-shadow: 0 0 10px #aeaeae;
    height: 184px;
}
li > ul > li {
    width: 250px;
    height: 30px;
    padding-top: 10px;
} 
div.  pouring {
    background: #FFFFFF;
    width: 225px;
    height: 36px;
    color: #e5e5e5; 
    border-bottom: 0.5px solid #e5e5e5;
}
#first-div{
    height: 39px;
}
a.pass{
    color: #a7a7a7; 
    justify-content: center;
    position: relative;
    top: 7px;
    display: block;
    width: 200px;
    height: 27px;
    font-size: 14px;
    text-decoration: none;
}
div#first-div a.pass {
    top: 11px;
}
a.pass:hover{
    text-decoration: underline;
}
.mark div a{
    margin-left: 15px;
}
.mark div:hover,
.mark div:hover a,
.mark a:hover {
    display: block;
    background-color: #e5e5e5;
    color: #d73135;
    align-items: center;
}
ul {
    height: 100%;
    margin: 0;
}
li {
    list-style-type: none;
    display: inline-block;
    height: 100%
}

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

2

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать выпадающий список при наведении курсора html

Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню

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

Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.

Навигация по странице:

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

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

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

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

Пара слов о преимуществе выпадающих меню:

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

Вертикальное выпадающее меню вправо

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

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

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

Вертикальное выпадающее меню CSS

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

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

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

Это еще не конец, идем дальше.

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

Вертикальное выпадающее меню влево на CSS

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

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

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

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=&#187;menu&#187;» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «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-код, который я поместил в <head>:

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

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

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

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

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

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

Как сделать выпадающее меню на HTML и CSS

В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.

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

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

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

Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги <nav> , для лучшей индексации.

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

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

Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul> , которые находятся внутри тега <li> , сделать позиционирование absolute и добавить ему свойство display: none , что бы блок не показывался на экране.

Последнее важное изменение, это при наведении мышкой на <li> , внутри которого есть <ul> , он появлялся, вот что получилось.

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

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.

Организация выпадающего списка при наведении курсора на словосочетание — Вопрос от Січинці школа

• Вопросы
• Горячие
• Пользователи
• Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

• Вопросы новичков (16367)
• Платные услуги (2091)
• Вопросы по uKit (81)

Контент-модули

• Интернет-магазин (1430)
• Редактор страниц (236)
• Новости сайта (497)
• Каталоги (805)
• Блог (дневник) (111)
• Объявления (294)
• Фотоальбомы (432)
• Видео (255)
• Тесты (60)
• Форум (575)

Продвижение сайта

• Монетизация сайта (218)
• Раскрутка сайта (2447)

Управление сайтом

• Работа с аккаунтом (5292)
• Поиск по сайту (425)
• Меню сайта (1756)
• Домен для сайта (1529)
• Дизайн сайта (13443)
• Безопасность сайта (1463)
• Доп. функции (1304)

Доп. модули

• SEO-модуль (225)
• Опросы (62)
• Гостевая книга (98)
• Пользователи (431)
• Почтовые формы (318)
• Статистика сайта (197)
• Соц. постинг (212)
• Мини-чат (91)

Вебмастеру

• JavaScript и пр. (642)
• PHP и API на uCoz (233)
• SMS сервисы (10)
• Вопросы по Narod. ru (422)
• Софт для вебмастера (39)

…

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

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

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper. js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

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

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

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

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

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    . ..
  </div>
</div>

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс . dropright и выпадающий элемент будет «выпадать» вправо.

<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper. js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

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

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

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

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="email@example. com">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <input type="checkbox">
    <label for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса . show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    . ..
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название	Тип	По умолч.	Описание
offset	number | string | function	0	Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip	boolean	true	Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary	string | element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод	Описание
$().dropdown('toggle')	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown('update')	Обновляет позицию «выпадения» элемента.
$().dropdown('dispose')	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие	Описание
show.bs.dropdown	Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.dropdown	Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
hide.bs.dropdown	Это событие наступает немедленно по вызову экземпляра метода hide.
hidden.bs.dropdown	Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Как в html сделать выпадающий список

Главная » Разное » Как в html сделать выпадающий список

Как сделать выпадающий список в HTML (ТОП 16)

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

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали и . Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

1. Настраиваемый список

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE

2. Сделанный на CSS3/JavaScript

Написан на CSS3 и JavaScript. Обычный выпадающий список.

Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw

3. Стиль: станции метро

Прозрачный выпадающий список со стилистикой станций метро.

Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH

4. Dropy. Написанное на SCSS & jQuery

Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC

5. Для длинных выдающих списков

Отличное решение для длинных выпадающих меню.

Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc

6. Темное и светлое выпадающее меню

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

Посмотреть в песочнице — http://codepen. io/Thibaut/pen/Jasci

7. Навигация, эффект раскрытия

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

Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

8. Стильное меню настроек пользователя

Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw

9. CSS3 выпадающий список

Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi

10. UI выпадающее меню

Сделано в стиле UI, подойдет под UI стилистику сайта.

Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx

11. Простой dropdown

Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG

12. Выбор флага

Dropdown в стиле выбора страны. 

Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi

13. Обычный HTML, CSS dropdown

Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH

14.

Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp

15. Анимационное выпадающее меню

Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg

16. 3D dropdown

Довольно интересный и простой дизайн.

Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD

Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

Как сделать выпадающий список в HTML

Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option – именно они задают элементы списка.

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

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

Атрибуты тега select

1. Multiple – задает множественный выбор.

2. Size – задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.

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

Тег select не имеет обязательных атрибутов в отличие от тега option.

Атрибуты вложенного тега option

1. Selected – предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
2. Value – значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
3. Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан — административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.

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

Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают виды одежды), затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.

Мы поверхностно перечислили основные способы, при помощи которых можно создать выпадающий список. Разумеется, есть масса нюансов в HTML, в CSS и в JavaScript, которые позволяют менять функциональность и внешний вид списков.

Элемент Select. Как сделать выпадающий список на HTML.

Посмотрите на следующий выпадающий список.

Пункт 1Пункт 2Пункт 3

Этот список становится возможным создать с помощью языка HTML. Давайте рассмотрим код, который за это отвечает.

Пункт 1 Пункт 2 Пункт 3

Итак за создание самого списка отвечает элемент select, а за пункты, которые будут выпадать элемент option.

Вполне возможно, что вам может понадобиться сделать так, чтобы по умолчанию у вас был выбран не «Пункт 1», который идет первый по списку, а скажем «Пункт 3». Для этой цели можно воспользоваться атрибутом selected.

Вот как будет выглядеть код:

Пункт 1 Пункт 2 Пункт 3

Как создать редактируемый выпадающий список в HTML?

Я не уверен, что есть способ сделать это автоматически без javascript.

Что вам нужно — это что-то, что работает на стороне браузера, чтобы отправить форму на сервер, когда пользователь делает выбор — следовательно, javascript.

Кроме того, убедитесь, что у вас есть альтернативное средство (то есть кнопка отправки) для тех, у кого отключен javascript.

Хороший пример: Combo-Box Viewer

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

Смотрите также

• Как сделать в word двуязычный договор
• Html 404 как сделать страницу
• Как в word сделать нумерацию страниц разную
• Как удалить макросы в word
• Как в word напечатать заявление
• Как в word перед таблицей вставить строку
• Как в word сделать зеркальную надпись
• Как html перевести в xml
• Как напечатать конверт в word
• Как изменить размер между строк в word
• Как вставить таблицу из powerpoint в word

Все что нужно знать о раскрывающихся списках (dropdown)

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

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

1. Анатомия

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

Анатомия раскрывающегося списка формы

2. Типы и варианты раскрывающихся списков

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

Стандартный раскрывающийся список

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

Стандартный раскрывающийся список

Раскрывающийся список с автодополнением (autosuggest)

Я их люблю. Впервые я узнал об автодополнении в поле поиска Google, однако, я понятия не имею, где оно было впервые реализовано. (Пишите в комментариях, если знаете). Это особенно полезно, когда у вас есть длинные списки, а пользователь уже знает ответ (например, страну проживания).

Раскрывающийся список с автодополнением

Раскрывающийся список с автодополнением и автозаполнением (autocomplete)

Автодополнение не следует путать с автозаполнением (autocomplete). Автодополнение– это, когда в поле ввода отображаются варианты, из которых пользователь может выбирать. Автозаполнение – это, когда форма предлагает способ завершения слова или фразы.

Раскрывающийся список с автодополнением и автозаполнением

Иногда поля с автозаполнением замаскированы под поле ввода текста, пока вы не начнете печатать.

Раскрывающийся список со множественным выбором

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

Раскрывающийся список со множественным выбором

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

Раскрывающийся список с группами

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

Раскрывающийся список с группами

Меню с множественным выбором

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

Фиксированное прокручиваемое меню

Хотя они хороши для настольных компьютеров, они ужасны для мобильных устройств, поскольку являются «прокруткой внутри прокрутки».

Лично я использовал этот паттерн всего раз (должен сказать, что меня заставили), и я редко встречаю его. Если у вас есть дополнительная информация о нем, пожалуйста, пишите в комментариях 🙂

Выборщик дат (Date picker)

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

Выборщик дат

Рекомендации Тесс, как заставить людей ненавидеть тебя:

1. Когда вы просите людей указать день, когда истекает срок действия карты или паспорта, используйте выпадающее меню календаря. Ведь им важно точно знать, в какой день недели истекает срок действия их карты.
2. При запросе пользователей ввести дату рождения, используйте выпадающий календарь. Бонус: убедитесь, что нажатие на каждый месяц –единственный способ, которым пользователи могут перемещаться по годам. Еще бонус: этот паттерн дизайна особенно полезен в онлайн-формах для домов престарелых.

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

3. Стили раскрывающихся списков

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

Стандартный стиль с прикрепленным списком (attached)

Я называю этот стиль «стандартным», потому что именно его мы привыкли видеть.

Стандартный стиль (attached)

Стандартный стиль с отдельным списком (detached)

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

Стандартный стиль (detached)

Закругленные границы

Закругленные границы прекрасно подходят интерфейсам, имеющим игривый внешний вид.

Закругленные границы

С иконками

Добавление простой иконки в начало поля ввода может сделать его более «спроектированным». Когда кто-то жалуется, что форма выглядит слишком скучно («Стив, это форма с 20 полями ввода – как думаешь, на что она будет похожа?»), я просто добавляю иконки.

Раскрывающийся список с иконками

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

С изображениями

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

Раскрывающийся список с изображениями. Фото с Unspalsh.Фото: Strawberry cake — @alinasagirova , Cheese cake — @patuphotos, Chocolate cake — @tuvaloland

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

Раскрывающийся список Material Design с заливкой

Мои постоянные читатели знают, что я большой поклонник Material Design, включая их выпадающие списки.

Поле «только линия» больше не используется в руководстве Material Design, но вы все равно встретите его в Интернете. Если вы хотите узнать больше, я написал об этом в предыдущей статье, а Dave Chui ответил здесь.

Раскрывающийся список Material Design с линией

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

Раскрывающийся список Material Design с заливкой

Раскрывающийся список Material Design с рамкой

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

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

Раскрывающийся список Material Design с рамкой

4. Состояния раскрывающихся списков

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

Активное состояние

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

Активное состояние

Отключенное состояние

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

Отключенное состояние

Наведение курсора

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

Состояние наведения курсора

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

Состояние выделения

Состояние выделения – это когда пользователь использует tabbing map (т. е. использует «tab» для навигации по интерфейсу и «enter» для ввода информации) и выделяет раскрывающийся список перед его выбором. Обычно мы видим это как «синий ореол» на интерактивных элементах.

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

Альтернативные состояния выделения

Состояние фокуса

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

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

Состояние фокуса

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

Состояние фокуса при наведении курсора

Завершенный ввод

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

Завершенный ввод

Ошибка обратной связи

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

Ошибка обратной связи

5. Что должен сказать плейсхолдер

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

Пустой плейсхолдер

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

Раскрывающийся список с пустым плейсхоледром

Общие подсказки в плейсхолдере

«- Select -», «Choose» и т.д. – это классические подсказки для раскрывающихся списков.

Раскрывающийся список с общими подсказками

Побуждающая фраза в плейсхолдере

Использование универсальных «Select» / «Choose», а затем того, что вы хотите, чтобы пользователи выбрали, является классным способом сохранить согласованность в раскрывающихся списках, а также дать вашим пользователям подсказку относительно того, что делать.

Раскрывающийся список с побуждающей фразой

Выбранный вариант в качестве плейсхолдера

Хотя у вас есть возможность отобразить предварительно выбранный элемент в раскрывающемся списке, вы должны быть осторожны, чтобы убедиться, что пользователь его заметил и прочитал – в противном случае он может дать согласие на то, чего не хочет. #КассическийПриемТемныхПаттернов

Раскрывающийся список с выбранным вариантом в качестве плейсхолдера

Так какой вариант выбрать? Если вы сомневаетесь, сохраняйте последовательность. Если все текстовые поля имеют плейсхолдеры, используйте их.

6. Когда не использовать выпадающий список (а когда нужно)

Этот раздел посвящен всем сайтам, которые заставляют меня вводить год рождения, используя выпадающий список: f *** you. Не нужно напоминать мне о быстро растущем возрасте, пролистывая длинный список месяцев, пока я в конце концов не найду год своего рождения.

Если у вас меньше пяти вариантов

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

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

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

Если проще напечатать, чем выбрать

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

Альтернатива выпадающего списка: если легче напечатать

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

Если у вас есть два варианта, и это «on» и «off» (или «да» и «нет»)

Раскрывающийся список с двумя вариантами немного раздражает. Особенно с вопросами «да / нет». Переключатели прекрасно подходят для подобных вопросов.

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

Если варианты ответа числовые

Если варианта ответа числовые, у вас есть несколько вариантов.

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

Альтернатива выпадающего списка: если варианты числовые

Второй использует ползунок (слайдер), чтобы выбрать значение. Слайдеры особенно полезны для больших чисел или приблизительных значений.

Альтернатива выпадающего списка: если варианты числовые

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

Если вариантов много

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

Альтернатива выпадающего списка: если вариантов много, НО пользователь знает ответ, прежде чем кликнуть по раскрывающемуся списку

Итак, когда вы должны использовать раскрывающийся список?

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

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

7. Нативные раскрывающиеся списки

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

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

Наши широкомасштабные тесты юзабилити и сравнительный анализ показывают, что в то время как 82% сайтов электронной коммерции используют в процессе оформления заказа кастомные раскрывающиеся списки, 31% из них имеют значительные проблемы юзабилити.

— Кристиан Хольст

Статью можно прочитать здесь

По умолчанию

Вот несколько примеров нативных раскрывающихся списков. Чтобы попробовать их, перейдите по ссылке: https://html.com/attributes/option-selected/

Нативные мобильные раскрывающиеся списки | https://html.com/attributes/option-selected/

Нативные декстопные раскрывающиеся списки https://html.com/attributes/option-selected/

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

Использование оболочки

Раньше я называл подобные раскрывающиеся списки «полу-кастомными», но недавно нашел статью, в которой этот паттерн называется оболочкой (shell) – это звучит куда формальнее. Поэтому впредь я буду называть это оболочкой, и буду использовать этот термин на совещаниях. Я буду наслаждаться, когда люди будут спрашивать меня, что это значит, просто чтобы я мог показать, насколько я умен.

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

Оболочка раскрывающегося списка

8. Проверка доступности?

1. Активное состояние раскрывающегося списка (включая метку) превышает 44px? (Мы учитываем метку, потому что, если вы кликните по метке, раскрывающийся список все равно должен открыться).
2. Все варианты в раскрывающемся списке имеют высоту более 44px с расстоянием 8px между ними?
3. Соответствуют ли цвета стандартам доступности AAA?
4. У вашего раскрывающегося списка есть выделенное состояние?
5. Убедитесь, что выпадающие списки работают с tabbing map.
6. Если вы используете кастомный раскрывающийся список, убедитесь, что он может открываться вверх или вниз в том случае, если область просмотра браузера находится слишком низко.

И, если вы сомневаетесь, посетите https://webaim.org/techniques/forms/controls

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

Многие ненавидят раскрывающиеся списки– и это правильно. Но иногда существует несколько возможных альтернатив, и, если это так, вы должны улучшить раскрывающиеся списки.

Спасибо Lesedi Hermans.

Перевод статьи uxdesign.cc

Bootstrap Dropdown Hover

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

Зависимости компонентов

Требуются файлы jQuery, Bootsrap 3.x CSS и JavaScript. Зависит от компонента Bootstrap Dropdown и animate.css, если вы хотите использовать анимацию.

Установка

Просто включите стиль Dropdownhover и файлы сценариев после Bootstrap.

 

  <голова>
    
    
    <ссылка href="css/bootstrap.min.css" rel="таблица стилей">
    
    <ссылка href="css/animate.min.css" rel="таблица стилей">
    
  
  <тело>
     
Привет, мир!
 
          
 

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в .dropdown , поскольку это важно. Добавьте data-hover="dropdown" к основной кнопке действия или ссылке, чтобы активировать событие hover .

 <дел>
  
   Раскрывающийся список 
  
  <ул>
    
Действие
    
Другое действие
    

      Еще один раскрывающийся список
      <ул>
        
Действие
        
Другое действие
        

          Еще один раскрывающийся список
          <ул>
          ...
          
        
        
Что-то еще здесь
        
Отдельная ссылка
       
    
    
Что-то еще здесь
    
Отдельная ссылка
  
 

Выравнивание

В основном выпадающее меню позиционируется с помощью CSS, но если выпадающее меню находится за пределами области просмотра, оно позиционируется с помощью JavaScript в соответствии с окном. Также выпадающее меню поддерживает классы .dropdown-menu-right и .pull-right для выравнивания выпадающего меню вправо.

Возможны проблемы с обрезкой

Выпадающее меню использует CSS и JavaScript для позиционирования, но есть некоторые проблемы с «длинными» выпадающими меню на маленьких экранах. Плагин автоматически пытается найти лучшее решение, но есть вероятность, что часть выпадающего списка будет обрезана. Поэтому старайтесь избегать выпадающих меню, которых больше 9.0017 500px высота.

 

  ...

или же

...

 

Tree

Добавьте data-hover="dropdown" в

Анимации

Добавьте data-animations="{bottom} {left} {top} {right}" , чтобы включить пользовательскую анимацию. Использование animate.css также может быть анимировано с помощью пользовательских анимаций, поскольку имена анимаций являются классами CSS для анимаций.

Нижняя анимация DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

Левая анимация DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

Top animation DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

Правая анимация DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

 data-animations="fadeInDown fadeInLeft fadeInUp fadeInRight" 

Create Drop-down Menus for a Touch Screen

Поскольку Amazon Silk работает на устройствах с сенсорным экраном, он не обрабатывает псевдоклассы CSS. :hover так же, как это делает настольный браузер. В десктопном браузере :hover становится совпадением, когда вы наводите указатель на элемент на который установлен :hover . Это поведение полезно для раскрывающихся меню, поскольку вы может создать меню, которое будет скрыто до тех пор, пока пользователь не наведет курсор на родительский элемент. Но на сенсорный экран, такой дизайн меню на основе наведения может привести к проблемам.

Давайте рассмотрим пример. Следующий HTML-документ содержит два ненумерованных списка, одна вложена в другую. Каждый элемент

 
  <голова>
    
  
  <тело>
    <дел>
      <ул>
        
Главная
        
О программе
        
 com/">Навигация
          <ул>
            
Элемент 1
            
Элемент 2
            
Элемент 3