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

$('.room_hover').hover(function()< $('.select_menu').show(200); >, function()< $('.select_menu').hide(200); >);

// Предотвращение закрытия подменю $('.navbar-main-menu > li, .sub-menu').on('mouseover', function() < clearTimeout(menuItemOpenedTimeout); >); // Закрытие всех подменю через 300 миллисекунд в случае покидания мышкой зоны родительского пункта меню $('.navbar-main-menu > li').on('mouseleave', function() < menuItemOpenedTimeout = setTimeout(function() < $('.sub-menu').hide(); >, 300); >); // Открытие подменю $('.navbar-main-menu > li').on('mouseover', function() < // Закрытие всех открытых подменю $('.sub-menu').hide(); // Открытие текущего подменю $(this).find('.sub-menu').show(); >);

.faqs-container <
margin: 0 auto;
max-width: 600px;
>

.faq <
background-color: transparent;
border: 1px solid #9FA4A8;
border-radius: 10px;
padding: 30px;
position: relative;
overflow: hidden;
margin: 20px 0;
transition: 0.3s ease;
>

.faq.active <
background-color: #fff;
box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
>

.faq.active::after, .faq.active::before <
color: #2ecc71;
content: ‘\f075’;
font-family: ‘Font Awesome 5 Free’;
font-size: 7rem;
position: absolute;
opacity: 0.2;
top: 20px;
left: 20px;
z-index: 0;
>

.faq.active::before <
color: #3498db;
top: -10px;
left: -30px;
transform: rotateY(180deg);
>

.faq-title <
margin: 0 35px 0 0;
>

.faq-text <
display: none;
margin: 30px 0 0;
>

.faq.active .faq-text <
display: block;
>

.faq-toggle <
background-color: transparent;
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 0;
position: absolute;
top: 30px;
right: 30px;
height: 30px;
width: 30px;
>

.faq-toggle:focus <
outline: none;
>

.faq.active .faq-toggle <
background-color: #9FA4A8;
>

.faq-toggle .fa-times <
display: none;
>

.faq.active .faq-toggle .fa-times <
display: block;
>

.faq-toggle .fa-chevron-down <
color: #83888E;
>

.faq.active .faq-toggle .fa-chevron-down <
display: none;
>

const toggles = document.querySelectorAll(‘.faq-toggle’);

toggles.forEach(toggle => <
toggle.addEventListener(‘click’, () => <
toggle.parentNode.classList.toggle(‘active’);
>);
>);

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

Делаем выпадающий список (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:

option < padding-left: 20px; padding-top: 3px; padding-bottom: 3px; >option:hover < background-color: #eee; >.icon-ok < background: url('../images/icon-ok.png') no-repeat; background-size: 20px; padding-left: 20px; background-position: 0 1px; >.icon-error < background: url('/../images/icon-fail.png') no-repeat; background-size: 20px; padding-left: 20px; background-position: 0 1px; >

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

 
Некая пользовательская настройка (обычный список) 
 
  Вкл.  Выкл.  
 
Некая пользовательская настройка (мультисписок с картинками внутри) 
 
  Вкл.  Выкл.  
 
Некая пользовательская настройка (мультисписок на основе 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 < width: 200px; >option < padding-left: 20px; padding-top: 3px; padding-bottom: 3px; >option:hover < background-color: #eee; >.icon-ok < background: url('../images/icon-ok.png') no-repeat; background-size: 20px; padding-left: 20px; background-position: 0 1px; >.icon-error < background: url('/../images/icon-fail.png') no-repeat; background-size: 20px; padding-left: 20px; background-position: 0 1px; >select.icon-ok, select.icon-error

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

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

 
Некая пользовательская настройка 
 
 Вкл. Выкл.  
 

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

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

// Функция очистки класса function cleanSelect (select) < // Очищаем от стилей return $(select).removeClass('icon-ok').removeClass('icon-error') >// Формируем select и его обработчики function formSelect() < // получаем выпадающий список с уже очищенными классами var select = cleanSelect('.select-events'); // Добавляем класс, который соответствует выбранному элементу select.addClass(select.val() == '1' ? 'icon-ok' : 'icon-error'); // Добавляем стили, чтобы у списка не было видно полосы прокрутки select.css(< height: 'auto', overflow: 'hidden', zIndex: '40000' >); // Определяем обработчик на событие ухода мышки с области элемента select.on('mouseleave', function () < // Устанавливаем обычный размер this.size = 1; // Добавляем класс стиля в соответствии с выбранным элементом cleanSelect(this).addClass($(this).val() == '1' ? 'icon-ok' : 'icon-error'); >); // Определяем обработчик на событие ухода мышки с области элемента select.on('mouseover', function () < // Очищаем стиль списка, чтобы он не мешал отображению cleanSelect(this); // Устанавливаем размер, равный количеству элементов this.size = $(this).find('option').length; >); > // После загрузки DOM - получаем список $(function () < formSelect(); >);

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

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

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

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