CSS Circle Menu

css-circle-menu.markdown

CSS Circle Menu

A Pen by Juan Kineipe on CodePen.

License.

index.html

<h2>Click the button below to see the effect</h2>
<div class="circles-wrapper">
  <div class="main-circle">
    <div class="circle">
      <div class="circle-content">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </div>
  </div>
  <div class="other-circles">
    <div class="circle circle1">
      <span class="circle-content">
        <i class="fas fa-map-marker-alt"></i>
      </span>
    </div>
    <div class="circle circle2">
      <span class="circle-content">
        <i class="far fa-thumbs-down"></i>
      </span>
    </div>
    <div class="circle circle3">
      <span class="circle-content">
        <i class="far fa-thumbs-up"></i>
      </span>
    </div>
    <div class="circle circle4">
      <span class="circle-content">
        <i class="fas fa-star"></i>
      </span>
    </div>
    <div class="circle circle5">
      <span class="circle-content">
        <i class="fas fa-question-circle"></i>
      </span>
    </div>
    <div class="circle circle6">
      <span class="circle-content">
        <i class="far fa-images"></i>
      </span>
    </div>
  </div>
</div>

<!--

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

-->

script.js

// Use jQuery
$(".main-circle").click(function () {
  $(this).toggleClass("main-circle-active");
  $(".other-circles").toggleClass("other-circles-active");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

style.css

/* Use Font Awesome */

* {
  list-style-type: none;
}

body{
  background: #111;
}

h2{
  font-family: sans-serif;
  text-align: center;
  color: #fff;
  opacity: .8;
}

.circles-wrapper {
  width: 100%;
  height: 100vh;
  margin-top: 150px;
  margin-left: -35px;
  display: flex;
  justify-content: center;
}

.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 10px;
  background: #e20413;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: .5s;
}

.circle:hover {
  box-shadow: 0 0 1px 10px rgba(226, 4, 19, 0.1), 0 0 1px 20px rgba(226, 4, 19, 0.1);
  transition: .3s;
}

.circle-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.circle-content i{
  font-size: 23px;
}

.other-circles {
  position: absolute;
  opacity: 0;
  transition: .5s;
}

.other-circles-active {
  opacity: 1;
  transition: .5s;
}

.other-circles-active .circle {
  transition: .5s;
}

.other-circles-active .circle1{
  transform: translateX(100px);
}
.other-circles-active .circle2{
  transform: translateX(50px) 
    translateY(100px);
}
.other-circles-active .circle3{
  transform: translateX(-50px)
    translateY(100px);
}
.other-circles-active .circle4{
  transform: translateX(-100px);
}
.other-circles-active .circle5{
  transform: translateX(-50px)
    translateY(-100px);
}
.other-circles-active .circle6{
  transform: translateX(50px)
    translateY(-100px);
}

/* Main Circle */

.main-circle {
  z-index: 1;
}

.main-circle .bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.main-circle.main-circle-active .bar:nth-child(2) {
  opacity: 0;
}

.main-circle.main-circle-active .bar:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  -o-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

.main-circle.main-circle-active .bar:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  -o-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />