Выпадающий список html css: Стильный выпадающий список на CSS – СSS Выпадающий | Дропшиппинг

Содержание

Создаем стильные выпадающие списки

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

Обратите внимание на некоторые вещи, прежде чем мы начнем:

В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.
Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Чтобы её активировать, необходим следующий фрагмент кода:

*,
*:after,
*:before {
box-sizing: border-box;
}

Итак, с чего же мы начнем.

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

<div>
<span>I’m kinda the label!</span>
<ul>
<li>I’m hidden!</li>
<li>Me too!</li>

JavaScript

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

//…

obj.dd.on(‘click’, function(event){
$(this).toggleClass(‘active’);
return false;
});

//…

$(function() {

var dd = new DropDown( $(‘#dd’) );

$(document).click(function() {
// all dropdowns
$(‘.wrapper-dropdown-1’).removeClass(‘active’);
});

});

Так что же это скрипт делает? Во-первых, он переключает класс .active, когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active, то он добавляется, а если этот класс уже присвоен, то он удаляется.

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

Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!

Пример 1

Давайте начнем с чего-нибудь простого: простой раскрывающийся список для указания пола. Давайте сначала посмотрим на разметку:

HTML-разметка

Нам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и «лейбл», который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег.

<div tabindex=»1″>
<span>Пол</span>
<ul>
<li><a href=»#»>Мужской</a></li>
<li><a href=»#»>Женский</a></li>
</ul>
</div>

CSS

Давайте теперь перейдем к CSS. Начнем с обертки (враппера):

.wrapper-dropdown {
/* размер и положение */
position: relative; /* Enable absolute positioning for children and pseudo elements */

width: 200px;
padding: 10px;
margin: 0 auto;

/* цвет и фон */
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;

/* шрифт */
font-weight: bold;
}

Итак, мы сделали несколько вещей. Сначала мы установили ширину списка и некоторые отступы. Далее, мы задали ему цвет и фон. И, наконец, мы установили параметры для шрифта.

Давайте закончим с «лейблом», добавив небольшую стрелку справа при помощи псевдо-элемента.

.wrapper-dropdown:after {
content: «»;
width: 0;
height: 0;

Оформляем Select CSS! Пользовательские стили для Select на CSS

С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:

HTML КОД

1 2	<link rel="stylesheet" type="text/css" href="css/style.css" /> <script type='text/javascript' src='js/select.js'></script>

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД

<form action="#">
    <p>
        <label>Страны Великобритании:</label>
        <select>
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг. Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

CSS КОД

.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

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

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД

1
2
3

.dropdownvisible {
    height: auto;
}

На это:

CSS КОД

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
✓ Opera 12.14, Opera 12.15, Opera 12.16
✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

1 шаг. Подключаем необходимые файлы
2 шаг. HTML структура элемент Select
3 шаг. Добавляем стили для Select CSS
В каких браузерах этот Select CSS
Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Красивое оформление выпадающего списка на CSS3 и jQuery

@font-face {

font-family: ‘icomoon’;

src:url(‘../fonts/icomoon/icomoon.eot?-rdnm34’);

src:url(‘../fonts/icomoon/icomoon.eot?#iefix-rdnm34′) format(’embedded-opentype’),

url(‘../fonts/icomoon/icomoon.woff?-rdnm34’) format(‘woff’),

url(‘../fonts/icomoon/icomoon.ttf?-rdnm34’) format(‘truetype’),

url(‘../fonts/icomoon/icomoon.svg?-rdnm34#icomoon’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

div.cs-skin-border {

background: transparent;

font-size: 2em;

font-weight: 700;

max-width: 600px;

}

@media screen and (max-width: 30em) {

.cs-skin-border { font-size: 1em; }

}

.cs-skin-border > span {

border: 5px solid #000;

border-color: inherit;

transition: background 0.2s, border-color 0.2s;

}

.cs-skin-border > span::after,

.cs-skin-border .cs-selected span::after {

font-family: ‘icomoon’;

content: ‘\e000’;

}

.cs-skin-border ul span::after {

content: »;

opacity: 0;

}

.cs-skin-border .cs-selected span::after {

content: ‘\e00e’;

color: #ddd9c9;

font-size: 1.5em;

opacity: 1;

transition: opacity 0.2s;

}

.cs-skin-border.cs-active > span {

background: #fff;

border-color: #fff;

color: #2980b9;

}

.cs-skin-border .cs-options {

color: #2980b9;

font-size: 0.75em;

opacity: 0;

transition: opacity 0.2s, visibility 0s 0.2s;

}

.cs-skin-border.cs-active .cs-options {

opacity: 1;

transition: opacity 0.2s;

}

.cs-skin-border ul span {

padding: 1em 2em;

backface-visibility: hidden;

}

.cs-skin-border .cs-options li span:hover,

.cs-skin-border li.cs-focus span {

background: #f5f3ec;

}

Как оформить выпадающий список с помощью CSS?

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

color:green;

}

select {

-webkit-appearance: none;

-moz-appearance: none;

-ms-appearance: none;

appearance: none;

outline: 0;

background: green;

background-image: none;

border:1px solid black;

}

.select {

position: relative;

display: block;

width: 20em;

height: 3em;

line-height: 3;

background: #2C3E50;

overflow: hidden;

border-radius: .25em;

}

select {

width: 100%;

height: 100%;

margin: 0;

padding: 0 0 0 .5em;

color: #fff;

cursor: pointer;

}

select::-ms-expand {

display: none;

}

.select::after {

content: '\25BC';

position: absolute;

top: 0;

right: 0;

bottom: 0;

padding: 0 1em;

background: #34495E;

pointer-events: none;

}

.select:hover::after {

color: #F39C12;

}

.select::after {

-webkit-transition: .25s all ease;

-o-transition: .25s all ease;

transition: .25s all ease;

}

</style>

</head>

<body>

<center>

<h2>GeeksforGeeks</h2>

<div class="select">

<select name="slct" id="slct">

<option>Computer Science Subjects</option>

<option value="1">Operating System</option>

<option value="2">Computer Networks</option>

<option value="3">Data Structure</option>

<option value="4">Algorithm</option>

<option value="5">C programming</option>

<option value="6">JAVA</option>

</select>

</div>

</center>

</body>

</html>

Создаем стильные выпадающие списки

Итак, с чего же мы начнем.

JavaScript

Пример 1

HTML-разметка

CSS

Оформляем Select CSS! Пользовательские стили для Select на CSS

Смотреть примерСкачать

1 шаг. Подключаем необходимые файлы

2 шаг. HTML структура элемента Select

3 шаг. Добавляем стили для Select CSS

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Вывод

Успехов!

Красивое оформление выпадающего списка на CSS3 и jQuery

Как оформить выпадающий список с помощью CSS?

Добавить комментарий Отменить ответ