CodePen Embed - Radial Menu


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://use.fontawesome.com/aa95071b26.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="body">
  <div id="rad">
    <ul class="list">
      <li class="active"><a href="#"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#"><i class="fa fa-apple"></i></a></li>
      <li><a href="#"><i class="fa fa-google"></i></a></li>
      <li><a href="#"><i class="fa fa-stumbleupon"></i></a></li>
      <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#"><i class="fa fa-windows"></i></a></li>
      <li><a href="#"><i class="fa fa-digg"></i></a></li>
      <li><a href="#"><i class="fa fa-youtube"></i></a></li>
      <li><a href="#"><i class="fa fa-android"></i></a></li>
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    </ul>
    <div class="pointer">
    </div>
    <button class="menu-trig">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
 </div>

// Extra small screen / phone
$screen-xs-min: 480px;

// Small screen / tablet
$screen-sm-min: 768px;

// Medium screen / desktop
$screen-md-min: 992px;

// Large screen / wide desktop
$screen-lg-min: 1200px;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
@mixin respondTo($media) {
    @if $media=="xs" {
        @media only screen and (max-width: $screen-xs-max) {
            @content;
        }
    }
    @else if $media=="sm" {
        @media only screen and (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
            @content;
        }
    }
    @else if $media=="md" {
        @media only screen and (max-width: $screen-md-max) and (min-width: $screen-md-min) {
            @content;
        }
    }
    @else if $media=="lg" {
        @media only screen and (min-width: $screen-lg-min) {
            @content;
        }
    }
}

@mixin respondToAbove($media) {
    @if $media=="xs" {
        @media only screen and (min-width: $screen-xs-max) {
            @content;
        }
    }
    @else if $media=="sm" {
        @media only screen and (min-width: $screen-sm-min) {
            @content;
        }
    }
    @else if $media=="md" {
        @media only screen and (min-width: $screen-md-min) {
            @content;
        }
    }
    @else if $media=="lg" {
        @media only screen and (min-width: $screen-lg-min) {
            @content;
        }
    }
}

@mixin respondToBelow($media) {
    @if $media=="xs" {
        @media only screen and (max-width: $screen-xs-max) {
            @content;
        }
    }
    @else if $media=="sm" {
        @media only screen and (max-width: $screen-sm-max) {
            @content;
        }
    }
    @else if $media=="md" {
        @media only screen and (max-width: $screen-md-max) {
            @content;
        }
    }
    @else if $media=="lg" {
        @media only screen {
            @content;
        }
    }
}

@mixin respondToTablet {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        @content;
    }
}

@mixin respondToSmall-n-Medium {
    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        @content;
    }
}

@mixin respondToMobile() {
    @include respondTo(xs) {
        @content
    }
}

@mixin respondToDesktop() {
    @include respondToAbove(md) {
        @content
    }
}

