Ние създаваме стилни падащи списъци. Избиране от падащ списък в HTML падащ списък при задържане на css

CSS

.wrapper-dropdown-5 {
/* Размер и позиция */
позиция: роднина;
ширина: 200 пиксела;
марж: 0 Автоматичен;
подплата: 12px 15px;

/* Стилове */
заден план: #Ф ф ф;
граница-радиус : 5px;
кутия-сянка : 0 1px 0 rgba (0 , 0 , 0 , 0.2 ) ;
курсор: показалец;
контур: нито един;
преход : всички 0.3s леко изключване ;
}

.wrapper-dropdown-5:след{ /* Малка стрелка */
съдържание: "" ;
ширина: 0 ;
височина: 0 ;
позиция: абсолютен;
Горна част: 50% ;
точно: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
граничен стил: твърдо;
цвят на границата: #4cbeff прозрачен;
}

Това са основните стилове. Сега нека да преминем към падащия списък, който е малко по-различен от обичайния.

.wrapper-dropdown-5 .падащо меню {
/* Размер и позиция */
позиция: абсолютен;
Горна част: 100% ;
наляво: 0 ;
точно: 0 ;

/* Стилове */
заден план: #Ф ф ф;
граница-радиус : 0 0 5px 5px;
граница: 1px твърдо rgba (0 , 0 , 0 , 0.2 ) ;
граница-отгоре: нито един;
граница-отдолу: нито един;
стил на списък: нито един;
преход : всички 0.3s леко изключване ;

/* Укриване */
максимална височина: 0 ;
препълване: скрит;
}

Този път не променихме непрозрачността на 0, за да скрием менюто. Задаваме max-height на 0 и overflow: hidden. Защо зададохте максимална височина, а не височина? Тъй като не знаем точната височина на разширения списък.

Прости стилове за елементи от списък.

.wrapper-dropdown-5 .падащо менюли {
подплата: 0 10px ;
}

.wrapper-dropdown-5 .падащо менюли а {
дисплей: блок;
текст-украса: нито един;
цвят: #333 ;
подплата: 10px 0 ;
преход : всички 0.3s леко изключване ;
граница-отдолу: 1px твърдо #e6e8ea;
}

.wrapper-dropdown-5 .падащо менюли :последен от типа {
граница: нито един;
}

.wrapper-dropdown-5 .падащо менюли аз {
margin-right: 5px;
цвят: наследяват;
вертикално подравняване: средата;
}

/* Състояние на задържане */

.wrapper-dropdown-5 .падащо менюли :задръжтеа {
цвят: #57a9d9;
}

И сега, в активно състояние:

/* Активно състояние */

.wrapper-dropdown-5.активен {
граница-радиус : 5px 5px 0 0 ;
заден план: #4cbeff;
кутия-сянка : нито един;
граница-отдолу: нито един;
цвят: бяло;
}

.wrapper-dropdown-5.активен:след{
цвят на границата: #82d1ff прозрачен;
}

.wrapper-dropdown-5.активен .падащо меню {
граница-отдолу: 1px твърдо rgba (0 , 0 , 0 , 0.2 ) ;
максимална височина: 400 пиксела;
}

Когато падащото меню е отворено, променяме долните ъгли на бутона, цвета му, посоката на стрелката и цвета на стрелката и премахваме сянката и границите.
И за да покажем менюто, задаваме максималната височина на падащото меню на 400px. Можем да го зададем на 500px или 1000px, няма значение.

JavaScript

функцияПадащо меню (ел ) {
това.дд = ел ;
това.initEvents() ;
}
Падащо меню. прототип = {
initEvents : функция() {
варобект = това;

об. дд.На("клик", функция(събитие ) {
$(това) .toggleClass("активен") ;
събитие. stopPropagation() ;
} ) ;
}
}

обратна съвместимост

Така че сега имаме 5 падащи менюта, които работят чудесно, но какво да кажем за по-старите браузъри?
Тези браузъри не разбират например свойството opacity.

Библиотеката Modernizr ще ни помогне с това. Казано направо, за тези, които не знаят, Modernizr е JavaScript библиотека, която излага поддържаните от HTML5 и CSS3 свойства на браузъра на потребителя.

Благодарение на това можем да "кажем" на браузъра, ако не поддържате *this* свойство, тогава направете следното. По-долу е даден пример за това как можем да управляваме стила за браузъри, които не поддържат определени CSS свойства:

/* Няма поддръжка за CSS3 */

.без непрозрачност .wrapper-dropdown-1.падащо меню ,
.no-pointerevents .wrapper-dropdown-1 .падащо меню {
дисплей: нито един;
непрозрачност : 1 ; /* Ако се поддържа непрозрачност, но не се поддържат указателни събития */
показалец-събития : Автоматичен; /* Ако се поддържат указателни събития, но не се поддържат указателни събития */
}

.без непрозрачност .wrapper-dropdown-1.активен.падащо меню ,
.no-pointerevents .wrapper-dropdown-1.активен .падащо меню {
дисплей: блок;
}

Ако браузърът не поддържа opacity или pointer-events, тогава се използва свойството display: block;. И така нататък.

Заключение.

Надявам се, че тази статия ви помогна да разберете как да създавате персонализирани падащи менюта. Както можете да видите, това е съвсем просто.

Демонстрация

Ако имате въпроси, препоръчваме да използвате нашия форум, за да получите отговор възможно най-бързо

Прост падащ списък в HTML е лесен за създаване с помощта на маркера select. Това е контейнерен таг; в него са вложени тагове за опции - те са тези, които дефинират елементите на списъка.

