используя + с> селектором - PullRequest
Новая
       10

используя + с> селектором

0 голосов
/ 12 февраля 2019

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

#toggle-menu {
  cursor: pointer;
}

#primary-nav,
#menu-toggle,
#primary-nav>ul {
  display: none;
}

#menu-toggle:checked+#primary-nav {
  display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
  <a href="#">
    <h1>Company</h1>
  </a>
  <label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
  <input type="checkbox" id="menu-toggle">
  <ul id="primary-nav">
    <li>home</li>
    <li>dropdown
      <ul>
        <li>sub1</li>
        <li>sub2</li>
      </ul>
    </li>
  </ul>
</div>

Любая помощь будет оценена

1 Ответ

0 голосов
/ 12 февраля 2019

Чтобы отображать ul только после input, необходимо скрыть все ul с, а затем отображать ul только после отмеченного input

. Затем можно добавитькласс для всех входов и то же самое для подменю. 

#toggle-menu {
  cursor: pointer;
}

.toggler,         /*checkboxes a class of toggler and hide */
ul {              /* hide all menus (you may want to give them all a class) */
  display: none;
}

.toggler:checked+ul {    /* only show a ul if it is directly after a checked toggler input */
  display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
  <a href="#">
    <h1>Company</h1>
  </a>
  <label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
  <input type="checkbox" id="menu-toggle" class="toggler">
  <ul id="primary-nav">
    <li>home</li>
    <li>
      <label for="sub-menu1">dropdown</label>                <!-- use a label and target the checkbox below -->
      <input type="checkbox" class="toggler" id="sub-menu1"> <!-- add this -->
      <ul>
        <li>sub1</li>
        <li>sub2</li>
      </ul>
    </li>
  </ul>
</div>
...