Animated Radial Menu with jQuery and CSS3 Transitions

Animated Radial Menu with jQuery and CSS3 Transitions
File Size: 1.94 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An animated radial navigation that reveals menu items one by one when triggered, built using some CSS3 and jQuery.

How to use it:

1. Load the Font Awesome 4 for menu icons (Optional).

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

2. The HTML to create a radial menu

<div class="radial-menu">
  <div class="menu-item1"><i class="fa fa-user fa-2x"></i></div>
  <div class="menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
  <div class="menu-item3"><i class="fa fa-code fa-2x"></i></div>
  <div class="menu-item4"><i class="fa fa-envelope-o fa-2x"></i></div>
  <div class="mask"><i class="fa fa-home fa-3x"></i></div>
</div>

3. The basic CSS styles for the radial menu.

.radial-menu {
  top: 15px;
  left: 15px;
  position: fixed;
  display: block;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-radius: 50%;
  z-index: 20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

4. Style and animate the menu items with CSS & CSS3 transitions.

.menu-item1 {
  width: 60%;
  height: 60%;
  background-color: dimGray;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  z-index: 19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  position: absolute;
}

.menu-item2 {
  width: 60%;
  height: 60%;
  background-color: dimGray;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  z-index: 19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
}

.menu-item3 {
  width: 60%;
  height: 60%;
  background-color: dimGray;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
}

.menu-item4 {
  width: 60%;
  height: 60%;
  background-color: dimGray;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
}

5. Style the menu toggle button.

.mask {
  top: 15px;
  left: 15px;
  width: 100px;
  height: 100px;
  background: darkSlateGray;
  border-radius: 50%;
  position: absolute;
  z-index: 21;
  color: white;
  text-align: center;
  line-height: 120px;
  cursor: pointer;
  position: fixed;
}

6. Load the needed jQuery library in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

7. Active the radial menu.

$(document).ready(function() {

  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;

  $('.radial-menu').on('mousedown touchstart', function() {
  
  if (!active1) $(this).find('.menu-item1').css({
    'background-color': 'gray', 
    'transform': 
    'translate(0px,125px)'
  });
  else $(this).find('.menu-item1').css({
    'background-color': 'dimGray', 
    'transform': 'none'
  }); 
  
  if (!active2) $(this).find('.menu-item2').css({
    'background-color': 'gray', 
    'transform': 'translate(60px,105px)'
  });
  else $(this).find('.menu-item2').css({
    'background-color': 'darkGray', 
    'transform': 'none'
  });

  if (!active3) $(this).find('.menu-item3').css({
    'background-color': 'gray', 
    'transform': 'translate(105px,60px)'
  });
  else $(this).find('.menu-item3').css({
    'background-color': 'silver', 
    'transform': 'none'
  });

  if (!active4) $(this).find('.menu-item4').css({
    'background-color': 'gray', 
    'transform': 'translate(125px,0px)'
  });
  else $(this).find('.menu-item4').css({
    'background-color': 'silver', 
    'transform': 'none'
  });

  active1 = !active1;
  active2 = !active2;
  active3 = !active3;
  active4 = !active4;
    
  });
});

This awesome jQuery plugin is developed by chriskirsch. For more Advanced Usages, please check the demo page or visit the official website.