Skip to content

Instantly share code, notes, and snippets.

@u01jmg3

u01jmg3/menu.html

Last active April 17, 2025 09:34
Show Gist options
  • Save u01jmg3/5c6f273ccc1d45035c78 to your computer and use it in GitHub Desktop.
Save u01jmg3/5c6f273ccc1d45035c78 to your computer and use it in GitHub Desktop.
Download ZIP
Menu Toggle Rotate on Open Animation
Raw
menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<style>
ul.drawer { width:300px; background: #5f626a; display:none; }
ul.drawer li { padding:20px 30px; color: #bbb; border-bottom:1px solid #4a4f5b; font-family: arial; }
ul.drawer li:hover { background: #6b6e75; cursor:pointer; }
.menu-container { width:70px; height:70px; background: #4b505c; float:left; position: relative; }
.menu-container:hover { background: #444955; cursor:pointer; }
.menu { width:100%; height:70px; background: #3c414d; }
.bar1 { width:19px; height:2px; background: #bbb; position: absolute; top:22px; left:24px;
-webkit-transform: rotate(00deg);
-webkit-transform-origin: 9.5px 0px;
-moz-transform: rotate(0deg);
-moz-transform-origin: 9.5px 0px;
-ms-transform: rotate(0deg);
-ms-transform-origin: 9.5px 0px;
transform: rotate(0deg);
transform-origin: 9.5px 0px;
}
.bar2 { width:19px; height:2px; background: #bbb; position: absolute; top:32px; left:24px;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 9.5px 0px;
-moz-transform: rotate(0deg);
-moz-transform-origin: 9.5px 0px;
-ms-transform: rotate(0deg);
-ms-transform-origin: 9.5px 0px;
transform: rotate(0deg);
transform-origin: 9.5px 0px;
}
.bar3 { width:19px; height:2px; background: #bbb; position: absolute; top:42px; left:24px;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 9.5px 0px;
-moz-transform: rotate(0deg);
-moz-transform-origin: 9.5px 0px;
-ms-transform: rotate(0deg);
-ms-transform-origin: 9.5px 0px;
transform: rotate(0deg);
transform-origin: 9.5px 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<a href="#" class="menu-container toggle-drawer">
<div class="bar1 menu-bar"></div>
<div class="bar2 menu-bar"></div>
<div class="bar3 menu-bar"></div>
</a>
</div>
<ul class="drawer">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Team</li>
<li>Terms</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://jqueryrotate.googlecode.com/svn-history/r155/trunk/jQueryRotateCompressed.js"></script>
<script>
$(document).ready(function(){
$('.drawer').hide();
$('.toggle-drawer').show();
$(document).on('click', '.toggle-drawer', function(){
$('.drawer').slideToggle();
});
var toggle = true;
$(document).on('click', '.menu-container', function(){
if(toggle === true){
$('.menu-bar').stop().animate({
top: 32,
width: 23,
left: 22,
}, 150, function(){
$('.menu-bar').animate({
left: 24,
width: 19
}, 150, function(){
$('.bar1').rotate({
animateTo: -132,
duration: 250
});
$('.bar2').rotate({
animateTo: -48,
duration: 250
});
$('.bar3').rotate({
animateTo: -48,
duration: 250
});
});
});
toggle = false;
return false;
} else if(toggle === false){
$('.bar1').stop().rotate({
animateTo: 0,
duration: 250
});
$('.bar2').stop().rotate({
animateTo: 0,
duration: 250
});
$('.bar3').stop().rotate({
animateTo: 0,
duration: 250
});
$('.menu-bar').stop().animate({
width:19
}, 251, function(){
$('.bar1').animate({
top: 22
}, 150);
$('.bar2').animate({
top: 32
}, 150);
$('.bar3').animate({
top: 42
}, 150);
});
toggle = true;
return false;
};
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment