Sunday, June 28, 2015

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>






No comments:

Post a Comment