Корректная верстка выпадающего списка по клику

Вопрос-ответ HTML/CSS
1

Добрый день!

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

  1. список с выбором языка;
  2. список с выбором валюты (денежной единицы отображения стоимости товара);
  3. список с выбором телефона службы поддержки, в зависимости от региона/города/страны;

Все списки выпадают по клику. Вариантов верстки подобных списков в просторах интернета достаточно: от банального select (option) до создания обыкновенного ненумерованного списка ul>li и “прикручивания” к нему JS.

Вопрос в том как “правильно” делаются/верстаются подобные списки?

2

Считаю что единственного “правильного” подхода не существует.

Иногда делают выпадающие списки вообще без скрипта, изменяя display при наведении на элемент списка. https://jsfiddle.net/a18xtzco/. При этом не принципиально какие элементы разметки используются для списка (кроме, разве, навигации, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav).

Иногда лучше воспользоваться стандартным select https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select. Он лучше тем, что в браузер встроены подходы для работы с этим контролом (им можно управлять с помощью клавиатуры). Этот подход должен быть использован в первую очередь.

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

3

А если необходимо, чтобы в списке все значения имели иконка + текст, например название страны и иконка флага, (select вроде такое не поддерживает) и выбранное значение в итоге было показано тоже с икнкой+название пункта списка? как тогда быть?

4

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

5

Спасибо за ответ. Плагинов очень много, но все не то, что надо. Решил по Вашему совету написать свой.
Вот что получилось
http://jsfiddle.net/gorbuz9kin/m7gxk5s4/

Сделал через ul>li. подскажите как теперь передать значение пункта li при клике на него в span class=“title” ?

6

Если на проекте используется MVC фреймверк, лучше всего работу с данными сделать через модели. Если готовых инструментов для создания моделей нет, проще хранить информацию о выбранном языке и возможных к выбору языков в DOM-е с помощью data- аттрибутов. http://jsfiddle.net/m7gxk5s4/4/

7

А посоветовать какие можете? Например для JQuery.

8

Я не имею опыта применения этих плагинов, и основываю свое предложение по фактору наличия коммьюнити у плагина, и его возможностях
Например этот http://harvesthq.github.io/chosen/ подходит под описание требований в топике.