Share the post "7+ CSS Circle Menu Examples"

Share the post "7+ CSS Circle Menu Examples"

Share the post "7+ CSS Circle Menu Examples"

Share the post "7+ CSS Circle Menu Examples"

7+ CSS Circle Menu Examples

πŸ’™ CSS / By

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

10+ CSS Dropdown Menu Examples
CSS Dropdown Menus
10+ CSS Menu Examples
CSS Menus
12+ CSS Vertical Menu Examples
CSS Vertical Menus
5+ CSS Hamburger Menu Examples
CSS Hamburger Menus
6+ CSS Mobile Menu Examples
CSS Mobile Menus
6+ CSS Sidebar Menu Examples
CSS Sidebar Menus
7+ CSS Fullscreen Menu Examples
CSS Fullscreen Menus
7+ CSS Sliding Menu Examples
CSS Sliding Menus
7+ JavaScript Circle Menu Examples
JavaScript Circle Menus

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>