Experimento Menu 1

Idea de menú visto en la página oficial de RIP SLYME

by Porfirio Chavez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js"></script>
<div>
<div class="activador">

</div>
<div class="cajita uno">
</div>
<div class="cajita dos">
</div>
<div class="cajita tres">
</div>
</div>

CSS

.activador {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: palegreen;
  top: 140px;
  left: 90px;
  cursor: pointer;
}
.cajita {
  position: absolute;
  width: 40px;
  height: 120px;
  background-color: pink;
  margin-left: 60px;
  left: 40px;
  top: 40px;
  z-index: -2;
  cursor: pointer;
  transition: 1s;
  //opacity: 0;
}

.cajita:hover{
  background-color: orange;
}

.uno {
  transform: rotate(-45deg);
  left: 0px;
  top: 120px;
  height: 60px;
  opacity: 0
}

.dos {
  transform: rotate(0deg);
  top: 120px;
  height: 60px;
  opacity:0;
}

.tres {
  transform: rotate(45deg);
  left: 60px;
  top: 120px;
  height: 60px;
  opacity: 0;
}

JavaScript

$(document).ready(function(){
	var cajita = $(".cajita");
  var activador = $('.activador');
  
  activador.on('click', activar);
  
  function activar(){
      $('.uno').transition({
       y: -60,
       x: -20,
       rotate: '-45deg',
       opacity: 1,
       height: '120px'
      });
      $('.dos').transition({
       y: -80,
       opacity: 1,
       height: '120px'
      });
      $('.tres').transition({
        rotate: '45deg',
        y: -60,
        x: -20,
        opacity: 1,
        height: '120px'
      });
      
      activador.off('click');
      
      activador.on('click', desactivar);
  }
  
  function desactivar(){
  	$('.uno').transition({
    	y: 0,
      x: 0,
       rotate: '-45deg',
       opacity: 0,
       height: '60px'
      });
  
      $('.dos').transition({
       y: 0,
       opacity: 0,
       height: '60px'
      });
  
    $('.tres').transition({
      rotate: '45deg',
      x: 20,
      y: 0,
      opacity: 0,
      height: '60px'
    });
    
    activador.off('click');
    
    activador.on('click', activar);
  }
});