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>

Ваш ответ

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

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