• 1811
  • 1
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

На многих сайтах наверное видели с боку кнопочку на которую нажимаешь и выдвигается блок с информациейвот представляю вам код этого блока
Этот код в main.tpl

Код:
<div id="slideout">
<img src="img/23/text.png" alt="Задать вопрос" />
<div id="slideout_inner">
[Код формы вставляется здесь]
</div>
</div>

ну и стили в css
Код:
#slideout {
position: fixed;
top: 40px;
left: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #6DAD53;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#slideout_inner {
position: fixed;
top: 40px;
left: -250px;
background: #6DAD53;
width: 200px;
padding: 25px;
height: 130px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
#slideout_inner textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}
картинка в архиве Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Можешь почитать и вот эту статейку "Закрываем часть страницы от индексации"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element