Многим пользователям встречалась на тематических сайтах выдвижную панель, в которой могло содержатся все что угодно. Основном если говорим про боковую, как здесь, то там может быть описание или социальные закладки. Здесь идет простая панель, которая не чего не содержит, и вам самим остается разместить функций, или то , что считаете нужным.
При открытие страницы она изначально показано, а чтоб понять, что нужно навести на ее, но на ней указана стрелка. Где только наводим курсор, как боковая панель начинает выдвигаться.
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);
}
Также идет шрифтовая кнопка, которая при открытие меняет направление.
Демонстрация
