magalhini/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Menu Selector Animation -- trying not to break..." />
  <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,800' rel='stylesheet' type='text/css'>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;

      -webkit-font-smoothing: antialiased;
    }

    body {
      font-family: 'Raleway', sans-serif;
      font-size: 1em;
    }

    .btn-update {
      border: none;
      background: #c99494;
      cursor: pointer;
      width: 15em;
      font-weight: 500;
      margin-bottom: 0;
      letter-spacing: 1px;
      color: #fff;
      text-align: center;
      position: relative;
      padding: 1em;
      transition: all .2s ease-in-out 0s;
    }

    .btn-update:after {
        content: "";
        position: absolute;
        border-top: 6px solid white;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        right: 1em;
        top: 1.5em;
        transition: transform .3s ease-in-out 0s;
    }

    .btn-update:hover:after {
        transform: rotateY(180deg);
    }

    .btn-update:active {
        box-shadow: 0 -2px 2px rgba(0,0,0,1) inset;
    }

    .btn-update:hover {
      background: #b58080;
    }

    .btn-update-state {
      text-transform: uppercase;
      font-size: .9em;
      font-weight: bold;
    }

    .list {
      margin-top: -.1em;
      list-style: none;
      padding: 0;
      width: 15em;

      -webkit-perspective: 400px;
              perspective: 400px;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .list .list-item {
      text-transform: uppercase;
      font-size: .8em;
      font-weight: 600;
      color: #616161;
      letter-spacing: .8px;
      width: 100%;
      background: #E7E7E7;
      border-bottom: 1px solid #f1f1f1;
      padding: 1.2em 2em;
      text-align: left;
      opacity: 1;
      cursor: pointer;

      -webkit-transform-origin: top;
              transform-origin: top;
      -webkit-transform: rotateX(100deg);
              transform: rotateX(100deg);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: all .6s ease-in-out 0s;
              transition: all .6s ease-in-out 0s;
      -webkit-perspective: 400px;
              perspective: 400px;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .list .list-item.selected,
    .list .list-item:hover {
      background: #E5EBFA;
    }

    .list .list-item.selected .list-item--choice {
      opacity: 1;
      background: #81C89A;
    }

    .list-item--choice {
      opacity: .5;
      background: #969696;
      position: absolute;
      width: 1em;
      height: 1em;
      right: 1em;
      float: right;
      border-radius: 2em;
      border: 3px solid #fff;

      -webkit-transition: all .3s ease-in-out 0s;
              transition: all .3s ease-in-out 0s;
    }

    .list li:hover {
      transition-duration: .2s;
      text-indent: .5em;
    }

    .list li:hover .list-item--choice {
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }

    .list li:active .list-item--choice {
      background: #81C89A;
      opacity: 1;
    }

    /* Regular animation */

    .list li:nth-child(1) {
      -webkit-animation-delay: .1s;
    }

    .list li:nth-child(2) {
      -webkit-animation-delay: .2s;
    }

    .list li:nth-child(3) {
      -webkit-animation-delay: .3s;
    }

    .list li:nth-child(4) {
      -webkit-animation-delay: .4s;
    }

    .list li:nth-child(5) {
      -webkit-animation-delay: .5s;
    }

    /* Out animation */
    .anim-rev li:nth-child(1) {
      -webkit-animation-delay: .8s;
    }

    .anim-rev li:nth-child(2) {
      -webkit-animation-delay: .6s;
    }

    .anim-rev li:nth-child(3) {
      -webkit-animation-delay: .4s;
    }

    .anim-rev li:nth-child(4) {
      -webkit-animation-delay: .2s;
    }

    .anim-rev li:nth-child(5) {
      -webkit-animation-delay: 0s;
    }

    .active li {
      visibility: visible;
      -webkit-animation-name: persiana;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-duration: .6s;
      -webkit-animation-delay: 0s;
      -webkit-animation-fill-mode: both;
    }

    .anim-rev li {
      pointer-events: none;
      -webkit-animation-name: persiana-out;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-duration: .3s;
      -webkit-animation-fill-mode: backwards;
      -webkit-animation-delay: 0s;
    }

    @-webkit-keyframes persiana-out {
      0% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: rotateX(0deg);
      }

      99% {
        -webkit-transform: rotateX(-90deg);
      }

      100% {
        visibility: hidden;
        opacity: 0;
      }
    }
    @-webkit-keyframes persiana {
      0% {
        opacity: 0;
        -webkit-transform: rotateX(100deg);
      }

      60% {
        -webkit-transform: rotateX(-25deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
      }
    }
</style>

</head>
<body>
  <div class="btn-update"><span class="btn-update-state">Rejected</div>
  <ul class="list">
    <li class="list-item">Draft
      <span class="list-item--choice"></span>
    </li>
    <li class="list-item">To be reviewed
    <span class="list-item--choice"></span></li>
    <li class="list-item">Rejected
    <span class="list-item--choice"></span></li>
    <li class="list-item">Approved
    <span class="list-item--choice"></span></li>
    <li class="list-item">Published
    <span class="list-item--choice"></span></li>
  </ul>
<script id="jsbin-javascript">
    var el = document.querySelector('.list');
    var btn = document.querySelector('div');

    var defaultSelected = 0;
    var items = document.querySelectorAll('.list li');

    var currentItem = items[defaultSelected];
    var currentItemStatusEl = document.querySelector('.btn-update-state');

    // Select default option
    selectOption(currentItem, false);

    btn.addEventListener('click', toggleOpen);

    el.addEventListener('click', function(e) {
      var src = getTarget(e);

      if (getType(src) === 'li') {
        selectOption(src, true);
      }
    });

    function toggleOpen() {
      if (!el.classList.contains('active')) {
        el.classList.add('active');
        el.classList.remove('anim-rev');
      } else {
        el.classList.add('anim-rev');
        el.classList.remove('active');
      }
    }

    function selectOption(item, toggle) {
      currentItem.classList.remove('selected');
      item.classList.add('selected');
      currentItem = item;

      currentItemStatusEl.textContent = item.textContent;

      if (toggle) {
        setTimeout(function() {
          toggleOpen();
        }, 100);
      }
    }

    function getTarget(e) {
      e = e || window.event;
      return e.target || e.srcElement;
    }

    function getType(el) {
      return el.tagName.toLowerCase();
    }
</script>

</body>
</html>

## jsbin.lokaqo.css
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
}

.btn-update {
  border: none;
  background: #c99494;
  cursor: pointer;
  width: 15em;
  font-weight: 500;
  margin-bottom: 0;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  padding: 1em;
  transition: all .2s ease-in-out 0s;
}
.btn-update:hover {
  transform: rotateY(200deg);
}
.btn-update:hover {
  background: #b58080;
}

.btn-update-state {
  text-transform: uppercase;
  font-size: .9em;
  font-weight: bold;
}

ul {
  margin-top: -.1em;
  list-style: none;
  padding: 0;
  width: 15em;
  -webkit-perspective: 400px;
  -webkit-transform-style: preserve-3d;
}

.list li {
  text-transform: uppercase;
  font-size: .8em;
  font-weight: 600;
  color: #616161;
  letter-spacing: .8px;
  width: 100%;
  background: #E7E7E7;
  border-bottom: 1px solid white;
  padding: 1.2em 2em;
  text-align: left;
  opacity: 1;
  cursor: pointer;
  transition: all .1s ease-in-out 0s;
}
.list li.selected, .list li:hover {
  background: #e1e1e1;
}
.list li.selected .list-item--choice {
  opacity: 1;
  background: #81C89A;
}

.list-item--choice {
  opacity: .5;
  background: #969696;
  position: absolute;
  width: 1em;
  height: 1em;
  right: 1em;
  float: right;
  border-radius: 2em;
  border: 2px solid #fff;
  transition: all .3s ease-in-out 0s;
}

.list li {
  visibility: hidden;
  -webkit-transform-origin: top;
  -webkit-transform: rotateX(100deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transition: all .6s ease-in-out 0s;
}
.list li:hover {
  transition-duration: .2s;
  text-indent: .5em;
}
.list li:hover .list-item--choice {
  -webkit-transform: scale(1.5);
}
.list li:active .list-item--choice {
  background: #81C89A;
  opacity: 1;
}

.list li:nth-child(1) {
  -webkit-animation-delay: .1s;
}

.list li:nth-child(2) {
  -webkit-animation-delay: .2s;
}

.list li:nth-child(3) {
  -webkit-animation-delay: .3s;
}

.list li:nth-child(4) {
  -webkit-animation-delay: .4s;
}

.list li:nth-child(5) {
  -webkit-animation-delay: .5s;
}

/* out */
.anim-rev li:nth-child(1) {
  -webkit-animation-delay: .8s;
}

.anim-rev li:nth-child(2) {
  -webkit-animation-delay: .6s;
}

.anim-rev li:nth-child(3) {
  -webkit-animation-delay: .4s;
}

.anim-rev li:nth-child(4) {
  -webkit-animation-delay: .2s;
}

.anim-rev li:nth-child(5) {
  -webkit-animation-delay: 0s;
}

.active li {
  visibility: visible;
  -webkit-animation-name: persiana;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: .6s;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: both;
}

.anim-rev li {
  pointer-events: none;
  -webkit-animation-name: persiana-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: .3s;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-delay: 0s;
}

@-webkit-keyframes persiana-out {
  0% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
  }

  99% {
    transform: rotateX(-90deg);
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}
@-webkit-keyframes persiana {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(100deg);
  }

  60% {
    -webkit-transform: rotateX(-25deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

## jsbin.lokaqo.js
var el = document.querySelector('.list');
var btn = document.querySelector('div');

var defaultSelected = 0;
var items = document.querySelectorAll('.list li');

var currentItem = items[defaultSelected];
var currentItemStatusEl = document.querySelector('.btn-update-state');

// Select default option
selectOption(currentItem, false);

btn.addEventListener('click', toggleOpen);

el.addEventListener('click', function(e) {
  var src = getTarget(e);

  if (getType(src) === 'li') {
    selectOption(src, true);
  }
});

function toggleOpen() {
  if (!el.classList.contains('active')) {
    el.classList.add('active');
    el.classList.remove('anim-rev');
  } else {
    el.classList.add('anim-rev');
    el.classList.remove('active');
  }
}

function selectOption(item, toggle) {
  currentItem.classList.remove('selected');
  item.classList.add('selected');
  currentItem = item;

  currentItemStatusEl.textContent = item.textContent;

  if (toggle) {
    setTimeout(function() {
      toggleOpen();
    }, 100);
  }
}

function getTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

function getType(el) {
  return el.tagName.toLowerCase();
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Menu Selector Animation -- trying not to break..." />
	<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,800' rel='stylesheet' type='text/css'>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-font-smoothing: antialiased;
	}

	body {
	font-family: 'Raleway', sans-serif;
	font-size: 1em;
	}

	.btn-update {
	border: none;
	background: #c99494;
	cursor: pointer;
	width: 15em;
	font-weight: 500;
	margin-bottom: 0;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
	position: relative;
	padding: 1em;
	transition: all .2s ease-in-out 0s;
	}

	.btn-update:after {
	content: "";
	position: absolute;
	border-top: 6px solid white;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	right: 1em;
	top: 1.5em;
	transition: transform .3s ease-in-out 0s;
	}

	.btn-update:hover:after {
	transform: rotateY(180deg);
	}

	.btn-update:active {
	box-shadow: 0 -2px 2px rgba(0,0,0,1) inset;
	}

	.btn-update:hover {
	background: #b58080;
	}

	.btn-update-state {
	text-transform: uppercase;
	font-size: .9em;
	font-weight: bold;
	}

	.list {
	margin-top: -.1em;
	list-style: none;
	padding: 0;
	width: 15em;

	-webkit-perspective: 400px;
	perspective: 400px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	}

	.list .list-item {
	text-transform: uppercase;
	font-size: .8em;
	font-weight: 600;
	color: #616161;
	letter-spacing: .8px;
	width: 100%;
	background: #E7E7E7;
	border-bottom: 1px solid #f1f1f1;
	padding: 1.2em 2em;
	text-align: left;
	opacity: 1;
	cursor: pointer;

	-webkit-transform-origin: top;
	transform-origin: top;
	-webkit-transform: rotateX(100deg);
	transform: rotateX(100deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all .6s ease-in-out 0s;
	transition: all .6s ease-in-out 0s;
	-webkit-perspective: 400px;
	perspective: 400px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	}

	.list .list-item.selected,
	.list .list-item:hover {
	background: #E5EBFA;
	}

	.list .list-item.selected .list-item--choice {
	opacity: 1;
	background: #81C89A;
	}

	.list-item--choice {
	opacity: .5;
	background: #969696;
	position: absolute;
	width: 1em;
	height: 1em;
	right: 1em;
	float: right;
	border-radius: 2em;
	border: 3px solid #fff;

	-webkit-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
	}

	.list li:hover {
	transition-duration: .2s;
	text-indent: .5em;
	}

	.list li:hover .list-item--choice {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	}

	.list li:active .list-item--choice {
	background: #81C89A;
	opacity: 1;
	}

	/* Regular animation */

	.list li:nth-child(1) {
	-webkit-animation-delay: .1s;
	}

	.list li:nth-child(2) {
	-webkit-animation-delay: .2s;
	}

	.list li:nth-child(3) {
	-webkit-animation-delay: .3s;
	}

	.list li:nth-child(4) {
	-webkit-animation-delay: .4s;
	}

	.list li:nth-child(5) {
	-webkit-animation-delay: .5s;
	}

	/* Out animation */
	.anim-rev li:nth-child(1) {
	-webkit-animation-delay: .8s;
	}

	.anim-rev li:nth-child(2) {
	-webkit-animation-delay: .6s;
	}

	.anim-rev li:nth-child(3) {
	-webkit-animation-delay: .4s;
	}

	.anim-rev li:nth-child(4) {
	-webkit-animation-delay: .2s;
	}

	.anim-rev li:nth-child(5) {
	-webkit-animation-delay: 0s;
	}

	.active li {
	visibility: visible;
	-webkit-animation-name: persiana;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 0s;
	-webkit-animation-fill-mode: both;
	}

	.anim-rev li {
	pointer-events: none;
	-webkit-animation-name: persiana-out;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: .3s;
	-webkit-animation-fill-mode: backwards;
	-webkit-animation-delay: 0s;
	}

	@-webkit-keyframes persiana-out {
	0% {
	visibility: visible;
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	}

	99% {
	-webkit-transform: rotateX(-90deg);
	}

	100% {
	visibility: hidden;
	opacity: 0;
	}
	}
	@-webkit-keyframes persiana {
	0% {
	opacity: 0;
	-webkit-transform: rotateX(100deg);
	}

	60% {
	-webkit-transform: rotateX(-25deg);
	}

	100% {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	}
	}
	</style>

	</head>
	<body>
	<div class="btn-update"><span class="btn-update-state">Rejected</div>
	<ul class="list">
	<li class="list-item">Draft
	<span class="list-item--choice"></span>
	</li>
	<li class="list-item">To be reviewed
	<span class="list-item--choice"></span></li>
	<li class="list-item">Rejected
	<span class="list-item--choice"></span></li>
	<li class="list-item">Approved
	<span class="list-item--choice"></span></li>
	<li class="list-item">Published
	<span class="list-item--choice"></span></li>
	</ul>
	<script id="jsbin-javascript">
	var el = document.querySelector('.list');
	var btn = document.querySelector('div');

	var defaultSelected = 0;
	var items = document.querySelectorAll('.list li');

	var currentItem = items[defaultSelected];
	var currentItemStatusEl = document.querySelector('.btn-update-state');

	// Select default option
	selectOption(currentItem, false);

	btn.addEventListener('click', toggleOpen);

	el.addEventListener('click', function(e) {
	var src = getTarget(e);

	if (getType(src) === 'li') {
	selectOption(src, true);
	}
	});

	function toggleOpen() {
	if (!el.classList.contains('active')) {
	el.classList.add('active');
	el.classList.remove('anim-rev');
	} else {
	el.classList.add('anim-rev');
	el.classList.remove('active');
	}
	}

	function selectOption(item, toggle) {
	currentItem.classList.remove('selected');
	item.classList.add('selected');
	currentItem = item;

	currentItemStatusEl.textContent = item.textContent;

	if (toggle) {
	setTimeout(function() {
	toggleOpen();
	}, 100);
	}
	}

	function getTarget(e) {
	e = e \|\| window.event;
	return e.target \|\| e.srcElement;
	}

	function getType(el) {
	return el.tagName.toLowerCase();
	}
	</script>

	</body>
	</html>