Animated Navigation

by Mahbub Alam

HTML

<div id="menu"><input id="open" type="checkbox" /><label for="open"></label> <nav>
<ul>
	<li><a href="#">Coding</a></li>
	<li><a href="#">WordPress</a></li>
	<li><a href="#">Apps</a></li>
	<li><a href="#">Archive</a></li>
	<li><a href="#">Designzzz</a></li>
	<li><a href="#">Family</a></li>
	<li><a href="#">Tools</a></li>
	<li><a href="#">Photography</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</nav></div>

CSS

#menu {
margin:100px auto;
width:300px;
}
#menu nav {
height:300px;
overflow:visible !important;
position:relative;
}

#menu nav ul {
margin:0 0;
padding:0 0;
list-style:none;
}

#menu nav li {
margin:0 0;
padding:0 0;
float:left;
display:inline;
-webkit-box-shadow:-650px 500px 0 #BC0036,200px -100px 0 #6CBC00,300px 100px 0 #0A40EA, 700px -500px 0 #EAC60A;
-moz-box-shadow:-650px 500px 0 #BC0036,200px -100px 0 #6CBC00,300px 100px 0 #0A40EA, 700px -500px 0 #EAC60A;
box-shadow:-650px 500px 0 #BC0036,200px -100px 0 #6CBC00,300px 100px 0 #0A40EA, 700px -500px 0 #EAC60A;
}

#menu nav a {
display:block;
background-color:#D7460D;
color:gold;
text-decoration:none;
width:100px;
height:100px;
font:bold 16px/100px 'Arial Narrow',Arial,Sans-Serif;
text-align:center;
}

#menu nav {
-webkit-transition:all 2s ease-out;
-moz-transition:all 2s ease-out;
-ms-transition:all 2s ease-out;
-o-transition:all 2s ease-out;
transition:all 2s ease-out;
}

#menu nav ul {
-webkit-transform:scale(0.2);
-moz-transform:scale(0.2);
-ms-transform:scale(0.2);
-o-transform:scale(0.2);
transform:scale(0.2);
-webkit-transition:all 10s ease-in-out;
-moz-transition:all 10s ease-in-out;
-ms-transition:all 10s ease-in-out;
-o-transition:all 10s ease-in-out;
transition:all 10s ease-in-out;
}

/* Set the default item transition */
#menu nav li {
-webkit-transition:all 10s ease-in-out;
-moz-transition:all 10s ease-in-out;
-ms-transition:all 10s ease-in-out;
-o-transition:all 10s ease-in-out;
transition:all 10s ease-in-out;
opacity:0.4;
}

#menu nav a {
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-ms-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}

/* Make some random position */
#menu nav li:nth-child(1) {
-webkit-transform:rotate(-370deg) translate(400px,200px);
-moz-transform:rotate(-370deg) translate(400px,200px);
-ms-transform:rotate(-370deg) translate(400px,200px);
-o-transform:rotate(-370deg)...