Как я могу использовать только css и избегать JS для навигации по меню? - PullRequest
Новая
       57

Как я могу использовать только css и избегать JS для навигации по меню?

0 голосов
/ 04 мая 2020

Я пытаюсь создать компонент меню.

Требуется сделать это без JS, но вместо этого использовать css. С чем я борюсь, так это как перемещаться с помощью фокуса (клавиша Tab)?

Вы можете увидеть это во фрагменте кода - вы можете установить фокус на родительском меню, нажав Tab, но затем, когда вы попытайтесь удерживать нажатой Tab для навигации в подменю, оно снова становится невидимым (родитель теряет фокус)

В конце концов, я бы хотел, чтобы подменю действовало как в режиме наведения, попробуйте навести курсор на пример и вы понимаете, что я имею в виду.

Обратите внимание, что мне удалось решить эту проблему с помощью focus:within, но поскольку он не поддерживается в Edge & IE, и я не хочу использовать JS полифилы, Я ищу альтернативу. 

.container {
  width: 300px;
}

ul {
  list-style: none;
  padding: 0px;
}

.item {
  position: relative;
  background: lightblue;
  border: 1px solid black;
}

.item:focus > .subItems {
  visibility: visible;
}

.item:hover  > .subItems {
  visibility: visible;
}

.subItems {
  visibility: hidden;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 100%;
}
<button>focus helper</button>
<div class="container">
<nav>
  <ul class="items">
    <li class="item" tabIndex="0">
      <a href="#" class="link" tabIndex="-1">News</a>
      <ul class="subItems">
        <li class="item" tabIndex="0">
          <a href="#" tabIndex="-1">Politics</a>
        </li>
        <li class="item" tabIndex="0">        
          <a href="#" tabIndex="-1">Sports</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
</div>
...