При нажатии на кнопку, открывался определенный блок?

Question

[Kalwin]

Как найти div элемент за пределами родителя при навидении, не могу понять.

<div class="container">
  <div class="row">
    <div class="col-3 btn btn-primary btn-menu">Nanigation</div>
  </div>
</div>
<div class="container main-menu px-0">
  <div class="row g-0">
    <ul class="list-group col-3">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>
    <div class="border rounded col-9">
      <h3>title category</h3>
    </div>
  </div>
</div>

.main-menu { display: none; }

.btn-menu:hover .main-menu { display: block; }

.main-menu div ul { position: relative; }
.main-menu div ul::after { content: ''; position: absolute; left: 48%; top: -1.2rem; border: 10px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 10px; border-top: 10px solid rgb(248 249 250); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

Answer 1

[Pavel-ww]

В CSS это не возможно. Максимум что возможно - менять элементы на том же уровне что и элемент с hover следующие ЗА ним, внутри их общего родителя

Comments

[Kalwin]

Да я уже сталкивался с родителем год назад, решился, те так как хотел, но костыльным методом решил то что нужно. В общем только через JS. Понял, спасибо!

[Pavel-ww]

Kalwin UA, в bootstrap же есть готовые компоненты для этого. Зачем изобретать велосипед?

[Kalwin]

Возможно, я ещё не сталкивался с тем видом навигации(в готовом формате) который я желаю.

[GAS-ART]

В целом "открыть" нужный блок можно с помощью css. Только вот закрыть его назад при повторном нажатии на "Nanigation" не получится. Но можно где то в блоке с меню добавить отдельную кнопку для закрытия. Выглядеть будет как то так:

<div class="container">
  <div class="row">
  <div class="col-3 btn btn-primary btn-menu"><a href="#menu">Nanigation</a></div>
  </div>
</div>
<div id="menu" class="container main-menu px-0">
  <div class="row g-0">
    <ul class="list-group col-3">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>
    <div class="border rounded col-9">
      <h3>title category</h3>
      <h5><a href="#close">CLOSE</a></h5>
    </div>
  </div>
</div>

.main-menu{
  display:none;
}

.main-menu:target{
  display:block;
}

Сcылка на jsfiddle

[Pavel-ww]

Артем, тут речь о :hover шла

[GAS-ART]

Pavel-ww, Перечитал, тут до конца не понятно. В заголовке написано "при нажатии" в описании "при наведении" ))

[GAS-ART]

Pavel-ww, А и извините что я в комментарии к Вам влез. Не туда сохранил ответ (((

[Pavel-ww]

Артем, комментарии не являются моей собственностью, так что извинять не за что :)

Answer 2

[GAS-ART]

В целом "ОТКРЫТЬ" при нажатии на кнопку можно с помощью CSS. Только вот "ЗАКРЫТЬ" блок потом при нажатии на туже кнопку не получится. Но можно внутри открывающегося блока сделать кнопку для его закрытия. Выглядеть будет примерно так:

<div class="container">
  <div class="row">
  <div class="col-3 btn btn-primary btn-menu"><a href="#menu">Nanigation</a></div>
  </div>
</div>
<div id="menu" class="container main-menu px-0">
  <div class="row g-0">
    <ul class="list-group col-3">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>
    <div class="border rounded col-9">
      <h3>title category</h3>
      <h5><a href="#close">CLOSE</a></h5>
    </div>
  </div>
</div>

.main-menu{
  display:none;
}

.main-menu:target{
  display:block;
}

Ссылка на jsfiddle