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

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


Для примера создадим форму обратной связи. Данное решение поддерживается всеми современными браузерами, в том числе 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 появилась отличная статья — «Как сделать вашу главную страницу привлекательнее для пользователей». Хороший материал, поможет сделать ваш блог удобнее для посетителей!

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


Запись опубликована в рубрике CSS3 с метками , , . Добавьте в закладки постоянную ссылку.

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

  1. Уведомление: Плавающая панель на чистом CSS. | Grabr

  2. Игроман говорит:

    Спасибки. CSS3 вытесняет скрипты на простых задачах, что не может не радовать.

    • Гилязетдинов Руслан говорит:

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

  3. Димка говорит:

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

    • Гилязетдинов Руслан говорит:

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

  4. Ростислав Шалаев говорит:

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

  5. Васёк говорит:

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

  6. Эмиль говорит:

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

  7. . говорит:

    Зqpавствуйте! Ваc uнmереcyют клиентсkиe 6aзы qанных?

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

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