0

Вот что у меня уже есть

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. Как это сделать? И как это можно получше сделать, это мигание стрелочки. Буду очень рад вашим советам.

4
  • Может сделать меню по умолчанию прозрачным и показывать :hover?
    – Plikard
    11 мар 2019 в 18:29
  • А вам нужно поправить ваш вариант? Или нормальный сделать с нуля? 11 мар 2019 в 18:29
  • @AlexeyGiryayev Можно и поправить, но можно и с нуля) Буду не против 11 мар 2019 в 18:33
  • @Plikard Ну можно и так сделать, но я хочу, чтоб пользователь видел, что там что-то есть, чтоб он заглянул что там такое)) 11 мар 2019 в 18:35

2 ответа 2

0

Если не править глобально, то используйте псевдоэлемент :before для основного контейнера, чтоб сделать невидимую накладку:

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:before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  background: transparent;
  width: 90px;
}

.menu__top>i {
  position: absolute;
  left: -30px;
  top: 50%;
  color: var(--color-gray);
  opacity: .8;
  transition: .2s ease;
  -webkit-animation: blink 2s linear infinite;
  animation: blink 2s linear infinite;
}

@-webkit-keyframes blink {
50% { opacity: 1 }
51% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes blink { 
50% { opacity: 1 }
51% { opacity: 0 }
100% { opacity: 0 }
}

.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>

0

Убрал слушатели, все работает по :hover

.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;
}

div.menu__top:hover {
  right: 0;
}

div.menu__top:hover i{
  opacity: 0;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />

<div class="menu__top animation-flash">
  <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>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.