Лого www.SiteHere.ru

Красивый выпадающий список для сайта — делаем выпадающий список

Красивый выпадающий список для сайта

Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.

Выпадающий список для сайта

Не самое простое решение я рассматривал в январе этого года 🙂 :

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

Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .

В разметке списка ничего необычного:

1
2
3
4
5
6
7
8
9
10
<section>
    <label class="select-label">Выберите своего динозавра:</label>
    <select class="cs-select cs-skin-rotate">
        <option value="1">Стегозавр</option>
        <option value="2">Велоцираптор</option>
        <option value="3">Спинозавр</option>
        <option value="4">Археоптерикс</option>
        <option value="5">Апатозавр</option>
    </select>
</section>

Как говорится: <select> он и в Африке <select>. Внутри него есть теги <option>, в которых находятся элементы списка.

В некоторых примерах вы можете увидеть необычные атрибуты, типа data-class или data-link. Здесь нечего боятся, они нужны для правильного функционирования соответствующего списка, потому что там может храниться дополнительная информация.

Пройдемся немного по стилям.

Основные стили находятся в файле cs-select.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
68
69
70
71
72
73
74
@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;
}

А находятся эти стили в отдельном файле (для удобства) cs-skin-border.css.

Вывод

Чего только не сделаешь ради неповторимого дизайна своего сайта! И главное — не бойтесь экспериментировать с дизайном, постоянно улучшайте его. Вдруг вы создадите (путем экспериментов) именно тот, который понравится вашим пользователям и они скажут «Вау, мне нравится этот дизайн, что же еще интересного есть на этом сайте!» 😉 .

Успехов!

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

Источник: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

Красивый выпадающий список для сайта — делаем выпадающий список 4.64/5 (92.73%) 11 голос(ов)

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

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

    Очень полезно, спасибо! 😎

     
  • Сергей

    Учусь… учусь … учусь! … Юра, спасибо за предоставленные возможности! 😎

     
  • Сергей

    Красиво это одно, но как их заставить действие какое нибудь выполнять, например по ссылке перейти или даже в форму вставляешь (она их не видит)!!! 😐

     
  • Михаил1111

    не получается установить, не могу с хтмл кодом разобраться где он вообще? Устанавливаю круг index8

     
    • Юрий

      Михаил, HTML код находится в самом начале статьи, сразу под кнопками демо. Также Вы можете скачать архив с исходниками и посмотреть как там сделано. Если не получается что-то сделать, Вы можете записаться на консультацию — записаться на консультацию.

       
  • Ната

    Добрый день,

    хороший сайт, инетресные примеры.

    Есть у вас подписка на новые статьи? С удовольствием заходила бы время от времени почитать-посмотреть, если бы напоминали о себе.

    Спасибо

     
    • Юрий

      За новостями можно следить подписавшись на FeedBurner — ЗДЕСЬ.

       
  • Алексей

    Как же применить какое либо действие к этим кнопкам? 

     
    • Юрий Немец

      Для этого используйте jQuery и событие по клику.

       
      • Алексей

        Понял.

        А покажите пожалуйста хоть небольшой пример, а то я нуб.

         
        • Юрий Немец

          Подключаете jQuery и затем между тегами <script> и </script>:

          $( document ).ready(function() {
              $( ".cs-options ul li:first-child" ).click(function() {
                  window.open('http://www.sitehere.ru', '_blank');
              });
          });

          Где ".cs-options ul li:first-child" — это селектор элемента, на который мы кликаем.

           
          • Алексей

            Спасибо!

             
          • Константин

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

             
            • Александр

              Используйте css-селекторы nth-of-type(n), чтобы добраться до каждого пункта. Например:

              <section>
                  <label class="select-label">Выберите своего "динозавра":</label>
                  <select class="cs-select cs-skin-rotate">
                      <option value="1">Яндекс</option>
                      <option value="2">Гугл</option>
                      <option value="3">Мейл</option>
                  </select>
              </section>
              $( document ).ready(function() {
                  $( ".cs-options ul li:nth-of-type(1)" ).click(function() {
                      window.open('https://www.yandex.ru/', '_blank');
                  });
                  $( ".cs-options ul li:nth-of-type(2)" ).click(function() {
                      window.open('https://www.google.ru/', '_blank');
                  });
                  $( ".cs-options ul li:nth-of-type(3)" ).click(function() {
                      window.open('https://mail.ru/', '_blank');
                  });
              });
               
  • Артём

    Здравствуйте, Юрий! Не подскажите, как подружить ваши списки с плагином chained-select для создания связанных списков?

    http://sunstorm.tk/test/muse9-2b/

     
    • Юрий Немец

      Артем, добрый день!

      Списки, которые вы видите в этом примере — это лишь внешнее оформление. Необходимо лишь скопировать стили в ваш файл стилей, и задать необходимо классы для ваших элементов.

       
  • Сергей

    Здравствуйте! Весьма интересный модуль, красиво работает.

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

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

     
    • Сергей

      Спасибо, уже не нужно. Подключил jquery.formstyler, он сам подхватывает нужные события.

       
  • Алексей

    Здравствуйте! Подскажите, пожалуйста, как правильно использовать несколько списков на одной странице?

    В чем проблема: если установить три списка подряд на одной странице, при этом перенести всё как есть в Вашем примере, то при открытии опций первого и второго списка видны "селекты" в первом случае второго и третьего списка, во втором третьего. Только последний "селект" открывается корректно.  

    Буду признателен за ответ

     
    • Юрий Немец

      Добрый день, Алексей!

      Вот пример, который получился у меня:

      Все select-ы работают. Разместил на jsfiddle (ссылка), чтобы вы могли в первой вкладке увидеть исходный код HTML.

       
  • Роман

    А можно узнать каким образом можно реализовать, чтобы к примеру есть список и при выборе нужной выводится описание того, что было выбрано?

     
    • Юрий Немец

      Здравствуйте, Роман!

      Можно)

      Вы хотите выводить описание выбранного элемента в произвольный блок (например, div)? Если да, то вам необходимо использовать jQuery, с помощью этой библиотеки это сделать проще всего.

      1) Можно добавить data-* атрибут для каждого элемента списка

      2) Определяете какой из элементов списка был выбран

      3) С помощью jQuery подставляете информацию из data-* атрибута в блок div.

       
      • Роман

        Спасибо) А генератора случайно никакого нет для таких вопросов?)

         
        • Юрий Немец

          Все же остались вещи, которые нужно делать руками. 🙂

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

           
  • Роман

    Нашел то, что искал, сделал, но появился вопросик, я так понимаю вот этот участок отвечает за обновление:

     

    $(function() {
      $('.jqueryOptions').hide();
    
      $('#choose').change(function() {
        $('.jqueryOptions').slideUp();
        $('.jqueryOptions').removeClass('current-opt');
        $("." + $(this).val()).slideDown();
        $("." + $(this).val()).addClass('current-opt');
      });
    });

    можете подсказать, можно ли как-нибудь изменить эту "анимацию" обновления на другую? Сейчас обновляется перекрытие сверху вниз и снизу верх, а можно ли сделать обычное обновление, чтобы просто одно пропало и другое появилось?

     

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

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