Html кнопка с раскрывающимся списком. Горизонтальное выпадающее меню

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

Сегодня мы разберем один из таких примеров оформления поля выбора, применяя HTML/CSS и иконку Font Awesome . Но начнем мы как обычно с разметки документа.

HTML-код

Внутри тега select находятся пункты выпадающего списка option . В свою очередь теги select и form вложены в общий контейнер div . Тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер.







Позиционируем контейнер с классом box в центре окна.

Box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Заранее подключаем иконочный шрифт до закрывающего тега head .

Стилизация селектора select

Задаем размеры для поля выбора - 250x50 пикселей и делаем поля для пунктов по 10 пикселей со всех сторон.

Box select{
width: 250px;
height: 50px;
padding: 10px;
}

Убираем рамку и обводку:

Border: none;
outline: none;

Прописываем фиолетовый цвет фона, название, цвет и размер шрифта для списков.

Background: #ab05af;
font-family: "Russo One", sans-serif;
color: #fff;
font-size: 20px;

Создаем вокруг поля тень.

Box-shadow: 0 5px 20px rgba(0,0,0,.3);

В целом select box готов и работает, но смотрится он скучно, да и треугольник, в который нужно будет попасть мышкой очень маленький. А если я так подумал, значит и дизайнер так же подумает, надо заранее подготовиться к разным вариантам.

Вероятнее всего дизайнер поставит на место крошечного треугольника - иконку из шрифта Font Awesome .

Так намного красивее смотрится, а писать код все равно надо верстальщику. Какое здесь может быть решение? Мы не будем трогать HTML-код , а задействуем псевдо-элемент before .

Псевдо-элемент before для.box

Первое, что надо сделать - это прописать код иконки и название шрифта "Font Awesome 5 Free" . Выбираем на сайте fontawesome.com нужную иконку, обозначающую "выбор" и копируем её код.



.box::before {
content: "\f150";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 28px;
background: #da00e0;
pointer-events: none;
}

Далее позиционируем абсолютно, указываем размеры 50x50, белый цвет у иконки, фон светло-фиолетовый. Задаём очень важное свойство pointer-events: none . Это значит, что псевдо-элемент before не является объектом события мыши, а значение none предлагает событию "выбора мышью" проходить на нижний слой и обращаться к элементу, находящемуся под ним - к тому маленькому треугольнику. Треугольник никуда не исчез, просто он находится под псевдо-элементом before , служащий лишь украшательством. Кликая по красивой иконке, на самом деле срабатывает "некрасивый" треугольник и мы делаем свой выбор.

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

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

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

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

В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили

Использование атрибута value

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

В следующем примере мы создадим выпадающий список с атрибутом value :


Посмотреть онлайн демо-версию и код

Для тега

Пример получения доступа к выбранному варианту в JavaScript

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


Посмотреть онлайн демо-версию и код

Для option value HTML используется следующий код:

Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега

Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :

var selectedcolor = $("#jqueryselect option:selected").text();

Также можно получить доступ к значению с помощью JQuery-метода $.val() :

var selectedcolor = $("#jqueryselect").val();

Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.

Пример получения значения в скрипте PHP

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

А вот как PHP-скрипт используется, чтобы получить значение HTML select option :

". $_POST["selphp"].""; } ?>

Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .

Определение стилей выпадающего списка с помощью CSS

Теперь рассмотрим, как определить стили выпадающего списка type ="checkbox" id ="el-1" name ="el-1" value ="donut" >

Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом.

CSS

.wrapper-dropdown-4 {
/* Size and position */
position : relative ;
width : 270px ;
margin : 0 auto ;
padding : 10px 10px 10px 30px ;

/* Styles */
background : #fff ;
border : 1px solid silver ;
cursor : pointer ;
outline : none ;
}

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

.wrapper-dropdown-4 :after {
content : "" ;
width : 0 ;
height : 0 ;
position : absolute ;
right : 10px ;
top : 50% ;
margin-top : -3px ;
border-width : 6px 6px 0 6px ;
border-style : solid ;
border-color : #ffaa9f transparent ;
}

