• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание выдвижной панели на чистом CSS (Анимированная выдвижная боковая блок-панель на CSS)
Создание выдвижной панели на чистом CSS
Kosten
Дата: Четверг, 2019-03-21, 22:14 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


Многим пользователям встречалась на тематических сайтах выдвижную панель, в которой могло содержатся все что угодно. Основном если говорим про боковую, как здесь, то там может быть описание или социальные закладки. Здесь идет простая панель, которая не чего не содержит, и вам самим остается разместить функций, или то , что считаете нужным.

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



HTML

Код
<div class="gamingarke-testartin">
  <div class="kamartine-solutionanev">
    <i class="fa fa-arrow-right"></i></div>
  <div class="tusolas"></div>
</div>

CSS

Код
.gamingarke-testartin {
  width: 100%;
  height: 100%;
}
.kamartine-solutionanev {
  position: relative;
  min-width: 50px;
  max-width: 50px;
  min-height: 100%;
  background: #0f4075;
  transition: .4s linear;
}
.kamartine-solutionanev:hover {
  min-width: 250px;
  max-width: 250px;
}
.tusolas {
  width: 100%;
}
.fa {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-7px);
  cursor: pointer;
  transition: .4s linear;
  color: #e3e4e2;
}
.kamartine-solutionanev:hover .fa {
   transform: translateX(-7px) rotate(179deg);
}

Также идет шрифтовая кнопка, которая при открытие меняет направление.

Демонстрация
Прикрепления: 0225527.png(14.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание выдвижной панели на чистом CSS (Анимированная выдвижная боковая блок-панель на CSS)
  • Страница 1 из 1
  • 1
Поиск: