Response title
This is preview!
Hello, please help me in my menu
in Using jQuery
•
7 years ago
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:
- <!DOCTYPE html>
- <html lang="pt-br">
- <head>
- <meta charset="UTF-8">
- <title>GRAPE</title>
- <link rel="stylesheet" href="css/grape.css">
- <script src="js/jquery-2.1.4.js"></script>
- <script src="js/grape-js.js"></script>
- </head>
- <body>
- <div class="header">
- <img class="menu" src="img/menu-grape.png" alt="Menu" title="Menu">
- <nav class="header">
- <ul class="hmenu">
- <li>home</li>
- <li>sobre</li>
- <li>framework</li>
- </ul>
- </nav>
- </div>
- </body>
- </html>
My CSS:
- @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
- @import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700);
- body{background-color: #eeeeee; font-family: Lato, sans-serif;}
- div.header{position: absolute; width: 100%; height: 60px; top: 0; left: 0 ; background-color: #ff4c4c;}
- nav.header{position: absolute; width: 100%; height: 60px; top: 60px; left: 0 ;background-color: #333333; display: none;}
- ul.hmenu{position: relative; list-style: none; text-transform: uppercase;}
- ul.hmenu li{display: inline-block; margin-right: 40px; background-color: #efe9e5; padding: 5px;
- border-radius: 10px; font-weight: 700; color: #333333; cursor: pointer;}
- img.menu{position: absolute; width: 32px; height: 32px; left: 30px; top: 14px; cursor: pointer;}
1