0

Как сделать что-бы при наведении на "Каталог" должен открываться серый блок, при наведении на "названия" появляется красный блок? И как можно вынести из контейнера серый и красный цвет фона выпадающего меню, они должен занимать 100% экрана, серый слева, красный справа, но при этом "названия" должно быть под словом "Каталог". Спасибо)

https://jsfiddle.net/aoh2zd0w/61/

.bottom-header__catalog {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.catalog-header__title {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  line-height: math.div(21, 18);
  color: #ffffff;
  background: #fd9d08;
  border-radius: 7px;
  padding: 10px;
  height: 50px;
  width: 160px;
  transition: all 0.3s ease 0s;
}

.catalog-header__block {
  /*opacity: 0;*/
}

@media (any-hover: hover) {
  .catalog-header__title:hover .catalog-header__block{
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

.catalog-header__list {
  background: #f4f4f4;
  width: 30%;
  padding: 22px 0px 46px 0px;
  min-height: 1049px;
}

.catalog-header__link {
  margin: 0px 0px 10px 0px;
  list-style: none;
}

.catalog-header__subtitle {
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  text-decoration: none;
}

.catalog-header__item ul li {
  list-style: none;
}

.catalog-header__item {
  position: absolute;
  left: 30%;
  top: 7%;
  width: 100%;
  padding: 22px 20px 64px 64px;
  background-color: red;
}

.catalog-header__item ul {
  margin: -13px;
  display: flex;
  height: 450px;
  flex-direction: column;
  flex-wrap: wrap;
}
<div class="bottom-header__catalog catalog-header">
  <div class="catalog-header__title">Каталог</div>
  <div class="catalog-header__block">
    <ul class="catalog-header__list">
      <li class="catalog-header__link">
        <a href="#" class="catalog-header__subtitle">Название</a>
        <div class="catalog-header__item">
          <ul>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
          </ul>
        </div>
      </li>
      <li class="catalog-header__link">
        <a href="#" class="catalog-header__subtitle">Название</a>
        <div class="catalog-header__item">
          <ul>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Текст</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

1 ответ 1

0

$('.catalog-header__link').hover(function() {
  $(this).find('.catalog-header__item').toggleClass('active');
})
.bottom-header__catalog {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.catalog-header__title {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  line-height: math.div(21, 18);
  color: #ffffff;
  background: #fd9d08;
  border-radius: 7px;
  padding: 10px;
  height: 50px;
  width: 160px;
  transition: all 0.3s ease 0s;
}

.catalog-header__block {
  display: none;
  background: #f4f4f4;
  width: 30%;
  padding: 22px 0px 46px 0px;
  height: calc(100vh - 86px);
  box-sizing: border-box;
}

.catalog-header__title:hover+.catalog-header__block,
.catalog-header__block:hover {
  display: block;
}

.catalog-header__item {
  display: none;
  height: calc(100vh - 86px);
  box-sizing: border-box;
  position: absolute;
  left: 30%;
  top: 70px;
  width: 100%;
  padding: 22px 20px 64px 64px;
  background-color: red;
}

.catalog-header__item.active {
  display: block;
}

.catalog-header__link {
  margin: 0px 0px 10px 0px;
  list-style: none;
}

.catalog-header__subtitle {
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  text-decoration: none;
}

.catalog-header__item ul {
  margin: -13px;
  display: flex;
  height: 450px;
  flex-direction: column;
  flex-wrap: wrap;
}

.catalog-header__item ul li {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bottom-header__catalog catalog-header">
  <div class="catalog-header__title">Каталог</div>
  <div class="catalog-header__block">
    <ul class="catalog-header__list">
      <li class="catalog-header__link">
        <a href="#" class="catalog-header__subtitle">Название 1</a>
        <div class="catalog-header__item">
          <ul>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
            <li><a href="#">Текст 1</a></li>
          </ul>
        </div>
      </li>
      <li class="catalog-header__link">
        <a href="#" class="catalog-header__subtitle">Название 2</a>
        <div class="catalog-header__item">
          <ul>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
            <li><a href="#">Текст 2</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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