Как заставить мое кликабельное вертикальное выпадающее меню работать правильно только с CSS? - PullRequest
Новая
       61

Как заставить мое кликабельное вертикальное выпадающее меню работать правильно только с CSS?

0 голосов
/ 01 марта 2019

Я создаю вертикальное раскрывающееся меню с несколькими подменю, которое отображается только тогда, когда я щелкаю по соответствующему значку (который является стрелкой вниз) в меню.после того, как показано подменю, стрелка угла вниз должна быть обращена, чтобы быть стрелкой угла вверх, которая при каждом нажатии подменю снова исчезает.

что я мог сделать до сих пор, так это то, что когда я нажимаю кнопку угла внизСтрелка в первый раз, когда подменю движется, но не возвращена стрелка или какая-либо другая функция, поэтому я не могу скрыть подменю снова.

HTML: один примерный пункт меню 

<li class="menu">
   <a href="#" tabindex=0>First</a>

   <label for="close-1" ><i class="fa fa-angle-up"></i></label>
   <input type="radio" id="close-1" name="toggle1" >
   <label for="open-1"><i class="fa fa-angle-down" ></i></label>
   <input type="radio" name="toggle1" id="open-1">


   <ul class="sub-menu">
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
   </ul>
 </li>

CSS: 

input[type="radio"] {
  display: none;
}

.menu  {
    position: relative;
    padding: 1em ;
    font-weight: 700;
    width: 100%;   
    border: 1px solid #eee;
    border-right: none;
}

.sub-menu {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
    padding: 0.5em;
}

.menu label {
    position: absolute;
    right: 10px;
    top: 20px;
    transition: 0.4s ease-in-out;
}

input[type="radio"]:checked + .sub-menu{
    max-height: 320px;
    transition: max-height 0.4s ease-in-out;
}

Я пытался сделать что-то подобное, но это не сработало 

input[type="radio"]:checked label:nth-of-type(2) {
  opacity: 0;
  visibility: hidden;
}

input[type="radio"]:checked label:nth-of-type(1) {
   opacity: 1;
   visibility: visible;
}

Моя идея состоит в том, чтобы переключить две стрелки, и я думаю, что моя проблема будет решена, ноЯ понятия не имею, чтобы достичь этого без JS.

1 Ответ

0 голосов
/ 01 марта 2019

Добавил немного анимации и сделал ее абсолютной, следуя вашему коду: Fiddle

Без анимации: Fiddle 

.menu {
  position: relative;
  padding: 1em;
  font-weight: 700;
  width: 100%;
  border: 1px solid #eee;
  border-right: none;
}

.sub-menu {
  max-height: 0;
  transition: max-height 0.4s ease-in-out;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
  overflow: hidden;
  padding: 0, 0.5em, 0.5em;
}

.close {
  opacity: 0;
}

.open {
  opacity: 1;
  z-index: 5;
}

#open-1:checked~.close {
  opacity: 1;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]~label {
  position: absolute;
  right: 10px;
  top: 20px;
  transition: 0.4s ease-in-out;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  cursor: pointer;
}

#open-1:checked~.open {
  opacity: 0;
  z-index: 0;
}

#close-1:checked~.sub-menu {
  max-height: 0px;
  transition: max-height 0.4s ease-in-out;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
}

#open-1:checked~.sub-menu {
  max-height: 320px;
  transition: max-height 0.4s ease-in-out;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<li class="menu">
  <a href="#" tabindex=0>First</a>
  <input type="radio" id="open-1" name="toggle1">
  <label class="open" for="open-1">
    <i class="fa fa-angle-down"></i>
  </label>
  <input type="radio" id="close-1" name="toggle1">
  <label class="close" for="close-1">
    <i class="fa fa-angle-up"></i>
  </label>
  <ul class="sub-menu">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
  </ul>
</li>
...