Стили для выпадающего списка такие же, как и в предыдущих примерах:

.wrapper-dropdown-4 .dropdown {
/* Size & position */
position : absolute ;
top : 100% ;
margin-top : 1px ; /* border of wrapper */
left : -1px ;
right : -1px ;

/* Styles */
background : white ;
border : 1px solid silver ;
border-top : none ;
list-style : none ;
transition: all 0.3s ease-out;

/* Hiding */
opacity: 0 ;
pointer-events: none ;
}

Мы должны установить margin-top равный 1px, потому что мы должны немного сдвинуть его вниз из-за границы обертки.

.wrapper-dropdown-4 .dropdown li {
position : relative ; /* Enable absolute positioning for checkboxes */
}

.wrapper-dropdown-4 .dropdown li label {
display : block ;
padding : 10px 10px 10px 30px ; /* Same padding as the button */
border-bottom : 1px dotted #1ccfcf ;
transition: all 0.3s ease-out;
}

.wrapper-dropdown-4 .dropdown li:last-of-type label {
border : none ;
}

.wrapper-dropdown-4 .dropdown li input /* Checkboxes */ {
position : absolute ;
display : block ;
right : 10px ;
top : 50% ;
margin-top : -8px ;
}

/* Hover state */

.wrapper-dropdown-4 .dropdown li:hover label {
background : #f0f0f0 ;
}

/* Checked state */

.wrapper-dropdown-4 .dropdown li input: checked ~ label {
color : grey;
text-decoration : line-through ;
}

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

Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.

У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.

/* красные линии с псевдо-элементами */
.wrapper-dropdown-4 .dropdown :before ,
.wrapper-dropdown-4 :before {
content : "" ;
width : 4px ;
height : 100% ;
position : absolute ;
top : 0 ;
left : 15px ;
border : 1px solid #ffaa9f ;
border-top : none ;
border-bottom : none ;
z-index : 2 ;
}

/* Или: */
/* красные линии при помощи градиента */

.wrapper-dropdown-4 .dropdown,
.wrapper-dropdown-4 {
background : linear-gradient(left , white 5% , #ffaa9f 5% , #ffaa9f 5.3% , white 5.3% , white 6.5% , #ffaa9f 6.5% , #ffaa9f 6.8% , white 6.8% ) ;
}

.wrapper-dropdown-4 .dropdown li:hover label {
background : linear-gradient(left , #f0F0F0 5% , #ffaa9f 5% , #ffaa9f 5.3% , #f0F0F0 5.3% , #f0F0F0 6.5% , #ffaa9f 6.5% , #ffaa9f 6.8% , #f0F0F0 6.8% ) ;
}

Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10).

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

/* Active state */

.wrapper-dropdown-4 .active :after {
border-width : 0 6px 6px 6px ;
}

.wrapper-dropdown-4 .active .dropdown {
opacity: 1 ;
pointer-events: auto ;
}

JavaScript

function DropDown(el) {
this .dd = el;
this .opts = this .dd .find ("ul.dropdown > li" ) ;
this .val = [ ] ;
this .index = [ ] ;
this .initEvents () ;
}
DropDown.prototype = {
initEvents : function () {
var obj = this ;

Obj.dd .on ("click" , function (event) {
$(this ) .toggleClass ("active" ) ;
event.stopPropagation () ;
} ) ;

Obj.opts .children ("label" ) .on ("click" , function (event) {
var opt = $(this ) .parent () ,
chbox = opt.children ("input" ) ,
val = chbox.val () ,
idx = opt.index () ;

($.inArray (val, obj.val ) !== - 1 ) ? obj.val .splice ( $.inArray (val, obj.val ) , 1 ) : obj.val .push ( val ) ;
($.inArray (idx, obj.index ) !== - 1 ) ? obj.index .splice ( $.inArray (idx, obj.index ) , 1 ) : obj.index .push ( idx ) ;
} ) ;
} ,
getValue : function () {
return this .val ;
} ,
getIndex : function () {
return this .index ;
}
}

Пример 5

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

HTML-разметка

id ="dd" class ="wrapper-dropdown-5" tabindex ="1" > Иван Иванов