cfrank65 Posted February 25, 2019 Share Posted February 25, 2019 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> Link to comment Share on other sites More sharing options...
cfrank65 Posted February 25, 2019 Author Share Posted February 25, 2019 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 Link to comment Share on other sites More sharing options...
Funce Posted February 25, 2019 Share Posted February 25, 2019 You're missing a couple of things from the video I'll list them Your Youtube link is an HTML comment inside a CSS block, you'll need to move that outside the <style> tags to make it work properly You have an extra ':' after translate in your hamburger. Your left is supposed to be 50% in your hamburger. Your box shadow color in hamburger:before, hamburger:after is supposed to be rgba(0, 0, 0, 0.2) You have a background style in your icon. You need a transition of 0.5s in your hamburger:before, hamburger:after Hope this helps. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now