Hamburger Menu code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hamburger Menu Icon</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.icon').click(function(){ $('.icon').toggleClass('active'); }) }) </script> </head> <body> <div class="icon"> <div class="hamburger"></div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: gold; } .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; cursor: pointer; background: black; } .hamburger { width: 50px; height: 6px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.5s; } .hamburger::before, .hamburger::after { content: ''; position: absolute; width: 50px; height: 6px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.5s; } .hamburger::before { top: -16px; } .hamburger::after { top: 16px; } .icon.active .hamburger { background: rgba(0,0,0,0); box-shadow: 0 2px 5px rgba(0,0,0,0); } .icon.active .hamburger::before { top: 0; transform: rotate(45deg); } .icon.active .hamburger::after { top: 0; transform: rotate(135deg); }
