<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="https://www.twitter.com/neoberg">twitter</a>
</div>
</div>
<div id="arrow"></div>
</div>
</body>
/*
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;
}
/* Look, there is no js :) */
/* http://burakcan.me */
/* twitter.com/neoberg */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.