Блог

Привет, народ! Сегодня мы поговорим о чем то немного более практичном, чем обычные переключатели открывающие списки. Цель этого урока показать, как создавать красивые выпадающие списки без использования изображение, на чистом css. Добавим некоторые строки jQuery, чтобы это все работало.

С чего же мы начнем?

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

Code

<div class="wrapper-dropdown">
  <span>I'm kinda the label!</span>
  <ul class="dropdown">
  <li>I'm hidden!</li>
  <li>Me too!</li>
  <li>So do I.</li>
  </ul>
</div>

JavaScript

Нам нужен JavaScript. чтобы все работало так, как нам надо. Так как для всех вариантов демонстрации JS одинаковый , рассмотрим его сейчас :

Code

//...

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 . Мы предотвращаем такой сценарий, остановив его. Довольно просто, не так ли ? smile

Приступим к примерам

Пример 1

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

Разметка

Нам нужно несколько вещей: Обертка (div блок) , скрытый список, и "ярлык", который расположим в конце diva справа. Мы используем якоря, что семантически правильно для меня, но мы могли бы также использовать другие теги.

Code

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
  <span>Выберите пол</span>
  <ul class="dropdown">
  <li><a href="#">Мужской</a></li>
  <li><a href="#">Женский</a></li>
  </ul>
</div>

CSS

Приступи к css оформлению. Начнем с оболочки:

Code

.wrapper-dropdown {
  /* Size and position */
  position: relative; /* Enable absolute positioning for children and pseudo elements */
  width: 200px;
  padding: 10px;
  margin: 0 auto;

  /* Styles */
  background: #9bc7de;
  color: #fff;
  outline: none;
  cursor: pointer;

  /* Font settings */
  font-weight: bold;
}

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

Давайте закончим с "лейблом", добавив не большую стрелку справа как псевдо-элемент (стиль = юез дополнительных разметок):

Code

.wrapper-dropdown:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent #fff;
}

Я думаю, мы все знаем, как создать маленький треугольник с помощью css, используя некоторые трюки. Это обрезание( звучит конечно не как хотелось бы) , но работу свою выполняет на все 100%, так почему бы и нет ? smile

Но ничего особенного в кнопке нету.
У нас есть красивая небольшая кнопка, но без анимация фактического раскрываемого списка, не имеет никакого смысла вставлять стрелочку без анимации. Итак! Давайте разберемся с нашим списком:

Code

.wrapper-dropdown-1 .dropdown {
  /* Size & position */
  position: absolute;
  top: 100%;
  left: 0; /* Size */
  right: 0; /* Size */

  /* Styles */
  background: #fff;
  font-weight: normal; /* Overwrites previous font-weight: bold; */

  /* Hiding */
  opacity: 0;
  pointer-events: none;
}

Что мы только что сделали? Мы присвоили списку абсолютное позиционирование и поставили его позади кнопки (top: 100%;). Мы дали ему такую же ширину как и кнопке, отступы слева и справа установлены с значением 0. И что еще более важно, мы скрываем это, устанавливая его прозрачность до 0. Как на счет указателя событий? Если вы чего то не видите, это не означает, что его там нет.
Приведем несколько стилей внутри элементов выпадающего списка:

Code

.wrapper-dropdown-1 .dropdown li a {
  display: block;
  text-decoration: none;
  color: #9e9e9e;
  padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
  background: #f3f8f8;
}

Итак, у нас есть хорошая кнопка и скрытые списки. Теперь мы имеем дело с открытыми списками, когда вы нажимаете на кнопку, чтобы показать варианты.
С JavaScript мы переключаем класс .active, при нажатии на кнопку, и на основе этого класса мы можем изменить наш CSS, чтобы показать скрытые списки:

Code

/* Active state */
.wrapper-dropdown-1.active .dropdown {
  opacity: 1;
  pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
  border-color: #9bc7de transparent;
  border-width: 6px 6px 0 6px ;
  margin-top: -3px;
}

.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

JavaScript

Последнее, но не менее важное, мы должны добавить еще фрагмент JavaScript, для правильной работы:

Code

Здесь все просто: при нажатии на элемент мы получаем его значение и отображаем его в "ярлыке".