Плавающая панель на чистом CSS.

Have a question? Ask in chat with AI!

slide-panel CSSСегодня речь пойдет о новом способе реализовать плавающую панель. Суть состоит в том, чтобы сделать ее используя только CSS, отказавшись тем самым от JavaScript. В примере я дам лишь заготовку. Остальное зависит от вас. Панель можно использовать для показа счетчиков feedburner и твиттера, либо показывать на ней кнопки социальных сетей, либо сделать компактную и удобную форму обратной связи. Реализация достаточно проста и применима на любом сайте.

[adsense]
Для примера создадим форму обратной связи. Данное решение поддерживается всеми современными браузерами, в том числе IE8. На IE7 есть проблемы, но думаю решение найдется в ближайшее время. В стандартном состоянии панель выглядит так:
slide panel in

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

Заготовка

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


Feedback

 

 

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

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

Стили CSS

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

#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, вся конструкция будет работать, однако форма будет показываться резко, без задержек.

Применение

Данная конструкция дает возможность делать плавающие панели без надобности писать код на JavaScript. Одна из проблем применения данной конструкции в том, что для показа формы не требуется нажатие — пользователь, при случайном попадании курсора на кнопку, увидит панель — это может быть надоедливым. Так же нет возможности задать задержку скрытия панели. Как только вы уберете курсор за пределы панели — она скроется. Это опять же может быть не самым лучшим решением. И скорей всего будут проблемы с сенсорными интерфейсами.

В любом случае каждый выберет для себя — использовать или нет. Главное, что теперь вы знаете как реализовать плавающую панель без использования JavaScript на чистом CSS.

Посмотреть демо

На блоге WebGrow.info появилась отличная статья — «Как сделать вашу главную страницу привлекательнее для пользователей». Хороший материал, поможет сделать ваш блог удобнее для посетителей!

перевод статьи источник тут

10 комментариев для “0

  1. Уведомление: Плавающая панель на чистом CSS. | Grabr
  2. Спасибки. CSS3 вытесняет скрипты на простых задачах, что не может не радовать.

    1. да я думаю в ближайшее время на JS будут только тяжелые вещи. остальное можно будет реализовать на CSS3

  3. спасибо, самая лучшая статья по этой теме.
    А как же вставить на блог вордпресс эту панельку?  Я так понял стили нужно добавить в файл стилей темы, а первый код оформить в отдельный файлик.css   а как его подключить?  в index.php темы…..?

    1. css добавьте в файл style.css вашей темы, а сам код(блоки div) можно вставить или в header.php или footer.php

  4. Так а где ж оно работает на IE? Не работает ни в 8-м, ни в 9-м. ;(
    Я делал подобную фишку, но еще проще — http://order-shop.ru — кнопка саппорта. Во всех браузерах работает, в ИЕ — нет. Никто не знает, как поправить?
    Заранее благодарен!

  5. а можно установить скрипт какой на данном примере, допустим с другого края?

  6. есть баг в chrome когда вылезает панелька в хроме можно изменить размер текстового поля, а после увеличения размера, панелька залезает обратно, но остается видна часть текстового поля, надо прописать в цсс, что у текстового поля нельзя менять размер

Добавить комментарий для Эмиль Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Раздача инвайтов Webice и обмен постовыми
Следующая запись Мини-курс по jQuery для дизайнеров. Урок 3. Движение и меню аккордеон.