Menu Icon using html css js
<!doctype html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <style> /* menu icon */ .container { display:inline-block; width:auto; padding:10px; } .bar1 , .bar2 , .bar3 { width: 55px; height: 3px; background-color: #000; margin: 4px 0px; transition: 0.4s; } .change .bar1 { transform: rotate(-45deg) translate(-5.6px, 4px); /* first velue, 3bar height + margin 6 * 2 = 17 * / 3 = first valu ( -5.6px ) Second velue = margin value ( 4px ) */ } .change .bar2 { opacity:0; } .change .bar3 { transform: rotate(45deg) translate(-5px,-5px); /* bar1 + bar3 height = 6 + margin value 4 = 10 / 2 = 5, this is the value of two parameter */ } </style> </head> <body> <div class="container" id="mmm"> <div class="bar1"></div> <div class="bar2"></div> <div class="...