Выпадающая боковая панель на CSS

Приветствую Вас на своём блоге. Хочу предложить сегодня вашему вниманию код выдвижной боковой панельки. Мы часто видим такие на многих сайтах. В основном они создаются с помощью JavaScript. В данном случае весь код создан на CSS. Очень лёгкий. Без труда подстраивается под любой дизайн. Компактный. Такой универсальный код, который можно применить для любых целей.


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

 Контакты, баннеры, форму связи. Всё что пожелаете нужным. В Blogger он устанавливается очень просто. Через гаджет HTML/JavaScript. Посмотрите, как это выглядит на странице на левой стороне этого тестового блога.

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

<style>#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;
}</style>
  
<div id="slideout">
  <img src="http://www.cmbm.kz/foto/knopka_2.png " alt=" форма связи" />
  <div id="slideout_inner">
    [Код формы вставляется здесь]
  </div>
</div>

Скопируйте код в блокнот установите свои значения. В строке синего цвета прописываем адрес картинки.

Если хотите разместить панель справа, меняйте соответственно значения left на right в двух местах кода. Редактируйте размеры внутреннего и внешнего блоков.

И наконец, в этом участке кода.

<div id="slideout_inner">
    Код формы вставляется здесь
  </div>

вставляйте то, что должно отображаться в открывшемся окне.

Согласитесь, что установка такой панельки экономит достаточно места на блоге, всегда перед глазами пользователя. Да и вообще красиво и оригинально смотрится.

А у меня на сегодня всё. Спасибо, что читаете мои шпаргалки. Увидимся.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email ...: