Выскальзывающая панель на чистом CSS

В данном уроке мы сделаем выскальзывающий элемент интерфейса полностью только на CSS без JavaScript. Такой элемент может быть полезен для организации фиксированных элементов навигации или форм для обмена информацией, которые будут разворачиваться только тогда, когда в них есть необходимость.

Сделаем форму обратной связи для примера, которая будет поддерживаться в IE8+ (и даже в IE7, если элемент div заменить на ссылку) и в каждом современном браузере. Состояние по умолчанию выглядит следующим образом - небольшая метка сбоку страницы:

При наведении курсора мыши на нее, раскрывается форма обратной связи:

Разметка

Сначала надо сделать разметку. Вот она, за исключением кода формы:

<div id="slideout">
  <img src="feedback.png" alt="Отправить отзыв" />
  <div id="slideout_inner">
    [Код формы вставляется здесь]
  </div>
</div>

Здесь имеются два элемента div. Внешний имеет id  “slideout”. Данный элемент div будет иметь небольшую зеленую метку "Оставить отзыв", при наведении на которую выскальзывает панель с формой.  Обратите внимание, что на внутренней стороне справа располагается изображение метки. Используется рисунок, а не поворот текста на 90 градусов. Вращение текста можно выполнить с помощью CSS3, но в данном случае использовать изображение проще и обеспечивает лучшую кросс браузерную поддержку.

Внутренний элемент div имеет id “slideout_inner”. Он содержит код формы. Элемент расположен внутри, чтобы код CSS работал, но размеры его выходят за пределы родительского контейнера.

CSS

Магия скрыта здесь. Мы используем псевдо-классы и свойство CSS3 pseudo-classes для организации выскальзывания панели. (В тексте урока опущен CSS код, который не касается функционирования панели, полную версию можно посмотреть в исходниках):

#slideout {
  position: fixed;
  top: 40px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: 40px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover {
  left: 250px;
}
#slideout:hover #slideout_inner {
  left: 0;
}

Внутренний элемент div имеет начальную координату по оси X отрицательную, что скрывает нашу панель, размещая ее за левой стороной страницы. Внешний элемент  div с меткой имеет стартовую позицию, выравненную по левому краю страницы. Когда курсор мыши оказывается над ним, он смещается вправо на ширину внутреннего контейнера. Внутренний контейнер при этом также смещается  вправо, раскрывая свое содержание.

Свойство transition-duration устанавливает время перехода, что делает переход плавным в браузерах, которые поддерживают CSS3. Выполняется базовая трансформация со сдвигом, которая запускается наведением курсора мыши на внешний элемент div. Если браузер не поддерживает трансформации, панель будет полностью функциональна, только без анимации.