This post contains a total of 7+ Hand-Picked CSS Circle ( Circular ) Menu Examples with Source Code. All these Circle Menus are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Circle Menu Examples
1. By 0guzhan
Made by 0guzhan. Simple Pure CSS Circle menu with smooth animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,600" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>
<style>
body{
font-family: "Dosis",sans-serif;
text-align: center;
}
#menu {
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin: -75px 0 0 -75px;
list-style: none;
font-size: 200%;
}
.menu-button {
opacity: 0;
z-index: -1;
}
.menu-button {
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin: -75px 0 0 -75px;
border-radius: 50%;
background: #424242;
background-size: 100%;
overflow: hidden;
text-decoration: none;
}
#menu:not(:target)>a:first-of-type,
#menu:target>a:last-of-type {
opacity: 1;
z-index: 1;
}
#menu:not(:target)>.icon-plus:before,
#menu:target>.icon-minus:before {
opacity: 1;
}
.menu-item {
width: 70px;
height: 70px;
position: absolute;
left: 55%;
line-height: 5px;
top: 50%;
margin: -50px 0 0 -50px;
border-radius: 50%;
background-color: #424242;
transform: translate(0px, 0px);
transition: transform 500ms;
z-index: -2;
transition: .5s;
}
.menu-item:hover{
opacity: 0.5;
box-shadow: 0 5px 10px black;
}
.menu-item a {
color: #fff;
position: relative;
top: 30%;
left: 0;
text-decoration: none;
}
#menu:target>.menu-item:nth-child(6) {
transform: rotate(60deg) translateY(-150px) rotate(300deg);
transition-delay: 0s;
}
#menu:target>.menu-item:nth-child(5) {
transform: rotate(20deg) translateY(-155px) rotate(-20deg);
transition-delay: 0.1s;
}
#menu:target>.menu-item:nth-child(3) {
transform: rotate(-20deg) translateY(-155px) rotate(20deg);
transition-delay: 0.2s;
}
#menu:target>.menu-item:nth-child(4) {
transform: rotate(-60deg) translateY(-150px) rotate(60deg);
transition-delay: 0.3s;
}
.content{
position: absolute;
text-align: center;
margin: -10px 0 0 -30px;
top: 70%;
left: 50%;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<ul id="menu">
<a class="menu-button icon-plus" href="#menu" title="Show navigation"></a>
<a class="menu-button icon-minus" href="#0" title="Hide navigation"></a>
<li class="menu-item">
<a href="#menu">
<span class="fa fa-github"></span>
</a>
</li>
<li class="menu-item">
<a href="#menu">
<span class="fa fa-linkedin"></span>
</a>
</li>
<li class="menu-item">
<a href="#menu">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="menu-item">
<a href="#menu">
<span class="fa fa-twitter"></span>
</a>
</li>
</ul>
<div class="content">
<div class="text">
<h3> Click circle!</h3>
<h6>Tada...!</h6>
</div>
</div>
</div>
</body>
</html>
2. By Erin McKinney
Made by Erin McKinney. Menu with circular spinning animation on click. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
body {
overflow: hidden;
background: #E6E6FA;
background: linear-gradient(to right, #b24592, #f15f79)
}
.menu-toggler {
position: absolute;
display: block;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
width:40px;
height:40px;
z-index:2;
opacity:0;
cursor:pointer;
}
.menu-toggler:hover + label,
.menu-toggler:hover + label:before,
.menu-toggler:hover + label:after,{
background: white;
}
.menu-toggler:checked + label {
background: transparent;
}
.menu-toggler:checked + label:before,
.menu-toggler:checked + label:after,{
top:0;
width:40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
transform: rotate(45deg) translateY(-15px) translateX(-15px);
}
.menu-toggler:checked + label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked ~ ul .menu-item {
opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
transform: rotate(0deg) translate(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item a {
pointer-events:auto;
}
.menu-toggler + label {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(230, 239, 250, 0.9);
transition: transform 0.5s top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.menu-toggler + label:before,
.menu-toggler + label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s top 0.5s;
content: "";
position: absolute;
display: block;
left: 0;
}
.menu-toggler + label:before {
top: 10px;
}
.menu-toggler + label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
transform: rotate(-300deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 80px;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
display: block;
width: inherit;
height: inherit;
line-height: 80px;
color: rgba(255, 255, 255, 0.7);
background: rgba(230, 230, 250, 0.7);
border-radius: 50%;
text-align: center;
text-decoration: none;
font-size: 40px;
pointer-events: none;
transition: 0.2s;
}
.menu-item a:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
color: white;
background: rgba(255, 255, 255, 0.3);
font-size: 44.44px
}
</style>
</head>
<body translate="no" >
<nav class="menu">
<input checked="checked" class="menu-toggler" type="checkbox">
<label for="menu-toggler"></label>
<ul>
<li class="menu-item">
<a class="fas fa-cat" href=""></a>
</li>
<li class="menu-item">
<a class="fas fa-cookie-bite" href="#"></a>
</li>
<li class="menu-item">
<a class="fab fa-earlybirds" href="#"></a>
</li>
<li class="menu-item">
<a class="fab fa-fly"href="#"></a>
</li>
<li class="menu-item">
<a class ="far fa-gem" href="#"></a>
</li>
<li class="menu-item">
<a class="fas fa-glass-cheers" href="#"></a>
</li>
</ul>
</nav>
</body>
</html>
3. By Bearies
Made by Bearies. Pure CSS Circle Menu with Gooey and Wave Animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@keyframes wave {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
body {
margin: 0;
position: relative;
height: 100vh;
background: radial-gradient(#e0e0eb 90%, #8383af 90%);
background-size: 20px 20px;
font-family: Arial, Helvetica, sans-serif;
}
.menu {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
transform: translate(-50%, -50%);
cursor: default;
-webkit-filter: url(#wave);
filter: url(#wave);
}
.text {
position: absolute;
z-index: 1;
height: 100px;
width: 100px;
font-size: 18px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 100px;
}
.circle {
width: 100px;
height: 100px;
}
.circle:before, .circle:after {
content: "";
position: absolute;
top: -2px;
left: -2px;
height: 104px;
width: 104px;
background: #8383af;
}
.circle:before {
border-radius: 43% 45% 40% 42%;
animation: wave 10s infinite linear;
}
.circle:after {
border-radius: 43% 45% 40% 42%;
animation: wave 4s infinite linear;
}
.menu-items {
position: absolute;
height: 60px;
width: 60px;
background: #8383af;
border-radius: 50%;
font-size: 12px;
color: #e0e0eb;
text-align: center;
line-height: 60px;
opacity: 0;
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
-webkit-transition: transform 0.4s linear;
transition: transform 0.4s linear;
cursor: pointer;
}
.menu:hover {
height: 140px;
width: 260px;
}
.menu:hover .circle {
position: absolute;
}
.menu:hover .text, .menu:hover .circle {
left: 80px;
top: 20px;
}
.menu:hover .menu-items {
opacity: 1;
}
.menu:hover .menu-items:nth-child(1) {
-webkit-transform: translate(-80px, -20px);
transform: translate(-80px, -20px);
}
.menu:hover .menu-items:nth-child(2) {
-webkit-transform: translate(-80px, 60px);
transform: translate(-80px, 60px);
}
.menu:hover .menu-items:nth-child(3) {
-webkit-transform: translate(120px, -20px);
transform: translate(120px, -20px);
}
.menu:hover .menu-items:nth-child(4) {
-webkit-transform: translate(120px, -20px);
transform: translate(120px, 60px);
}
</style>
</head>
<body>
<div class="menu">
<div class="text">MENU</div>
<div class="circle">
<div class="menu-items">Work</div>
<div class="menu-items">About</div>
<div class="menu-items">Blog</div>
<div class="menu-items">Contact</div>
</div>
</div>
<svg>
<defs>
<filter id="wave">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="wave" />
<feComposite in="SourceGraphic" in2="wave" operator="atop"/>
</filter>
</defs>
</svg>
</body>
</html>
4. By π°π½π³π ππΈπ»π»π΄πΊπ΄π½π
Made by π°π½π³π ππΈπ»π»π΄πΊπ΄π½π. Circle menu with minimalistic hover effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* Awesome icon font */
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
/* SCSS Vars */
/* The Circle menu */
.circleMenu, .circleMenu .inner > li, .circleMenu .inner .inner > li, .circleMenu .inner > li .inner, .circleMenu .inner .inner > li .inner, .circleMenu .inner > li .inner > li, .circleMenu .inner .inner > li .inner > li, .circleMenu .inner > li .inner .inner > li, .circleMenu .inner .inner > li .inner .inner > li, .circleMenu .inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.mainBtn {
display: block;
width: 48px;
height: 48px;
position: relative;
z-index: 20;
background-color: #ffffff;
transition: transform 0.3s ease;
border-radius: 100%;
}
.mainBtn:before, .mainBtn:after {
content: "";
display: block;
width: 2px;
height: 30px;
background-color: #ff5a94;
position: absolute;
left: 23px;
top: 9px;
}
.mainBtn:after {
width: 30px;
height: 2px;
left: 9px;
top: 23px;
}
.circleMenu:hover .mainBtn, .circleMenu .inner > li:hover .mainBtn, .circleMenu .inner .inner > li:hover .mainBtn, .circleMenu .inner:hover .mainBtn {
cursor: pointer;
transform: rotate(45deg);
}
.circleMenu .inner, .circleMenu .inner > li .inner, .circleMenu .inner .inner > li .inner {
display: block;
width: 48px;
height: 48px;
background-color: #4a63bd;
padding: 6px;
transition: width 0.3s ease, height 0.3s ease;
border-radius: 100%;
}
.circleMenu:hover .inner, .circleMenu .inner > li:hover .inner, .circleMenu .inner .inner > li:hover .inner, .circleMenu .inner:hover .inner {
width: 150px;
height: 150px;
}
.circleMenu .inner > li, .circleMenu .inner > li .inner > li, .circleMenu .inner .inner > li .inner > li, .circleMenu .inner > li .inner .inner > li, .circleMenu .inner .inner > li .inner .inner > li, .circleMenu .inner .inner > li .inner > li .inner > li, .circleMenu .inner > li .inner .inner > li .inner > li, .circleMenu .inner .inner > li .inner .inner > li .inner > li, .circleMenu .inner .inner > li, .circleMenu .inner > li .inner .inner .inner > li, .circleMenu .inner .inner > li .inner .inner .inner > li, .circleMenu .inner > li .inner .inner > li .inner .inner > li, .circleMenu .inner .inner > li .inner .inner > li .inner .inner > li {
z-index: 10;
transition: left 0.3s ease, top 0.3s ease;
}
.circleMenu:hover .inner > li:nth-child(1), .circleMenu .inner:hover .inner > li:nth-child(1), .circleMenu .inner > li:hover .inner > li:nth-child(1), .circleMenu .inner .inner > li:hover .inner > li:nth-child(1) {
left: 20%;
}
.circleMenu:hover .inner > li:nth-child(2), .circleMenu .inner:hover .inner > li:nth-child(2), .circleMenu .inner > li:hover .inner > li:nth-child(2), .circleMenu .inner .inner > li:hover .inner > li:nth-child(2) {
top: 20%;
}
.circleMenu:hover .inner > li:nth-child(3), .circleMenu .inner:hover .inner > li:nth-child(3), .circleMenu .inner > li:hover .inner > li:nth-child(3), .circleMenu .inner .inner > li:hover .inner > li:nth-child(3) {
left: 80%;
}
.circleMenu:hover .inner > li:nth-child(4), .circleMenu .inner:hover .inner > li:nth-child(4), .circleMenu .inner > li:hover .inner > li:nth-child(4), .circleMenu .inner .inner > li:hover .inner > li:nth-child(4) {
top: 80%;
}
.circleMenu .fa {
color: #ffffff;
}
/* Other stuff */
body {
background-color: #637bef;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
</head>
<body>
<div class="circleMenu">
<nav>
<ul class="outer">
<li><span class="mainBtn"></span>
<ul class="inner">
<li><i class="fa fa-commenting-o fa-2x"></i></li>
<li><i class="fa fa-code fa-2x"></i></li>
<li><i class="fa fa-smile-o fa-2x"></i></li>
<li><i class="fa fa-heart-o fa-2x"></i></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
5. By wontem
Made by wontem. Menu with cool fast paced circular spinning animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
html, body {
height: 100%;
background: #111;
}
.wrapper {
position: absolute;
text-align: center;
color: white;
border: 1rem solid rgba(255, 255, 255, 0.1);
width: 2rem;
height: 2rem;
padding: 0rem;
border-radius: 50%;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: 0.3s all;
}
.wrapper:hover {
padding: 2.5rem;
}
.elem {
cursor: pointer;
position: absolute;
background: white;
font: 1rem sans-serif;
font-weight: bold;
color: rgba(0, 0, 0, 0.5);
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
border-radius: 50%;
transform-origin: 50% 50%;
box-shadow: 0;
transition: all 0.3s cubic-bezier(0.5, -1, 0.5, 2), background 0.6s;
transition-delay: 0s;
opacity: 0;
}
.wrapper:hover .elem {
opacity: 1;
}
.elem:nth-child(1) {
z-index: 7;
transform: rotate(-38.5714285714deg) translateX(0) rotate(38.5714285714deg);
}
.wrapper:hover .elem:nth-child(1) {
background: #eb4747;
transform: rotate(-90deg) translateX(200%) rotate(90deg);
transition-delay: 0s, 0s;
}
.elem:nth-child(2) {
z-index: 6;
transform: rotate(12.8571428571deg) translateX(0) rotate(-12.8571428571deg);
}
.wrapper:hover .elem:nth-child(2) {
background: #ebd347;
transform: rotate(-38.5714285714deg) translateX(200%) rotate(38.5714285714deg);
transition-delay: 0.04s, 0.08s;
}
.elem:nth-child(3) {
z-index: 5;
transform: rotate(64.2857142857deg) translateX(0) rotate(-64.2857142857deg);
}
.wrapper:hover .elem:nth-child(3) {
background: #76eb47;
transform: rotate(12.8571428571deg) translateX(200%) rotate(-12.8571428571deg);
transition-delay: 0.08s, 0.16s;
}
.elem:nth-child(4) {
z-index: 4;
transform: rotate(115.7142857143deg) translateX(0) rotate(-115.7142857143deg);
}
.wrapper:hover .elem:nth-child(4) {
background: #47eba5;
transform: rotate(64.2857142857deg) translateX(200%) rotate(-64.2857142857deg);
transition-delay: 0.12s, 0.24s;
}
.elem:nth-child(5) {
z-index: 3;
transform: rotate(167.1428571429deg) translateX(0) rotate(-167.1428571429deg);
}
.wrapper:hover .elem:nth-child(5) {
background: #47a5eb;
transform: rotate(115.7142857143deg) translateX(200%) rotate(-115.7142857143deg);
transition-delay: 0.16s, 0.32s;
}
.elem:nth-child(6) {
z-index: 2;
transform: rotate(218.5714285714deg) translateX(0) rotate(-218.5714285714deg);
}
.wrapper:hover .elem:nth-child(6) {
background: #7647eb;
transform: rotate(167.1428571429deg) translateX(200%) rotate(-167.1428571429deg);
transition-delay: 0.2s, 0.4s;
}
.elem:nth-child(7) {
z-index: 1;
transform: rotate(270deg) translateX(0) rotate(-270deg);
}
.wrapper:hover .elem:nth-child(7) {
background: #eb47d3;
transform: rotate(218.5714285714deg) translateX(200%) rotate(-218.5714285714deg);
transition-delay: 0.24s, 0.48s;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="elem">E</div>
<div class="elem">L</div>
<div class="elem">E</div>
<div class="elem">M</div>
<div class="elem">E</div>
<div class="elem">N</div>
<div class="elem">T</div>
</div>
</body>
</html>
6. By Denis
Made by Denis. Circle Menu with Hover effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<style>
body {
height: 100vh;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
perspective: 1px;
}
.container {
position: relative;
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ff001f;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
display: block;
border-radius: 50%;
width: 65px;
height: 65px;
background-color: #ff001f;
transform: translate(-50%, -50%);
transform-origin: center center;
transition: all 0.2s;
}
.menu-item {
position: absolute;
top: 0;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 50%;
background-color: #fff;
width: 151px;
border-right: 1px solid #eee;
transform-origin: center bottom;
clip-path: polygon(0 0, 100% 0, 50% 100%);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
text-align: center;
transition: 0.3s;
}
.menu-item .icon {
font-size: 18px;
margin-top: -25px;
color: #ff001f;
}
.menu-item1 {
transform: translate(-50%, 0);
}
.menu-item1:hover {
transform: translate(-50%, -15px) scale(1.1);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
.menu-item2 {
transform: translate(-50%, 0) rotateZ(72deg);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.menu-item2:hover {
transform: translate(-40%, -6px) rotateZ(72deg) scale(1.1);
}
.menu-item3 {
transform: translate(-50%, 0) rotateZ(144deg);
}
.menu-item3:hover {
transform: translate(-42%, 15px) rotateZ(144deg) scale(1.1);
}
.menu-item4 {
transform: translate(-50%, 0) rotateZ(216deg);
}
.menu-item4:hover {
transform: translate(-57%, 15px) rotateZ(216deg) scale(1.1);
}
.menu-item5 {
transform: translate(-50%, 0) rotateZ(288deg);
}
.menu-item5:hover {
transform: translate(-62%, -6px) rotateZ(288deg) scale(1.1);
}
.menu-item:hover ~ .circle {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="container">
<div class="menu-item menu-item1"><i class="icon fas fa-adjust"></i></div>
<div class="menu-item menu-item2"><i class="icon fab fa-amazon"></i></div>
<div class="menu-item menu-item3"><i class="icon fab fa-angular"></i></div>
<div class="menu-item menu-item4"><i class="icon fab fa-bandcamp"></i></div>
<div class="menu-item menu-item5"><i class="icon fab fa-bluetooth"></i></div>
<div class="circle"></div>
</div>
</body>
</html>
7. By Metz
Made by Metz. Simple radial menu with hover. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@charset "UTF-8";
.circle-menu {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
background: white;
box-shadow: 0 0 3px #cccccc;
}
.circle-menu ul {
position: absolute;
width: 300px;
height: 300px;
margin: 50px;
padding: 0;
list-style: none;
border-radius: 50%;
overflow: hidden;
}
.circle-menu .center {
position: absolute;
top: 195px;
left: 195px;
z-index: 1000;
border: 5px solid #34495e;
border-radius: 50%;
box-shadow: 0 0 3px #cccccc;
}
.circle-menu li {
position: absolute;
top: -10px;
left: -10px;
width: 160px;
height: 160px;
transform-origin: 100% 100%;
overflow: hidden;
}
.circle-menu li:nth-child(1) {
transform: rotate(0deg) skew(30deg);
}
.circle-menu li:nth-child(2) {
transform: rotate(60deg) skew(30deg);
}
.circle-menu li:nth-child(3) {
transform: rotate(120deg) skew(30deg);
}
.circle-menu li:nth-child(4) {
transform: rotate(180deg) skew(30deg);
}
.circle-menu li:nth-child(5) {
transform: rotate(240deg) skew(30deg);
}
.circle-menu li:nth-child(6) {
transform: rotate(300deg) skew(30deg);
}
.circle-menu li a {
display: block;
width: 160px;
height: 160px;
margin-top: 40px;
margin-left: 40px;
font-size: 0;
background: rgba(241, 196, 15, 0.5) url("https://htmlacademy.ru/assets/icons/monitor-4x.png") no-repeat 50% 40%;
transition: background-color 0.5s;
transform: skew(-30deg) rotate(-60deg);
}
.circle-menu li:nth-child(even) a {
background-color: rgba(241, 196, 15, 0.75);
}
.circle-menu li a:hover {
background-color: #f1c40f;
}
/* ΠΠΊΠΎΠ½ΠΊΠΈ */
.circle-menu li:nth-child(2) a {
background-image: url("https://htmlacademy.ru/assets/icons/aperture-4x.png");
}
.circle-menu li:nth-child(3) a {
background-image: url("https://htmlacademy.ru/assets/icons/audio-4x.png");
}
.circle-menu li:nth-child(4) a {
background-image: url("https://htmlacademy.ru/assets/icons/battery-empty-4x.png");
}
.circle-menu li:nth-child(5) a {
background-image: url("https://htmlacademy.ru/assets/icons/bluetooth-4x.png");
}
.circle-menu li:nth-child(6) a {
background-image: url("https://htmlacademy.ru/assets/icons/browser-4x.png");
}
</style>
</head>
<body>
<nav class="circle-menu">
<div class="center"></div>
<ul>
<li><a href="#">monitor</a></li>
<li><a href="#">aperture</a></li>
<li><a href="#">audio</a></li>
<li><a href="#">battery</a></li>
<li><a href="#">bluetooth</a></li>
<li><a href="#">browser</a></li>
</ul>
</nav>
</body>
</html>
8. By Dehnavi
Made by Dehnavi. Circular corner menu. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
body{
background-color:#225;
}
.circle-menu {
font-face: FontAwesome;
font-size: 20px;
display: flex;
justify-content: lefts;
}
.fa-share-alt:before{
position: absolute;
left:0;
top:0;
background-color: #fff;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
background-image:radial-gradient(circle at 0 0 ,white 50%,rgba(55,55,155,1));
text-shadow:2px 2px 2px rgba(0, 0, 2, .5);
color:#258;
width: 1.8em;
height: 1.8em;
font-size: 2em;
padding: .5em;
border-radius:0% 0% 100% 0%;
}
.circle-menu label {
position: relative;
cursor: pointer;
z-index: 200;
}
.circle-menu input[type="checkbox"] {
display: none;
}
.circle-menu input[type="checkbox"]:checked~menu li {
left: 0em;
top: 0em;
z-index: -1;
opacity: 0;
border-radius: 0% 10% 1000% 10%;
}
.circle-menu menu {
list-style: none;
width:100px;
height: 100px;
position: relative;
}
.circle-menu li {
position: absolute;
display: block;
width: 1em;
height: 1em;
font-size: 1.3em;
padding: .7em;
border-radius:50%;
text-align: center;
transition: all 1s;
opacity: 1;
z-index: -1;
background-color:white;
text-shadow:2px 2px 2px rgba(0, 0, 2, .5);
}
.circle-menu a:nth-child(1) li {
color: #007;
left: 5em;
top: 0em;
transition-delay: 0s;
box-shadow: 6px 0px 10px rgba(0, 0, 0, .5);
}
.circle-menu a:nth-child(2) li{
color: #00a;
left: 4.2em;
top: 2.45em;
transition-delay: .2s;
box-shadow: 5.5px 3.2px 10px rgba(0, 0, 0, .5);
}
.circle-menu a:nth-child(3) li{
color: #a00;
left: 2.45em;
top: 4.25em;
transition-delay: .4s;
box-shadow: 3.2px 5.5px 10px rgba(0, 0, 0, .5);
}
.circle-menu a:nth-child(4) li{
color: #55f;
left: 0em;
top: 5em;
transition-delay: .6s;
box-shadow: 0px 6px 10px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<nav class="circle-menu">
<label for="toggle" class="fa fa-share-alt"/>
<input type="checkbox" id="toggle"/>
<menu>
<a href="#"><li class="fa fa-facebook"></li></a>
<a href="#"><li class="fa fa-linkedin"></li></a>
<a href="#"><li class="fa fa-google-plus"></li></a>
<a href="#"><li class="fa fa-twitter"></li></a>
</menu>
</nav>
</body>
</html>