javascript - Responsive menu show and hide on click

Question

I trying to write a responsive menu. It's actually works but I can't get the on clik effect in CSS. For this moment I'm using a hover. How to make that when the screen width is lower than 750px I have to click on menu from pic. number 2 (ul) to show menu from pic. number 3 (li) ? This is a one page site so when I clik on some element from drop down menu it's should hide menu agin (li).

HTML:

<header>
    <nav id="menu">
        <ul>
            <li class="li"><a href="#">WITAJ</a></li>
            <li class="li"><a href="#">O MNIE</a></li>
            <li class="li"><a href="#">DO?WIADCZENIE</a></li>
            <li class="li"><a href="#">CO ROBI??</a></li>
            <li class="li"><a href="#">KONTAKT</a></li>
            <li><a href="#">MOJE PRACE</a></li
        ></ul>
    </nav>
</header>

CSS:

@media screen and (max-width: 750px) {      
    header nav#menu ul:hover > li{
        display:block !important;
    }

    header nav#menu ul li{
        display:none !important;
    }
}

Answer 1

You cannot achieve a click effect in CSS. It is common to use JavaScript for that. This is an easy jQuery solution:

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
    if (menuVisible) {
      $('#myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('#myMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('#myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

It also hides the menu, after the user clicked on an entry.

In CSS, you have to force the menu to be visible or not by using media queries. Here an example: sfplex

This is the HTML structure of this example:

<div id="menuBtn">click me</div>
<nav id="myMenu">
  <ul>
    <li>entry 1</li>
    <li>entry 2</li>
    <li>entry 3</li>
    <li>entry 4</li>
  </ul>
</nav>

See the working example in jsFiddle.