Народ, всем привет. Сегодня пройдемся по алгоритму создания переключателя (он же Toogle Switch), который довольно часто используют на сайтах. Он используется для переключения языков, или простых Вкл/Выкл, что довольно удобно в настройках, или настройки корзины (добавить допинги, доставка курьером или почтой и т.д.). И алгоритм у данного метода довольно простой, основанный на простой работе «чекбокса», ведь у него всего два значения – да или нет. В будущем можно усложнить и сделать три или даже больше вариаций, но тогда обычно уже используют кастомные «чекбоксы».
Мы будем использовать только HTML и CSS, то есть, мы отрисуем внешний вид данного переключателя. При помощи JS вы уже можете описать логику, ну или даже воспользоваться PHP, смотря чем вы пользуетесь. Это уже не так важно, привязывается все к простому действию клика и изменению состояния. Может быть об этом мы поговорим как-нибудь в другой раз.
Начнём с HTML
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
Как видите, все довольно просто. В основе берется простой label (он в данном случае почти всегда используется как некая форма, после чего внутрь помещается input с тем самым кастомным чекбоксом (просто выбор галочкой), ну и добавляем некий блочный элемент, div или span, не важно. Это основная форма. Далее просто переходим к CSS. При этом к каждому мы можем приписать классы (или не прописывать, а использовать значения названий элементов по умолчанию (label, input и span)
Кстати, это вам может быть интересно:
Переходим к CSS
Для начала зададим стиль для label, по сути, ничего особенного, просто задаем размер и позицию на экране. Они могут быть любыми.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
Для input’а мы задаем нулевой стиль, чтобы он вообще не отображался
.switch input {
opacity: 0;
width: 0;
height: 0;
}
Далее у нас идет slider, он же span. Тут, помимо позиции, просто задается начальное положение, можно сделать округление сделать нейтральным серым фон, и по своей сути он создает некий блочный внешний фон, по которому и будет кататься наш шарик.
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
А вот далее, псевдо элементом :befor мы создаем сам шарик, который будет лежать внутри элемента, иметь определенные размеры (чуть меньше основного span) и быть, скажем, белым. Еще я люблю задать внешнюю тень шарику и внутреннюю для обводки (просто span’у) и тогда получается прикольный эффект. Но углубляться не будем.
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
По сути все. Осталось добавить через + взаимодействие элементов при клики на чекбокс (поставить галочку или нет), и тем самым поменять стиль двум элементам. В частности, мы просто меняем цвет заднего фона на синий, а шарик заставляем сместиться вправо или влево на определенное расстояние за счет transform (его мы также вешаем на span выше, чтобы возврат в исходное положение при отжатии галочки тоже был плавным и анимированным)
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}