Блог

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

Заготовка

Для начала сделаем заготовку. Вот как выглядит код:

1
2
3
4
5
6
7
8
9

<div id="slideout">
 <img src="feedback.png" alt="Feedback" />
 <div id="slideout_inner">
 <form>
 <textarea></textarea>
 <input type="submit" value="отправить"/>
 </form>
 </div>
</div>

В итоге мы имеем два блока div. Тот, который называется slideout является родительским. В нем у нас будет располагаться маленькая кнопка «отправить» и при наведении на него будет появляться форма обратной связи. Заметьте, что для формы используется фоновое изображение. Я использую изображение для того, чтобы повернуть текст вертикально. Сейчас поворот текста можно реализовать при помощи CSS3 но использование изображения кажется более легким и поддерживается большим числом браузеров.

Далее идет блок div под названием slideout_inner, который является контейнером для формы. Он расположен внутри родительского блока.

Стили CSS

А вот и вся магия Мы используем псевдо-классы и свойство CSS3 transition-duration для того чтобы получить плавное движение блока. Вот так будут выглядеть основные стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#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;
}

Изначально внутренний блок имеет отрицательную y-координату и прячется за левым краем экрана. Второй блок с кнопкой прилегает к левой стороне экрана. При наведении на блок с кнопкой, он сдвигается вправо на расстояние равное ширине блока с формой обратной связи. Внутренний блок сдвигается вправо, показывая себя и контент расположенный внутри.

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