Вот что у меня уже есть
function animation(el) {
el.target.classList.toggle('animation-flash')
el.target.classList.toggle('menu__top--active')
el.target.firstElementChild.classList.toggle('fa-arrow-left--active')
}
.menu__top {
position: fixed;
height: 100%;
width: 250px;
right: -250px;
box-shadow: -27px 0 90px rgba(0, 0, 0, 0.098);
transition: right .4s;
z-index: 21;
margin: 0;
top: 44px;
cursor: pointer;
}
.menu__top>i {
position: absolute;
left: -30px;
top: 50%;
color: var(--color-gray);
opacity: .8;
transition: .2s ease;
}
.menu__top__content {
display: flex;
flex-direction: column;
padding: 10px;
background: var(--color-white-active);
}
.menu__top--active {
right: 0;
}
.menu__top__content--title {
padding: 10px 0;
font-size: 20px;
border-bottom: 1px solid #EAEAEA;
}
.menu__top--link {
font-size: 18px;
margin: 3px 0px;
color: var(--color-black);
transition: .2s ease;
}
.menu__top--link:hover {
color: var(--color-black-active);
}
@keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: 1;
}
}
.animation-flash {
animation: flash linear 2s infinite;
}
.fa-arrow-left--active {
display: none !important;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<div class="menu__top animation-flash" onmouseenter="animation(event)" onmouseleave="animation(event)">
<i class="fas fa-arrow-left fa-2x"></i>
<div class="menu__top__content">
<div class="menu__top__content--title">
<span>Ссылки</span>
</div>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
<a href="#" class="menu__top--link">Ссылка</a>
</div>
</div>
Как видно меню выдвигается при наведение на стрелочку, а как сделать, чтоб меню выдвигалось при наведение на div.menu__top
. Пробовал увелечить ширину (width
) блока, но тогда было видно содержимое этого меню и белую полосу от background
. Как это сделать? И как это можно получше сделать, это мигание стрелочки. Буду очень рад вашим советам.