Выпадающие меню по клику (без JS)

253

20 сентября 2017, 10:04

Здравствуйте,

Мне нужно сделать выпадающие меню по клику использую только HTML/CSS. В принципе, я его создал, но есть проблема в том что я не использую id, а без него не получилось.

Вопрос: Как сделать такой вариант меню без использования id?

Спасибо!

Код HTML:

<nav>
    <label for="checkbox"><img src="http://placehold.it/59x59" width="59" height="59" alt="Icon of menu"></label>
    <input type="checkbox" id="checkbox">
        <ul class="list">
            <li><a href="#">Страница</a></li>
            <li><a href="#">Страница</a></li>
            <li><a href="#">Страница</a></li>
        </ul>
</nav>

Answer 1

label {cursor: pointer;} 
ul {list-style: none;} 
.list {display: none;} 
.checkbox {display: none;} 
 
.checkbox:checked ~ .list { 
  display: block; 
}

<nav> 
  <label class="checkbox1"><img src="http://placehold.it/59x59" width="59" height="59" alt="Icon of menu"> 
    <input type="checkbox" class="checkbox"> 
  
    <ul class="list">		 
      <li><a href="#">Страница</a></li> 
      <li><a href="#">Страница</a></li> 
      <li><a href="#">Страница</a></li> 
    </ul>  
  </label> 
</nav>

не самий лутший вариант но я думаю подойдет

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам

, располагающихся после заголовка . При этом и

должны иметь общего родителя, так что если

вставить внутрь , то стили применяться уже не будут.