Выпадающая боковая панель на 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 ...:


6 комментариев:

  1. Если эту кнопочку украсить и грамотно вставить в дизайн, то будет совсем хорошо, в прочем вы сказали, что с кнопкой и блоком, можно сотворить все что угодно..

    ОтветитьУдалить
  2. Верно Иван. Я , в качестве наглядного примера сделала совершенно простенькую. Пробовала вставить готовую кнопку. Достаточно интересно смотрится.

    ОтветитьУдалить
  3. Вика, привет. Давно ищу решение как сделать форму подписки в виде конвертик справа. Этот код который выше у меня не работает, ни с картинкой, ни в виде блока. Попробовала вставить первую часть кода из статьи про Фейсбук - конвертик есть, но при клике на него ничего не происходит. Пробовала целиком вставлять код "Фейсбук" и давать ссылку на страницу с формой связи, не работает. Короче, совсем запуталась... Кстати в тестовом блоге, где ты предлагаешь посмотреть слева, как работает код, тоже ничего нет?

    ОтветитьУдалить
    Ответы
    1. Ну да Олеся , в тестовом глобальные изменения в своё время делала, видимо убрала. А в этом коде просто надо все значения в первом участке подгонять под свои
      top: 100px; / отступ сверху /
      left: 0; / отступ слева /
      background: red; / цвет фона /
      width: 40px; / ширина блока /
      height: 30px;
      Во внутреннем блоге тоже
      и эти соответственно
      #panel:hover {
      left: 220px;
      }
      #panel:hover #panel1 {
      left: 0; / отступ слева /
      Пробуй сама пока или потерпи. Разрываюсь сейчас.

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
    3. Я уже подобрала себе иконку, вот http://s020.radikal.ru/i707/1507/df/281d84226c9e.png
      Но мне не совсем понятно, что оставлять в коде, а что нет.
      Я не куда не спешу, я же в декретном отпуске.) Буду терпеливо ждать.

      Удалить

Пользовательский поиск