CodePen

HTML

            
              <body>
	<div id="container">
    	<div id="main-circle"></div>
        <div id="shadow-circle"></div>
        	<input type="radio" name="item" class="item" id="bubble" checked="checked">
            <input type="radio" name="item" class="item" id="cloud">
            <input type="radio" name="item" class="item" id="cog">
			<input type="radio" name="item" class="item" id="heart">
        <div id="labels">
            <label for="bubble"></label>
            <label for="cloud"></label>
            <label for="cog"></label>
            <label for="heart"></label>
        </div>
        <div id="submenus">
        	<div id="sub-bubble" class="tooltip">
           		<a href="#">cheescake</a><a href="#">strawberry</a>
            </div>
            <div id="sub-cloud" class="tooltip">
           		<a href="#">watermelon</a><a href="#">cucumber</a>
            </div>
            <div id="sub-cog" class="tooltip">
           		<a href="#">banana</a><a href="#">cranberry</a>
            </div>
            <div id="sub-heart" class="tooltip">
           		<a href="http://burakcan.me">my website</a><a href="http://www.twitter.com/neoberg">twitter</a>
            </div>
        </div>
        <div id="arrow"></div>
    </div>
</body>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* 
     Burak Can
     www.brkcan.net
     twitter.com/neoberg
*/
html {
		width: 100%;
		height: 100%;
	}
	body {
		background: url(https://s3-us-west-2.amazonaws.com/work-statics/circle-menu/ferris.jpg) no-repeat center;
		background-size: cover;
		font-family: 'Myriad Pro',Helvetica, sans-serif;
		font-size: 12px;
		color: #fff;
	}
	#container {
		width: 216px;
		height: 216px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -108px 0 0 -108px;
	}
	#main-circle {
		width: 120px;
		height: 119px;
		border-radius: 108px;
		border: 48px solid rgba(255,255,255,0.5);
		position:absolute;
	}
	#shadow-circle {
		width: 216px;
		height: 216px;
		border-radius: 108px;
		box-shadow: inset  0px 2px 2px 0px rgba(0, 0, 0, 0.2);
		position:absolute;
		top: 0px;
		left: 0px;
	}
	#labels {
		position: absolute;
		width: 215px;
		height: 215px;
		transition: all 600ms ease-in-out;
	}
	.item {
		position: absolute;
		display:block;
		margin: 0px;
		padding: 0px;
		opacity: 0;
	  transform-origin: 50% 424%;
	}
	label {
		position:absolute;
		display:block;
		width: 23px;
		height: 23px;
		left: 97px;
		top: 13px;
		transform-origin: 50% 407%;
		cursor: pointer;
	}
	label[for=bubble] {
		background: url('https://s3-us-west-2.amazonaws.com/work-statics/circle-menu/bubble.svg') no-repeat top center;
		transform:rotateZ(0deg);
	}
	label[for=cloud] {
		background: url('https://s3-us-west-2.amazonaws.com/work-statics/circle-menu/cloud.svg') no-repeat top center;
		transform:rotateZ(-90deg);
	}
	label[for=cog] {
		background: url('https://s3-us-west-2.amazonaws.com/work-statics/circle-menu/cog.svg') no-repeat top center;
		transform:rotateZ(90deg);
	}
	label[for=heart] {
		background: url('https://s3-us-west-2.amazonaws.com/work-statics/circle-menu/heart.svg') no-repeat top center;
		transform:rotateZ(180deg);
	}
	#arrow {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #000;
		position: absolute;
		top: 50px;
		left: 100px;
	}
	#arrow:after {
		content:"";
		width: 0px;
		height: 0px;
		border: 6px solid transparent;
		border-bottom: 8px solid #000;
		position:absolute;
		left: 1px;
		top: -11px;
	}
	/*Positions*/
		.item#bubble:checked~#labels {
			transform:rotateZ(0deg);
		}
		.item#cloud:checked~#labels {
			transform:rotateZ(90deg);
		}
		.item#cog:checked~#labels {
			transform:rotateZ(-90deg);
		}
		.item#heart:checked~#labels {
			transform:rotateZ(180deg);
		}
	/*Submenus*/
	#submenus {
		perspective: 600px;
	}
	.tooltip {
		min-width: 150px;
		height: 31px;
		line-height: 34px;
		padding: 0px 10px;
		background: rgba(255,255,255,0.6);
		position:absolute;
		border-radius: 2px;
		top: -45px;
		left: 24px;
		box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, 0.16);
		text-align:center;
		transition: all 600ms ease-in-out;
		transform: rotateZ(45deg) rotateY(90deg);
		transform-origin: 50% 490%;
		opacity: 0;
	}
	.tooltip:after {
		content:"";
		border: 8px solid transparent;
		border-top: 10px solid rgba(255,255,255,0.6);
		top: 31px;
		left: 77px;
		position:absolute;
	}
	.tooltip a {
		color: #000;
		text-decoration: none;
		margin: 0px 8px;
		opacity: 0.9;
	}
	.tooltip a:hover {
		text-decoration: underline;
	}
		/*Submenu positions*/
		.item#bubble:checked~#submenus #sub-bubble {
			transform: rotateZ(0deg);
			opacity: 1;
		}
		.item#cloud:checked~#submenus #sub-cloud {
			transform: rotateZ(0deg);
			opacity: 1;
		}
		.item#cog:checked~#submenus #sub-cog {
			transform: rotateZ(0deg);
			opacity: 1;
		}
		.item#heart:checked~#submenus #sub-heart {
			transform: rotateZ(0deg);
			opacity: 1;
		}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*    Look, there is no js :)    */
/*    http://burakcan.me      */
/*    twitter.com/neoberg        */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................