@mixin clearfix {
    &:before {
        content: "";
        display: table;
    }
    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

@mixin rounded_corners($radius: 5px) {
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

@mixin input {
    padding: 5px;
    margin: 5px 0;
    border: 1px solid $border_color;
    height: 34px;
    border-radius: 4px;
    display: block;
    width: 80%;
    max-width: 80%;
    @include respondTo(xs) {
        width: 100%;
        max-width: 100%;
    }
    outline: none;
    &:focus {
        border: 1px solid darken($border_color, 25%);
    }
}

// Provides a cross-browser method to implement `display: inline-block;`
@mixin inline-block($alignment: middle) {
    display: -moz-inline-stack;
    display: inline-block;
    @if $alignment and $alignment !=none {
        vertical-align: $alignment;
    }
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
}

@mixin background_gradient($min_color, $max_color, $color_stop1:0%, $color_stop2:100%) {
    background: $min_color;
    background: -moz-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -o-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -webkit-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -ms-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -webkit-gradient(linear, left top, left bottom, color-stop($color_stop1/100%, $min_color), color-stop($color_stop2/100%, $max_color));
    background: linear-gradient(to bottom, $min_color $color_stop1, $max_color $color_stop2);
    zoom: 1; // fix for ie7 issue
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
}

@mixin box-shadow($value) {
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    box-shadow: $value;
}

@mixin font-size($sizeValue) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}

//-------------
@mixin shadow-box {
    border: 1px solid $border_color;
}

@mixin transition($value) {
    transition: $value;
    -moz-transition: $value;
    -webkit-transition: $value;
}

@mixin flex {
    float: none;
    display: inline-block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin flex-grow($value) {
    -webkit-box-flex: $value;
    -webkit-flex: $value;
    -ms-flex: $value;
    flex: $value;
}

@mixin flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

@mixin flex-direction($value) {
    -webkit-flex-direction: $value;
    flex-direction: $value;
}

@mixin align-items($value) {
    -ms-align-items: $value;
    -moz-align-items: $value;
    -webkit-align-items: $value;
    align-items: $value;
}

@mixin justify-content($value) {
    -ms-justify-content: $value;
    -moz-justify-content: $value;
    -webkit-justify-content: $value;
    justify-content: $value;
}

@mixin flex-basis($value) {
    -webkit-box-flex: $value;
    -webkit-flex: $value;
    -ms-flex: $value;
    flex: $value;
}

@mixin transform($value) {
    -ms-transform: $value;
    -webkit-transform: $value;
    transform: $value;
}

@mixin fontAwesome($fsize, $ascii, $fcolor) {
    font: normal normal normal $fsize/1 FontAwesome;
    content: $ascii;
    color: $fcolor;
}

@mixin input-placeholder-font($value1, $value2) {
    input::-webkit-input-placeholder {
        color: $border_color;
        @include font-size(1.2);
    }
    input::-moz-placeholder {
        color: $border_color;
        @include font-size(1.2);
    }
    input:-moz-placeholder {
        color: $border_color;
        @include font-size(1.2);
    }
    input:-ms-input-placeholder {
        color: $border_color;
        @include font-size(1.2);
    }
}

@mixin radio-button {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    height: 25px;
    cursor: pointer;
    &+label,
    &+span {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 20px;
        margin-top: 10px;
        line-height: 15px;
        height: 15px;
        &:before {
            font-weight: normal;
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 1px;
            background-color: #fff;
            @include rounded_corners(50%);
            border: 1px solid darken($border_color, 15%);
        }
        &:after {
            @include transform(scale(1));
            @include transition(linear all .25s);
            content: "";
        }
    }
    &:checked+label:after,
    &:checked+span:after {
        position: absolute;
        background: #000;
        @include rounded_corners(50%);
        width: 15px;
        height: 15px;
        left: 0;
        top: 0;
        bottom: 4px;
        pointer-events: none;
        @include transform(scale(.5));
    }
}

@mixin check-button {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: -1;
    height: 25px;
    cursor: pointer;
    &:checked+label:after {
        content: '';
        position: absolute;
        width: 9px;
        height: 4.5px;
        left: 3px;
        bottom: 7px;
        border-color: $secondary_color;
        border-style: solid;
        border-width: 0 0 2px 2px;
        transform: rotate(-47deg);
        -ms-transform: rotate(-47deg);
        -webkit-transform: rotate(-47deg);
        pointer-events: none;
        
    }
    &+label {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 20px;
        line-height: 15px;
        height: 15px;
        &:before {
            font-weight: normal;
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: absolute;
            left: 0;
            bottom: 1px;
            background-color: #fff;
            border: 1px solid darken($border_color, 15%);
        }
    }
}

@mixin theme-shadow {
    @include box-shadow(0px 1px 4px 0px rgba(0, 0, 0, 0.2));
}

@mixin hindi {
    html[lang='hi'] & {
        @content
    }
}
@mixin rtl {
    html[lang='ar'] & {
        @content
    }
}

@mixin section_heading {
    @include font-size(2.0);
    text-transform: uppercase;
    color: $header_color;
    font-weight: bold;
    line-height: 1;
    margin: 0 0 $pdp_detail_gap;
    font-family: $font-primary;
}

@mixin secondary_header {
    margin: $home-space 0 $pdp_detail_gap;
    line-height: 1;
    font-weight: 300;
    @include font-size(2.2);
    color: $header_color;
    font-family: $font-primary;
    text-transform: capitalize;
}

@mixin close-icon {
    font-size: 0 !important;
    position: absolute;
    height: 40px;
    width: 40px;
    right: 20px;
    top: 20px;
    font-size: 0px;
    cursor: pointer;
    z-index: 9;
    border: 0;
    background: transparent;
    &:before,
    &:after {
        content: '';
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        height: 2px;
        background: white;
        width: 50%;
        transition: all .25s;
        opacity: 0;
    }
    &:before {
        transform: rotate(45deg);
        opacity: 1;
    }
    &:after {
        transform: rotate(-45deg);
        opacity: 1;
    }
}


@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}


@mixin animation($values){
  -webkit-animation: ($values);
  -moz-animation: ($values);
  -ms-animation: ($values);
  animation: ($values);
}

@mixin on-circle($item-count, $circle-size, $item-size) {
   position: relative;
   width: $circle-size;
   height: $circle-size;
   padding: 0;
   border-radius: 50%;
   list-style: none;
   >* {
       display: block;
       position: absolute;
       top: 50%;
       left: 50%;
       width: $item-size;
       height: $item-size;
       margin: -($item-size / 2);
       $angle: (360 / $item-count);
       $rot: 0;
       @for $i from 1 through $item-count {
           &:nth-of-type(#{$i}) {
               @include transform(rotate($rot * 1deg) translateY(-($circle-size / 2)) rotate($rot * -1deg));
               /* &:before{
                    @include transform(rotate($rot * 1deg));
               } */
           }
           $rot: $rot+$angle;
       }
   }
}
$shadow : 0 6px 10px -2px rgba(0, 0, 0, .25);
$solid: #b71c1c;

$solid_2: #0af;
$dbc: #eee;
#body {
  padding: 1px;
  background: $dbc;
  min-height: 100vh;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: captalize;
  letter-spacing: 2px;
  &, & *{
    transition: all .25s;
    &:before,&:after{
      transition: all .25s;
    }
  }
  .out-wrap {
        position: relative;
        padding: 0 50px 50px;
        box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .25);
        width: 50%;
        margin: 50px auto;
        background: $solid;
  }
}

