<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Creating Radial Menu
</
title
>
<
link
rel="stylesheet" href=
<
style
>
#check {
display: none;
}
/* Set the icon width, height and position */
.main,.icons {
margin: auto;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 40%;
}
/* Set the style of menu button */
.main {
background-color: gray;
cursor: pointer;
z-index: 50;
}
/* Set the position, height and
width of menu button */
.main .title {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
font-size: 16px;
line-height: 80px;
text-align: center;
color: lime;
}
/* Set position, height and width
of buttons */
.button {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 45px;
height: 45px;
border-radius: 40%;
transition: all 0.4s ease-in;
}
.button i {
width: 100%;
font-size: 20px;
line-height: 50px;
text-align: center;
color: white;
}
.main {
border:2px solid lime;
}
.button {
border:2px solid black;
}
/* Positioning of buttons */
#check:checked ~ .main + .icons .button {
opacity:0.8;
}
#check:checked ~ .main + .icons .button:nth-of-type(1) {
top: -100%;
left: -480%;
background-color: green;
transition-delay:0.6s;
}
#check:checked ~ .main + .icons .button:nth-of-type(2) {
top: -230%;
left: -250%;
background-color: green;
transition-delay:0.4s;
}
#check:checked ~ .main + .icons .button:nth-of-type(3) {
top: -280%;
background-color: green;
transition-delay:0.2s;
}
#check:checked ~ .main + .icons .button:nth-of-type(4) {
top: -230%;
right: -250%;
background-color: green;
transition-delay:0.4s;
}
#check:checked ~ .main + .icons .button:nth-of-type(5) {
top: -100%;
right: -480%;
background-color: green;
transition-delay:0.6s;
}
</
style
>
</
head
>
<
body
>
<
input
id="check" type="checkbox">
<
label
class="main" for="check">
<
div
class="title">
<
i
class="fa fa-bars"></
i
>
</
div
>
</
label
>
<
div
class="icons">
<
a
class="button" href="#" >
<
i
class="fa fa-youtube"></
i
>
</
a
>
<
a
class="button" href="#" >
<
i
class="fa fa-facebook"></
i
>
</
a
>
<
a
class="button" href="h#">
<
i
class="fa fa-linkedin"></
i
>
</
a
>
<
a
class="button" href="#">
<
i
class="fa fa-github"></
i
>
</
a
>
<
a
class="button" href="#">
<
i
class="fa fa-google-plus"></
i
>
</
a
>
</
div
>
</
body
>
</
html
>