Radial Menu - Pure CSS

index.haml

%input#check{:type => "checkbox"}
%label.main{:for => 'check'}
  .title
    %i.fa.fa-bars
.container
  %a.plate{:href => 'https://codepen.io/Oka/'}
    %i.fa.fa-codepen
  %a.plate{:href => 'https://github.com/Oka-'}
    %i.fa.fa-github
  %a.plate{:href => 'http://stackoverflow.com/users/2505965/oka'}
    %i.fa.fa-stack-overflow
  %a.plate{:href => 'http://oka.io'}
    %i.fa.fa-server
  %a.plate{:href => '#'}
    %i.fa.fa-heartbeat
  %a.plate{:href => 'https://codepen.io/Oka/details/BNjwNz/', :target => '_top'}
    %i.fa.fa-comments
  %a.plate{:href => 'https://codepen.io/Oka/full/BNjwNz/', :target => '_top'}
    %i.fa.fa-terminal
  %a.plate{:href => 'https://twitter.com/Okahyphen', :target => '_blank'}
    %i.fa.fa-twitter

     

radial-menu-pure-css.markdown

Radial Menu - Pure CSS

Fun little checkbox menu. Has an interesting set of transitions, and random colors via Sass. Recompile the Sass for different results.

A Pen by Luis Gonzalez on CodePen.

License.

script.babel

// JS Random state function, no effect on actual implementation

;(function (window, document) {
  var check, RNG;
  check = document.getElementById('check');
  RNG = Math.round(Math.random());
  check.checked = !!RNG;
}(window, document));

style.scss

@import "bourbon";

@function c($mn, $mx) {
  @return max($mn, random($mx));
}

@function rngrbga($min: 0, $max: 255, $alpha: 1) {
  @return #{rgba(c($min, $max), c($min, $max), c($min, $max), random($alpha * 10) / 10)};
}

$main-c: #B81365;
$main-size: 100px;
$plate-size: 50px;

$side: -180%;
$edge: -130%;

html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background-color: #ddd;
  overflow: hidden;
}

#check {
  display: none;
}

.main,
.container {
  margin: auto;
  @include position(absolute, 0 0 0 0);
  width: $main-size;
  height: $main-size;
  border-radius: 50%;
}

.main {
  background-color: $main-c;
  box-shadow:  1px 2px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 50;
  
  &:hover {
    background-color: lighten($main-c, 5%);
  }
  &:active {
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35), inset 1px 2px 2px rgba(0, 0, 0, 0.35);
    background-color: darken($main-c, 5%);
  }
  
  .title {
    margin: auto;
    @include position(absolute, 0 0 0 0);
    width: 100%;
    height: 80px;
    
    font: {
      size: 3em;
    }
    line-height: 80px;
    text-align: center;
    
    color: #fafafa;
  }
}

.container {
  z-index: 10;
}

.plate {
  margin: auto;
  @include position(absolute, 0 0 0 0);
  width: $plate-size;
  height: $plate-size;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
  
  @include transition(all 0.4s ease-in);
  
  i {
    width: 100%;
    font: {
      size: 2em;
    }
    line-height: $plate-size + 3px;
    text-align: center;
    color: #333;
  }
  
  &:hover {
    i {
      color: #111;
    }
  }
}

$base: 0;

@for $i from 1 through 8 {
  .plate:nth-of-type(#{$i}) {
    background-color: rngrbga(80);
    @include transition-delay(#{$base + s});
  }
  $base: $base + 0.1;
}

#check:checked ~ .main + .container {
  .plate {
    opacity: 1;
  }
  .plate:nth-of-type(1) {
    top: $side;
  }

  .plate:nth-of-type(2) {
    top: $edge;
    right: $edge;
  }

  .plate:nth-of-type(3) {
    right: $side;
  }

  .plate:nth-of-type(4) {
    right: $edge;
    bottom: $edge;
  }
  .plate:nth-of-type(5) {
    bottom: $side;
  }
  .plate:nth-of-type(6) {
    bottom: $edge;
    left: $edge;
  }
  .plate:nth-of-type(7) {
    left: $side;
  }
  .plate:nth-of-type(8) {
    top: $edge;
    left: $edge;
  }
}

styles

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