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

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

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown ), мы просто использовали 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" > Иван Иванов
Примерка © 2024 Edu35ru - Основы работы на персональном компьютере