Pure CSS Circle Menu

index.haml

%nav.menu
  %input#menu-toggler.menu-toggler{:type => "checkbox", :checked => "checked"}
  %label{:for => "menu-toggler"}
  %ul
    %li.menu-item
      %a.fa.fa-facebook{:href => "https://www.facebook.com/", :target => "_blank"}
    %li.menu-item
      %a.fa.fa-google{:href => "https://www.google.com/", :target => "_blank"}
    %li.menu-item
      %a.fa.fa-dribbble{:href => "https://dribbble.com/", :target => "_blank"}
    %li.menu-item
      %a.fa.fa-codepen{:href => "http://codepen.io/", :target => "_blank"}
    %li.menu-item
      %a.fa.fa-linkedin{:href => "https://www.linkedin.com/", :target => "_blank"}
    %li.menu-item
      %a.fa.fa-github{:href => "https://github.com/", :target => "_blank"}
      

pure-css-circle-menu.markdown

Pure CSS Circle Menu

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.

A Pen by Maux Webmaster on CodePen.

License.

script.js

/*********************************
  circle menu with toggle button
           - only css -         
*********************************/

style.scss

// helpers

$toggler-size: 40px;
$toggler-color: white;
$toggler-transition: transform .5s, top .5s;

$item-count: 6;
$item-size: $toggler-size * 2;
$item-color: white;
$item-transition: .5s;

@mixin size ($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin absolute-center {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

@mixin line {
  @include size($toggler-size, $toggler-size/8);
  display: block;
  z-index: 1;
  border-radius: $toggler-size/16;
  background: rgba($toggler-color, 0.7);
  transition: $toggler-transition;
}

// styles

body {
  overflow: hidden;
  background: linear-gradient(to right, #fc354c, #0abfbc);
}

.menu-toggler {
  @include absolute-center;
  @include size($toggler-size);
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  
  &:hover + label,
  &:hover + label:before,
  &:hover + label:after {
    background: $toggler-color;
  }
}

.menu-toggler:checked {
  & + label {
    background: transparent;
  }
  
  & + label:before,
  & + label:after {
    top: 0;
    width: $toggler-size;
    transform-origin: 50% 50%;
  }
  
  & + label:before {
    transform: rotate(45deg);
  }
  
  & + label:after {
    transform: rotate(-45deg);
  }
}

.menu-toggler:checked ~ ul {
  .menu-item {
    opacity: 1;
  }

  @for $i from 0 through $item-count - 1 {
    .menu-item:nth-child(#{$i + 1}) {
      transform: rotate(360deg / $item-count * $i) translateX(-$item-size - 30px);
    }
  }
  
  .menu-item a {
    pointer-events: auto;
  }
}

.menu-toggler + label {
  @include line;
  @include absolute-center;
  
  &:before,
  &:after {
    @include line;
    content: "";
    position: absolute;
    left: 0;
  }
  
  &:before {
    top: $toggler-size/4;
  }
  
  &:after {
    top: -$toggler-size/4;
  }
}

@for $i from 0 through $item-count - 1 {
  .menu-item:nth-child(#{$i + 1}) a {
    transform: rotate(-360deg / $item-count * $i);
  }
}

.menu-item {
  @include absolute-center;
  @include size($item-size);
  display: block;
  opacity: 0;
  transition: $item-transition;
}

.menu-item a {
  display: block;
  width: inherit;
  height: inherit;
  line-height: $item-size;
  color: rgba($item-color, 0.7);
  background: rgba(white, 0.2);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-size: $item-size/2;
  pointer-events: none;
  transition: .2s;
  
  &:hover {
    box-shadow: 0 0 0 $item-size/40 rgba(white, 0.3);
    color: $item-color;
    background: rgba(white, 0.3);
    font-size: $item-size/1.8;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />