Template:Uniandes Colombia/animMenu.js

var svg = document.getElementById('menu'), items = svg.querySelectorAll('.item'),

   trigger = document.getElementById('trigger'),
   label = trigger.querySelectorAll('#label')[0],
   open = false, //changed by PCR to close menu initially
   angle = 45;

//close menu initially ADDED BY PCR function closeMenu(speed1,s2,s3,s4) { open = false;

   var tl = new TimelineLite();
   for(var i=0; i<items.length; i++){
     tl.to(items[i], s2, {rotation: 0, ease:Circ.easeOut}, speed1);
   }
   tl.to(items, s4, {scale:0, ease:Back.easeIn}, s3);
   label.innerHTML = "+";
   svg.style.pointerEvents = "none";

} var quick = 0; closeMenu(quick, quick, quick, quick);

//set up event handler trigger.addEventListener('click', toggleMenu, false); // svg.style.pointerEvents = "none";

//toggle menu when trigger is clicked function toggleMenu(event) {

  if (!event) var event = window.event;
   event.stopPropagation();
 open = !open;
 if (open) {
   var tl = new TimelineLite();
 	tl.to(items, 0.2, {scale:1, ease:Back.easeOut.config(4)}, 0.05);
   for(var i=0; i<items.length; i++){
     tl.to(items[i], 0.7, {rotation:-i*angle + "deg", ease:Bounce.easeOut}, 0.35);
   }
   label.innerHTML = "-";
   svg.style.pointerEvents = "auto";
 } else {
   var tl = new TimelineLite();
   for(var i=0; i<items.length; i++){
     tl.to(items[i], 0.3, {rotation: 0, ease:Circ.easeOut}, 0.05);
   }
   tl.to(items, .3, {scale:0, ease:Back.easeIn}, 0.3);
   label.innerHTML = "+";
   svg.style.pointerEvents = "none";
 }

}

svg.onclick = function (e) {

   e.stopPropagation();

} //close the nav when document is clicked document.onclick = function () {

   closeMenu(0.05,0.3,0.3,0.3); // EDITED BY PCR

};