0

Разбираю пример: https://jsfiddle.net/rgjwe6nq/

Кто-то может объяснить зачем в примере нужны строки

position: fixed;//??
position: relative;//??

Не совсем понимаю суть их работы. Вопрос 1: Если убрать fixed то кнопка станет растянута на всю ширину. Почему так? Относительно чего начинается отсчет? Спаны у меня находятся внутри тега лабел. Они что рисуются внутри него при этом параметре? В общем мне плохо это понятно, хотелось бы больше подробностей.

Вопрос 2: Relative как-то влияет на положение span'ов, делая их все как бы в одном месте. Это видно при анимации. Как это работает?

0

1 ответ 1

0

Начнем сначала.

  1. Как работает кнопка.

Она основана на проверке состояния checkbox. Сам checkbox скрыт, но видима его надпись. Checkbox включается и выключается благодаря обратной связи через: label for="ID переключателя" (при клике на надпись передается клик на переключатель), а стили далее привязываются к [ID переключателя]:checked.

  1. Положение кнопки

У кнопки (label) стоит position: fixed; чтобы она не смещалась при прокрутке. Но что важнее благодаря этому стилю кнопка приобретает display: block; (если его убрать, то у нее будет стиль display: inline; и все внутренние блочные элементы выйдут за ее пределы, а так как у них не установлена ширина, то они займут 100% доступного места.). Почему включение fixed влияет на свойство display сказать не могу, если кто уточнит - welcome.

  1. Зачем у span установлено position: relative;

Установка этого значения позволяет использовать свойства top, left, right, bottom (документация) для сдвига элемента.

Зачем оно нужно: существует несколько условий. Одно из них:

.hidden-menu-ticker:checked ~ .btn-menu span.first {
  -webkit-transform: rotate(45deg);
  top: 10px;
}

В котором как раз используется смещение top. Это смещение задает положение верхней черной полоски по центру надписи label. Поскольку у span не установлено transform-origin, то по умолчанию он вращается относительно своего центра. В итоге он вращается относительно центра надписи (общая высота надписи 25px, высота каждого span 5px и у 2 и 3 есть margin 5px. сдвигая первый на 10px его центр совпадает с центром надписи. остальные аналогично)

  1. Установлено положение position: fixed; у скрытого меню.

Об этом вы уже догадались. Это делает меню независимым от прокрутки страницы, но еще это позволяет выводить его за границу экрана, чтобы его не было видно (скрывать). Также благодаря этому в браузере не появляется горизонтальная полоска прокрутки.

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

Добавлено по 1 комментарию

Анимация одновременно срабатывает и на top и на поворот. Span сдвигается вниз моментально потому, что значение top не задано в основном стиле (это особенность работы transition. Например, добавьте top: 0; в стиль .btn-menu span.first и увидите одновременный сдвиг с поворотом верхнего черного прямоугольника). Порядок перечисления свойств не имеет значения.

Добавлено по 2 комментарию

И как я понял .hidden-menu-ticker:checked ~ .btn-menu { left: 180px; } Сдвигает кнопку на 180 пикселей вправо во время чекнутого инпута?

Да

То есть left это отступ слева? В случае fixed отступ получается от левого края экрана?

Да

.hidden-menu-ticker:checked ~ .hidden-menu { left: 0; } А тут как я понял при чекнутом интпуте меню становится на 0 позицию, то есть из отрицательной становится в левый край?

Изначально меню сдвинуто влево за пределы экрана. С помощью значения left: 0; его левый край совпадает с левой стороной окна.

Добавлено по 3 комментарию

Вся анимация происходит одновременно. В анимации кнопки просто установлена задержка, поэтому она проигрывается после передвижения меню (у меню длительность анимации 0,2 сек, а задержка у кнопки 0,23 сек). Можно задержкой изменить порядок.

4
  • Спасибо. Отличный ответ. Как я понял по анимации, сразу срабатывает параметр top, который сдвигает первый спан сверху вниз (и второй снизу вверх) а уже после срабатывает разворот rotate(45deg), хотя написаны они в обратном порядке.
    – GuitarFan
    24 авг 2016 в 13:15
  • И как я понял .hidden-menu-ticker:checked ~ .btn-menu { left: 180px; } Сдвигает кнопку на 180 пикселей вправо во время чекнутого инпута? То есть left это отступ слева? В случае fixed отступ получается от левого края экрана? .hidden-menu-ticker:checked ~ .hidden-menu { left: 0; } А тут как я понял при чекнутом интпуте меню становится на 0 позицию, то есть из отрицательной становится в левый край?
    – GuitarFan
    24 авг 2016 в 13:18
  • В обратном порядке анимация видимо такая же как и в обычном, сразу тоже срабатывает сдвиг, убирается смещение top, а после уже поворот. Смотрится не очень, лучше бы было на оборот.
    – GuitarFan
    24 авг 2016 в 13:20
  • @GuitarFan добавил в ответ
    – Andrew B
    24 авг 2016 в 14:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.