Отзывчивый вызов меню - не открывается при нажатии

Question

У меня есть отзывчивое меню, но проблема заключается в том, что при изменении размера меню при нажатии не выпадает. Я включил codepen. Не беспокойтесь о том, что 3 строки не появляются, они делают на самом сайте.

Код для меню

<label for="show-menu" class="show-menu"><i class="fa fa-bars fa-2x"></i></label> 
    <input type="checkbox" id="show-menu" role="button"> 
     <nav class="cl-effect-4"> 
     <ul id = "nav" class="cl-effect-4"> 
      <li><a href="index.php?page=work">WORK</a><span class="slash-size">/</span></li> 
      <li><a href="index.php?page=about">ABOUT</a> 
     </ul> 
     </nav>  

Заранее спасибо

Answer 1

Вам необходимо JavaScript для того, чтобы справиться с открыванием и закрыванием меню. Если вы можете использовать JQuery, добавить что-то вроде этого:

$('.show-menu').click(function() { 
    $('#nav').toggle(); 
}) 

EDIT: ах теперь я вижу, что вы хотите использовать чекбокс CSS трюк, чтобы показать/скрыть меню. Изменить input[type=checkbox]:checked ~ #nav{ на input[type=checkbox]:checked ~ nav #nav{