Hello, please help me in my menu

Hello, please help me in my menu

Ok, I need to click on the image (img.menu) and the menu appears, and click again and close it, whenever I want. Thanks in advance. I apologize for Google translator.

My HTML:
  2. <!DOCTYPE html>
  3. <html lang="pt-br">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>GRAPE</title>
  7. <link rel="stylesheet" href="css/grape.css">
  8. <script src="js/jquery-2.1.4.js"></script>
  9. <script src="js/grape-js.js"></script>
  10. </head>
  11. <body>
  12. <div class="header">
  13. <img class="menu" src="img/menu-grape.png" alt="Menu" title="Menu">
  14. <nav class="header">
  15. <ul class="hmenu">
  16. <li>home</li>
  17. <li>sobre</li>
  18. <li>framework</li>
  19. </ul>
  20. </nav>
  21. </div>
  22. </body>
  23. </html>
My CSS:

  2. @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
  3. @import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700);
  4. body{background-color: #eeeeee; font-family: Lato, sans-serif;}
  5. div.header{position: absolute; width: 100%; height: 60px; top: 0; left: 0 ; background-color: #ff4c4c;}
  6. nav.header{position: absolute; width: 100%; height: 60px; top: 60px; left: 0 ;background-color: #333333; display: none;}
  7. ul.hmenu{position: relative; list-style: none; text-transform: uppercase;}
  8. ul.hmenu li{display: inline-block; margin-right: 40px; background-color: #efe9e5; padding: 5px;
  9.             border-radius: 10px; font-weight: 700; color: #333333; cursor: pointer;}
  10. img.menu{position: absolute; width: 32px; height: 32px; left: 30px; top: 14px; cursor: pointer;}