Mobile Circle Navigation

HTML

<script src="http://fonts.googleapis.com/css?family=Lato"></script>
<header id="top-head">
	<div id="top-head-inner">
		<div id="nav-toggle">
			<div>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<nav id="global-nav">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">PRODUCT</a></li>
				<li><a href="#">WORKS</a></li>
				<li><a href="#">COMPANY</a></li>
				<li><a href="#">CONTACT</a></li>
        <li><a href="#">CONTACT2</a></li>
        <li><a href="#">CONTACT3</a></li>
			</ul>
		</nav>
		<div id="nav-bg"></div>
	</div>
</header>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);
body {
  font-family: 'Lato', sans-serif;
  background: #eee;
}
/* ***********************************************************
* #global-nav
* *********************************************************** */
.open #global-nav {
  z-index: 1000;
  visibility: visible;
}
#global-nav {
  visibility: hidden;
  position: fixed;
  display: table;
  vertical-align: middle;
  color: #fff;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#global-nav ul {
  display: table-cell;
  vertical-align: middle;
  list-style: none;
}
#global-nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 0;
  background-color: #99cc00;
}
#global-nav a:hover {
  color: #99cc00;
  text-decoration: none;
  display: block;
  padding: 10px 0;
  background-color: #fff;
}
/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li {
  opacity: 0;
/*   -webkit-transform: scaleX(0) translateX(100px);
  transform: scaleX(0) translateX(100px); */
/*   -webkit-transition: none;
  transition: none; */
}
.open #global-nav ul li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
/* .open #global-nav ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}
.open #global-nav ul li:nth-child(6) {
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
} */
/*...

JavaScript

$('#nav-toggle').click(function(){
  $('body').toggleClass('open');
});