Jump to content

cfrank65

Members
  • Posts

    2
  • Joined

  • Last visited

cfrank65's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. I forgot to mention, the positioning of the hamburger icon is not working, at least what I tried. also I would like to ask, is it working on all browsers?thank you, frank
  2. Hi I tried to adapt a youtube tutorial to w3schools navigation but it is not working as I expect. Can I get help? also the youtube tutorial detail is posted. thank you , frank <!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.2.1.js"></script> <script> $(document).ready(function(){ $('.icon').click(function(){ $('.icon').toggleClass('active'); }) }) </script> <style> body{ margin:0; padding:0; background:#ff5c40; } .icon{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80px; height:80px; cursor:pointer; background:#000; } .hamburger{ width:50px; height:6px; background:#fff; position:absolute; top:50%; left:20%; transform:translate:(-50%,-50%); box-shadow:0 2px 5px rgba(0,0,0,.2); transition:.5s; } .hamburger:before, .hamburger:after{ content:''; position:absolute; width:50px; height:6px; background:#fff; box-shadow:0 2px 5px rgba(); } .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); } <!-- https://www.youtube.com/watch?v=U17mz-RFfAY --> </style> </head> <body> <div class="icon"> <div class="hamburger"></div> </div> </body> </html>
×
×
  • Create New...