Responsive JS / CSS Animated Menu for Responsive Website

We working on a website and developing toggle menu for Responsive website design only.

Demo here.

Source Code || Download Here

<style> #toggle { position: absolute; height: 45px; width: 45px; cursor: pointer; } #toggle .ham-bar { position: absolute; left: 0; height: 4px; width: 39px; margin: 0; background-color: #74c3f0; border-radius: 0; background-clip: padding-box; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } #toggle .ham-bar.ham-bar-one { top: 12px; transform: translateY(0px) rotateZ(0deg); -ms-transform: translateY(0px) rotateZ(0deg); -webkit-transform: translateY(0px) rotateZ(0deg); -moz-transform: translateY(0px) rotateZ(0deg); -o-transform: translateY(0px) rotateZ(0deg); } #toggle .ham-bar.ham-bar-two { top: 21px; opacity: 1; display: inline; } #toggle .ham-bar.ham-bar-three { top: 30px; transform: translateY(0px) rotateZ(0deg); -ms-transform: translateY(0px) rotateZ(0deg); -webkit-transform: translateY(0px) rotateZ(0deg); -moz-transform: translateY(0px) rotateZ(0deg); -o-transform: translateY(0px) rotateZ(0deg); } #toggle.crisscross .ham-bar.ham-bar-one { transform: translateY(9px) rotateZ(45deg); -ms-transform: translateY(9px) rotateZ(45deg); -webkit-transform: translateY(9px) rotateZ(45deg); -moz-transform: translateY(9px) rotateZ(45deg); -o-transform: translateY(9px) rotateZ(45deg); } #toggle.crisscross .ham-bar.ham-bar-two { opacity: 0; display: none; } #toggle.crisscross .ham-bar.ham-bar-three { transform: translateY(-9px) rotateZ(-45deg); -ms-transform: translateY(-9px) rotateZ(-45deg); -webkit-transform: translateY(-9px) rotateZ(-45deg); -moz-transform: translateY(-9px) rotateZ(-45deg); -o-transform: translateY(-9px) rotateZ(-45deg); } </style> <script type='text/javascript'>//<![CDATA[ // this uses JQuery since we're assuming most sites use it,  //but can easily be changed to use any other identifier $('#toggle').click(function() { $('#toggle').toggleClass("crisscross"); }); //]]></script> <div id="toggle"> <span class="ham-bar ham-bar-one"></span> <span class="ham-bar ham-bar-two"></span> <span class="ham-bar ham-bar-three"></span> </div>