$cir-size: 300px;
$itm-size: $cir-size/5;
$menu-timing: 0.25s;
#rad{
  position: relative;
  position: relative;
    width: $cir-size + ($itm-size/1.5)*2;
    height: $cir-size + ($itm-size/1.5)*2;
    margin: 100px auto;
    padding: $itm-size/1.5;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
  .list{
    @include on-circle(10, $cir-size, $itm-size);
    margin: auto;
    position: relative;
    z-index: 2;
    @include transform(scale(0));
    >li{
      text-align: center;
      line-height: $itm-size;
      border-radius: 50%;
      cursor: pointer;
      a{
        text-decoration: none;
        position: relative;
        z-index: 2;
        i:before{
          color: #999;
          font-size: $itm-size/3;
          transition: all .55s;
        }
      }
      &.active{
        a i:before{
          color: #fff;
        }
      }
    }
  }
  .pointer{
    position: absolute;
    left: ($itm-size/1.5)*2;
    right: ($itm-size/1.5)*2;
    top: ($itm-size/1.5)*2;
    bottom: ($itm-size/1.5)*2;
    margin: auto;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    box-shadow: none;
    &:before{
      content: '';
      background: #d32f2f;
      left: 0;
      right: 0;
      top: -($itm-size/1.5)*2;
      width: ($cir-size*3)/10;
      height: ($cir-size*3)/10;
      margin: auto;
      position: absolute;
      display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
      @include transform(scale(0));
    }
    &:after{
      content: '';
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        z-index: 99;
        position: absolute;
        background: #eee;
        @include transform(scale(0));
    }
  }
  button{
    height: $itm-size;
      width: $itm-size;
      z-index: 3;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border: 0;
      cursor: pointer;
      box-shadow: none;
      background: transparent;
      border-radius: 50%;
    &:focus{
      outline: none;
    }
      > span {
            height: 2px;
            background: #d32f2f;
            width: 50%;
            position: absolute;
            @include transition(all $menu-timing 0.25s ease);
            left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
            &:first-child {
                bottom: auto;
                left: auto;
                top: 30%;
                right: 25%;
            }
            &:last-child {
                top: auto;
                right: auto;
                bottom: 30%;
                left: 25%;
            }
            &:nth-child(2), &:nth-child(3) {
                @include transition(all $menu-timing ease);
            }
        }
  }
  &.open{
    background: #fff;
    .list{
      @include transform(scale(1));
    }
    .pointer{
      box-shadow: 0 0 0 $itm-size/1.5 #fff;
      &:after, &:before{
        @include transform(scale(1));
      }
    }
    button{
      span {
                &:first-child, &:last-child {
                    @include transition(all $menu-timing ease);
                    width: 0;
                }

                &:nth-child(2) {

                    @include transition(all $menu-timing 0.15s ease);
                    @include transform(rotate(45deg));
                }

                &:nth-child(3) {

                    @include transition(all $menu-timing 0.15s ease);
                    @include transform(rotate(135deg));
                }
            }
    }
  }
}

View Compiled

$(function (){
      $('.pointer').css({
        'transform' : 'rotate('+(360/($('.list li').length)*($('.list li.active').index()))+'deg)'
      });
      var angle = 0;
      $(document).on('mouseover','.list > li', function(){
        var len = $('.list li').length;
        var ths = $(this);
        var active = $('.list li.active');
        if (ths.index() >= active.index()){
          if (ths.index() - active.index() < len/2){
            angle = angle + (360/(len)*(ths.index() - active.index()));
            console.log('case-1');
          }
          else{
            angle = angle - (360/(len)*(len - ths.index() + active.index()));
            console.log('case-2');
          }
        }
        else if (ths.index() < active.index()){
          if (active.index() - ths.index() < len/2){
            angle = angle - (360/(len)*(active.index() - ths.index()));
            console.log('case-3');
          }
          else{
            angle = angle + (360/(len)*(len + ths.index() - active.index()));
            console.log('case-4');
          }
        }
        ths.addClass('active').siblings().removeClass('active');
        $('.pointer').css({
          'transform' : 'rotate('+angle+'deg)'
        });
      });
      $('.menu-trig').click(function(){
        $(this).closest('#rad').toggleClass('open');
      });
    });

This Pen is owned by Praveen Kumar Gorakala on CodePen.

See more by @onlyveen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.