Выдвигающаяся панель при наведении с любой стороны с помощью CSS

Віталий

8 років ago

Доброго времени суток 🙂

На морем ресурсе уже была статья о том как сделать выдвигающаяся панель с любой стороны, но только используя jQuery скрипт. Метод действенный, много раз ним пользовался и многим он пригодился, но пришла пора показать метод по проще и попонятней. Новый способ делает анимацию на обычном CSS. Отличие между ними в том, что в первом панель выдвигается при нажатии, а во втором при наведении. Кому интересно посмотреть на старый способ, то Вам сюда - Выдвигающаяся панель с любой стороны.

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

Делается такая панель в два шага. Все что нужно это добавить 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 секунды. Можете поменять на свое в зависимости от нужд.

Вот и вся панель, согласитесь, кода намного меньше чем в первом варианте, да и попроще все в разы.

На этом все, спасибо за внимание. 🙂

Exit mobile version