Circle menu

Borrowed this one from http://dabblet.com/gist/3912488

by anup1986

HTML

<!-- content to be placed inside <body>…</body> -->
<input type='radio' name='opt' id='ococonut' class='menuopt ococonut'>
<input type='radio' name='opt' id='ovanilla' class='menuopt ovanilla'>
<input type='radio' name='opt' id='oorange' class='menuopt oorange'>
<input type='radio' name='opt' id='oalmond' class='menuopt oalmond'>
<input type='radio' name='opt' id='ogrape' class='menuopt ogrape'>
<input type='radio' name='opt' id='oblackberry' class='menuopt oblackberry'>
<input type='radio' name='opt' id='ocherry' class='menuopt ocherry'>
<input type='radio' name='opt' id='ostrawberry' class='menuopt ostrawberry'>
<input type='radio' name='opt' id='oraspberry' class='menuopt oraspberry'>
<input type='radio' name='opt' id='unsel' class='menuopt' checked>
<nav>
	<ul class='circle'>
		<li class='coconut light slice'>
				<label for='ococonut' class='circle'>Coconut</label>
		</li>
		<li class='vanilla light slice'>
				<label for='ovanilla' class='circle'>Vanilla</label>
		</li>
		<li class='orange light slice'>
				<label for='oorange' class='circle'>Orange</label>
		</li>
		<li class='almond light slice'>
				<label for='oalmond' class='circle'>Almond</label>
		</li>
		<li class='grape light slice'>
				<label for='ogrape' class='circle'>Grape</label>
		</li>
		<li class='blackberry dark slice'>
				<label for='oblackberry' class='circle'>Blackberry</label>
		</li>
		<li class='cherry dark slice'>
				<label for='ocherry' class='circle'>Cherry</label>
		</li>
		<li class='strawberry dark slice'>
				<label for='ostrawberry' class='circle'>Strawberry</label>
		</li>
		<li class='raspberry light slice'>
				<label for='oraspberry' class='circle'>Raspberry</label>
		</li>
		<li class='unsel circle'><label for='unsel'></label></li>
	</ul>
</nav>

CSS

/**
 * Circular menu v2
 */
* { margin: 0; padding: 0; }
html { font: 100%/1.3 Century Gothic, Verdana, sans-serif; }
body { overflow: hidden; min-width: 20em; }
.menuopt { display: none; }
.circle, .circle:before, .circle:after { border-radius: 50%; }
nav {
	margin: 5em auto;
	min-width: 16em; width: 72%; max-width: 40em;
}
nav ul {
	position: relative;
	padding: 50%;
	max-width: 0; max-height: 0;
	box-shadow: 0 0 .5em rgba(0,0,0,.5);
	list-style: none;
	background: white;
}
nav li {
	position: absolute;
	transition: .4s ease-out;
}
.slice {
	overflow: hidden;
	position: absolute;
	top: 0; left: 0;
	width: 50%; height: 50%;
	transform-origin: 100% 100%;
}
.unsel {
	top: 34%; left: 34%;
	width: 32%; height: 32%;
	box-shadow: 0 0 .75em;
	background: paleturquoise;
}
.coconut { transform: skewX(50deg); }
.vanilla { transform: rotate(40deg) skewX(50deg); }
.orange { transform: rotate(80deg) skewX(50deg); }
.almond { transform: rotate(120deg) skewX(50deg); }
.grape { transform: rotate(160deg) skewX(50deg); }
.blackberry { transform: rotate(-160deg) skewX(50deg); }
.cherry { transform: rotate(-120deg) skewX(50deg); }
.strawberry { transform: rotate(-80deg) skewX(50deg); }
.raspberry { transform: rotate(-40deg) skewX(50deg); }
.magnifiable { height: 100%; }
nav label { cursor: pointer; }
.slice label {
	display: block;
	width: 200%; height: 200%;
	transform: skew(-50deg) rotate(-70deg);
	box-shadow: 0 0 .1em black;
	opacity: .5;
	color: transparent;
	font-size: .8em;
	line-height: 1.9;
	text-align: center;
	text-decoration: none;
	transition: 1s;
}
.slice label:before {
	position: absolute;
	top: 10%; left: 10%;
	width: 80%; height: 80%;
	border-radius: 50%;
	box-shadow: 0 0 1em rgba(0,0,0,.5);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 35% 35%;
	content: '';
}
.slice label:hover { opacity: 1; }
.dark label:hover { color: white; }
.light label:hover { color: black; }
.unsel label {
	display: block;
	height: 100%;
	background:...