Как сделать выдвижной блок на сайте

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

Начнем, как обычно, с верстки. Она элементарная, валидная, кроссбраузерная, синтаксически корректная, идеологически правильная и т.д. и т.п. Выдвижной блок оформляется отдельным элементом.Теперь стили. Анимация основана на использовании CSS-свойств transition и transform, а реакция на курсор мыши выполняется с помощью псевдо-класса :hover, что позволяет обойтись без JavaScript.Некоторые комментарии по стилям. Выдвижной блок задается фиксированной ширины и фиксированного положения, но при этом прячется за правый или левый край экрана таким образом, чтобы несколько пикселов оставались видимыми. Это надо, чтобы срабатывало событие наведения курсора на элемент. При наведении курсора положение элемента меняется на край экрана, а параметры свойства transition обеспечивают плавность и длительность анимации. Если надо перенести блок на правую часть, то достаточно изменить стили, описывающие его положение.

Готовый пример выдвигающегося блока можно посмотреть на демонстрационной странице.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.