Перед тем как показать, как сделать панель, покажу Вам сразу готовый результат, чтобы было понятно, что мы тут делаем.
Делается такая панель в два шага. Все что нужно это добавить HTML и CSS код. Делаем сначала разметку. Состоит она из родительского блока и вложенного в него дочернего.
<div id="slide_lft">
Наведи на меня
<div id="slide_in">
Сюда код формы или другой информации, которую хотите разместить.
</div>
</div>
В итоге родительский блок служит контейнером и в нем располагается сама кнопка на которую нужно наводить для открытия и блок в который добавляем нужную нам информацию. По своей сути родительский блок и является кнопкой.
Далее просто добавляем стили в свой файл стилей. Например он может называться style.css и лежать в папке с вашим сайтом или темой сайта.
#slide_lft{
position: fixed;
top: 100px;
left: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #f60;
color:#fff;
padding:5px;
}
#slide_in {
position: fixed;
min-height:200px;
top: 100px;
left: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
box-shadow:0 0 5px #777;
background: #f60;
color:#fff;
width:250px;
padding:10px;
box-sizing:padding-box;
}
#slide_lft:hover {
left: 250px;
}
#slide_lft:hover #slide_in {
left: 0;
}
С данными стилями панель будет размещаться слева. Если Вам нужно разместить ее справа, то все свойства - left: заменить на right:. Готовый код будет выглядеть так:
#slide_lft{
position: fixed;
top: 100px;
right: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #f60;
color:#fff;
padding:5px;
}
#slide_in {
position: fixed;
min-height:200px;
top: 100px;
right: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
box-shadow:0 0 5px #777;
background: #f60;
color:#fff;
width:250px;
padding:10px;
box-sizing:padding-box;
}
#slide_lft:hover {
right: 250px;
}
#slide_lft:hover #slide_in {
right: 0;
}
Также смотрите на остальные параметры, если решите менять ширину блока для информации, то нужно и менять значение left: или right:, в зависимости что там у Вас. В данном случаи у нас задано везде 250 пикселей.
Время выдвигания задано кроссбраузерным параметром transition и равно 0.3 секунды. Можете поменять на свое в зависимости от нужд.
Вот и вся панель, согласитесь, кода намного меньше чем в первом варианте, да и попроще все в разы.
На этом все, спасибо за внимание. 🙂
