Stacked menu

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"description":"Stacked menu","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var svg = d3.select("svg");

svg.append("rect")
  .attr("width", 100)
  .attr("height", 100)
  .attr("x", 100)
  .attr("y", 100)
  .style("fill", "#3C3763")
	.attr("class","part")
	.attr('transform','skewX(20)')

svg.append("rect")
  .attr("width", 100)
  .attr("height", 100)
  .attr("x", 113)
  .attr("y", 90)
  .style("fill", "#008FFF")
	.attr("class","part")
	.attr('transform','skewX(20)')

svg.append("rect")
  .attr("width", 100)
  .attr("height", 100)
  .attr("x", 126)
  .attr("y", 80)
	.attr("class","part")
  .style("fill", "#2B7C81")
	.attr('transform','skewX(20)')

var toogle = 1;
var group = svg.append("svg:g")
	.attr("transform","translate("+[150,128]+")")
	.attr("class","group")
.on('click',function(){
	
  if(toogle == 1){
  	d3.selectAll('.part')
    .transition()
    .duration(1000)
    .attr('transform','skewX(0)') 
    .attr("x", function(d,i){
    	return 160 + (110 *i);
    })
 	 .attr("y", 80);  
  
  
  }else{
    	d3.selectAll('.part')
    .transition()
    .duration(1000)
    .attr('transform','skewX(20)') 
    .attr("x", function(d,i){
    	return  90+(10 *i);
    })
       .attr("y", function(d,i){
    	return 100 - (i * 10);
    });       

    
    
    
  }
 	toogle *= -1;

});


group.append("svg:circle")
	.attr("r",22)
	.attr("cx",0)
	.attr("cy",0)
	.attr("class","button");

group.append('svg:text')
.text('+')
.attr("fill", "#FFFFFF")
.attr("x", -9)
.attr("y", 11)
.attr("font-size", 30)
.attr("font-family", "Arial")
.attr("text-anchor", "start");

style.css

.button:hover{
fill: #072F55;
  }
    
.button{
  fill: #484CC4;
  stroke-width: 5;
  stroke: white;
  stroke-opacity: 0.5;
}