Има няколко опции за списъци, които могат да бъдат направени с помощта на маркера за избор: падащ списък (опциите се появяват след щракване върху главното поле или задържане на курсора на мишката върху него) и списък с множество възможности за избор - в който потребителят може да избере няколко елемента. Първите са по-често срещани, те са важен елемент от навигацията на съвременните сайтове. Може да се използва падащ списък с множество избори, например в каталози, където трябва да изберете няколко характеристики на даден продукт.

Можете да промените външния вид и свойствата на списъците, като използвате универсални и специални атрибути.

Изберете атрибути на етикета

1. Множество - задава множествен избор.

2. Размер - задава броя на видимите редове в списъка, тоест височината. И тук всичко зависи от това дали множественият атрибут присъства или не. Ако отговорът е „да“ и не посочите размер, тогава ако има множество, потребителят ще види всички възможни опции за избор, но ако липсва множество, тогава ще бъде показан само един ред и посетителят ще може да прочете останалите, когато той кликва върху иконата на асансьора от дясната страна. Ако размерът на височината е зададен и е по-малък от броя на опциите, тогава вдясно ще се появи лента за превъртане.

3. Име - име. Падащият списък може и без него, но може да е необходимо да взаимодействате с програмата за манипулиране на сървъра. По правило името все още е посочено.

Тагът select няма задължителни атрибути, за разлика от тага option.

Вложени атрибути на таг за опции

1. Избрано - предназначено за подчертаване на елемент от списъка. Потребителят ще може да избере повече от един елемент, ако е зададен множественият атрибут (вижте по-горе).
2. Стойност - стойност. Този атрибут е задължителен. Уеб сървърът трябва да разбере кои елементи от списъка е избрал потребителят.
3. Етикет. Този атрибут може да се използва за съкращаване на елементи от списък, които са твърде дълги. Например на екрана ще се покаже „Милано“ вместо „Милано е административният център на Ломбардия“, посочено в етикета за опции. Северна Италия“. Този атрибут се използва и за групиране на елементи в списък.

Що се отнася до ширината на списъка, тя е зададена по подразбиране на дължината на най-широкия текст в списъка. Разбира се, ширината може да се променя с помощта на HTML стилове.

Падащ списък по други начини

Може да се направи с помощта на CSS, например ще се появи списък, когато задържите курсора на мишката върху елемент от страницата. Отлични възможности за създаване на списъци се предоставят от JavaScript, който е опростен от библиотеката Jquery. Падащ списък, свързан с тази библиотека, може да бъде много сложен, например каскаден. Тоест, когато изберете елемент в един списък, се появява следният списък, например има елемент от менюто „Дамско облекло“ (когато задържите курсора на мишката върху него, тогава когато изберете един от типовете, например „Връхни дрехи“ ”, отпада списък с елементи: якета, паркове, палта, къси палта, кожени палта и др.

Повърхностно изброихме основните начини, по които можете да създадете падащ списък. Разбира се, в JavaScript има много нюанси, които ви позволяват да промените функционалността и външния вид на списъците.

Често начинаещите се сблъскват с проблема с проектирането на падащ списък. Точно както с оригинала изберетене можеш да направиш нищо специално. Тогава то идва на помощ jQuery, и тогава можете да правите почти всичко.

Ами ако ви кажа, че е възможен и стандартен? HTMLНе е лошо да проектирате падащ списък по изчистен начин CSS?

Падащ списък в HTML

Цветът на фона и текста може да се променя и това се прави много лесно.

Шерлок Холмс Великият Гетсби В като Вендета Вълкът от Уолстрийт Спектър на утехата

IN педядобавихме 2 класа, един основен, който ще съдържа всички основни стилове “ персонализирано падащо меню“, а вторият е голям, което ще определи размера падащ списък. Можем да подготвим да речем 3 размера предварително, големи, средни, малки, определени в стилове размер на шрифта. И не се притеснявайте в бъдеще. Можете да пропуснете това, всичко зависи от вашия дизайн на сайта.

Тяло ( фон: #2a2a2b; цвят: #fff; подравняване на текст: център; семейство шрифтове: Arial, Helvetica; ) .big (размер на шрифта: 1.2em; ) /* Персонализирано падащо меню */ .custom-dropdown ( позиция : относителен; дисплей: вграден блок; вертикално подравняване: по средата; поле: 10px; /* само демонстрация */) .custom-dropdown select ( курсор:показател; цвят на фона: #2980b9; цвят: #fff; шрифт- размер: наследяване; padding: .5em; padding-right: 2.5em; border: 0; margin: 0; border-radius: 3px; text-indent: 0.01px; text-overflow: ""; -webkit-appearance: бутон ; /* скриване на стрелката по подразбиране в chrome OSX */) .custom-dropdown::before, .custom-dropdown::after ( съдържание: ""; позиция: абсолютна; pointer-events: няма;) .custom-dropdown:: след ( /* Персонализирана падаща стрелка */ съдържание: "\25BC"; височина: 1em; размер на шрифта: .625em; височина на реда: 1; дясно: 1.2em; горе: 50%; margin-top: -.5em ; ) .custom-dropdown::before ( /* Покриване на персонализирана падаща стрелка */ width: 2em; дясно: 0; горе: 0; долу: 0; border-radius: 0 3px 3px 0; ) .custom-dropdown select ( цвят: rgba(0,0,0,.3); ) .custom-dropdown select::after (цвят: rgba(0,0,0,.1); ) .custom-dropdown::before (фонов цвят: rgba(0,0,0,.15); ) .custom-dropdown::after ( цвят: rgba(0,0,0,.4); )

Ако не искате да се занимавате и да изучавате стилове, просто го добавете към вашия сайт и променете цвета, за да съответства на дизайна на вашия сайт. Тогава просто сте в стил " .custom-dropdown select” трябва да промените стойностите Цвят на фонаИ цвят