animated hamburger icon

cfrank65 · 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);
       }
       
   </style>
</head>
<body>
   <div class="icon">
       <div class="hamburger"></div>
   </div>
</body>
</html>

cfrank65 · 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

Funce · 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.

Sign In

animated hamburger icon

Recommended Posts

cfrank65

Link to comment

Share on other sites

cfrank65

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity