Skip to content

Instantly share code, notes, and snippets.

@omniosi

omniosi/jsbin.zaxiyoxi.css

Last active December 2, 2015 12:00
Show Gist options
  • Save omniosi/9282851 to your computer and use it in GitHub Desktop.
Save omniosi/9282851 to your computer and use it in GitHub Desktop.
Download ZIP
an animated opening and closing menu button made with RaphaelJS and inspired by http://www.hugeinc.com/. It even works in IE6!
Raw
jsbin.zaxiyoxi.css
#box{
background:lightgrey;
width:60px;
height:60px;
}
Raw
jsbin.zaxiyoxi.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="box"></div>
</body>
</html>
Raw
jsbin.zaxiyoxi.js
Raphael(function(){
var box = Raphael('box', '60', '60');
var cover = box.rect(0,0,60,60).attr({fill:'lightgrey'}).toBack();
var first = box.path("M15 20L45 20");
first.attr({'stroke-width':'6px'});
var second = box.path("M15 30L45 30");
second.attr({'stroke-width':'6px',opacity:1});
var third = box.path("M15 40L45 40");
third.attr({'stroke-width':'6px'});
var n = 1;
var st = box.set();
st.push(cover,first,second,third);
st.click(function(){
if(n===2){
first.animate({path: "M15 20L45 20"},200,'ease-in-out');
second.animate({opacity:1},200,'ease-in-out');
third.animate({path: "M15 40L45 40"},200,'ease-in-out');
n--;
}else{
first.animate({path: "M15 15L45 45"},200,'ease-in-out');
second.animate({opacity:0},50,'ease-in-out');
third.animate({path: "M15 45L45 15"},200,'ease-in-out');
n++;
}
});
});
@omniosi
Copy link
Author

omniosi commented Mar 1, 2014

It even works in IE6!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment