Лого www.SiteHere.ru

Пользовательские стили для выпадающего списка

Пользовательские стили для выпадающего списка

Как владелец сайта, каждый старается сделать любой элемент на сайте особенным, чтобы не быть похожим на сайты конкурентов. По крайней мере мне не нравится чтобы мой сайт был похож еще на чей-то. Хочется чтобы даже маленькая кнопочка была уникальной! И поэтому в этом уроке мы рассмотрим как использовать пользовательские стили для выпадающих списков. Это также один из элементов на сайте, который можно стилизировать как нравится вам и так чтобы стиль выпадающего списка подходил под основной стиль сайта.

Пример можно увидеть здесь:

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

HTML часть

Помните как создается обычный список HTML? Он состоит из тегов <select> и <option>:

1
2
3
4
5
<select>
    <option></option>
    <option></option>
    <option></option>
</select>

Но сейчас нам необходимо обычный список сделать из элементов <span> и <div>:

1
2
3
4
5
6
7
8
9
<div class='selectBox'>
    <span class='selected'></span>
    <span class='selectArrow'></span>
    <div class="selectOptions" >
        <span class="selectOption" value="Option 1">Элемент 1</span>
        <span class="selectOption" value="Option 2">Элемент 2</span>
        <span class="selectOption" value="Option 3">Элемент 3</span>
    </div>
</div>

CSS часть

Сейчас с помощью стилей придадим вид нашему списку:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
div.selectBox {
    position:relative;
    display:inline-block;
    cursor:default;
    text-align:left;
    line-height:30px;
    clear:both;
    color:#888;
}
span.selected {
    width:167px;
    text-indent:20px;
    border:1px solid #ccc;
    border-right:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    background:#f6f6f6;
    overflow:hidden;
}
span.selectArrow {
    width:30px;
    border:1px solid #60abf8;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    text-align:center;
    font-size:20px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background:	#4096ee;
    color:#fff;
}
 
span.selectArrow,span.selected {
    position:relative;
    float:left;
    height:30px;
    z-index:1;
}
 
div.selectOptions {
    position:absolute;
    top:28px;
    left:0;
    width:198px;
    border:1px solid #ccc;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    overflow:hidden;
    background:#f6f6f6;
    padding-top:2px;
    display:none;
}
 
span.selectOption {
    display:block;
    width:80%;
    line-height:20px;
    padding:5px 10%;
}
 
span.selectOption:hover {
    color:#f6f6f6;
    background:#4096ee;	
}

jQuery часть

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

1
2
3
$(document).ready(function() {
    enableSelectBoxes();
});

А реализация данной функции находится ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function enableSelectBoxes(){
    $('div.selectBox').each(function(){
        $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
        $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
 
        $(this).children('span.selected,span.selectArrow').click(function(){
            if($(this).parent().children('div.selectOptions').css('display') == 'none')
            {
                $(this).parent().children('div.selectOptions').css('display','block');
            }
            else
            {
                $(this).parent().children('div.selectOptions').css('display','none');
            }
        });
 
        $(this).find('span.selectOption').click(function(){
            $(this).parent().css('display','none');
            $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
            $(this).parent().siblings('span.selected').html($(this).html());
        });
    });				
}

Вывод

Моё личное мнение: на вашем сайте должно быть всё уникальным, даже input-ы и выпадающие списки. Конечно вы можете со мной не согласиться, но это и делает сайт немного особенным.

Успехов!

Источник: http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

Пользовательские стили для выпадающего списка 5.00/5 (100.00%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

7 комментариев к записи
  • Меховой магазин

    В примере кодировка кривая. Невозможно выбрать первый элемент списка. Уж лучше обычный список, чем красивый, но кривой. Имхо..

     
    • Юрий

      Кодировку поправил.

       
  • Vavanina

    Недостатоток огараничение ширины у выпадающего списка, то есть если select 100px то и выпадающий список тоже 100px, и значение option будет записываться больше одной строке!

     
  • Павел

    Спасибо! 
    Подскажите функцию, которую нужно прописать, выбранный элемент(slected) не отображался в выпадающем списке(selectOptions). Буду признателен!

     
    • Юрий Немец

      Добрый день, Павел!

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

       
  • Сергей

    Здравствуйте, Юрий!

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

    Задача довольно простая, список хочу использовать в качестве кратких анонсов, но применить полноценно не могу, т.к. по умолчанию <span class="selectOption" value="Option 1"> дублируется дважды, сначала просто по умолчанию, а потом при клике после раскрытия этот же заголовок дублируется. Как сделать так, что бы по умолчанию всегда был один заголовок, к примеру "Информация пользователю", а при клике уже открывался непосредственно сам список с разной информацией?

    Так же в Вашем варианте есть возможность кликать по какому либо из <span class="selectOption" value="Option *"> и он при этом ещё и выбирается и попадает в заголовок при закрытии списка, в моем случае это лишнее.

     Во всём остальном все прекрасно!!!

    Очень надеюсь на Вашу помощь, буду с нетерпением ждать ответа либо на данной ветке, либо на почту, как Вам будет удобно.

     

    Заранее благодарен!!

    С уважением, Сергей.

     
    • Юрий Немец

      Здравствуйте, Сергей!

      Какую CMS вы используете?

      При использовании любой CMS у вас есть возможность влиять на цикл вывода записей на сайте. И внутри цикла вам необходимо настроить вывод записей с миниатюрами.

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

      Но это всегда можно сделать либо при выводе записей в вашей CMS системе, либо с помощью JS скрипта "вырезать" из списка выбранный элемент.

       

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *