Pie menu is a Google Material Design-style navigation button that expands to a semi-circular/circular/half-circle menu with submenus when clicked or tapped, created with jQuery and CSS3 transitions and transitions.

material design menu, material dropdown menu, material ui dropdown menu example, dropdown material design, material dropdown android, material ui charts

Simple Animated jQuery & SVG Based Graph Plugin

How to make use of it:

1. Include Font Awesome Icon Font for navigation icons.

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

2. Create radial navigation with submenus using the included HTML.

<nav class="radialnav">
  <a href="#" class="ellipsis"><i class="fa fa-bars"></i></a>
  <ul class="menu">
    <li data-submenu="home"><a href="#"><i class="fa fa-home"></i></a></li>
    <li><a href="#"><i class="fa fa-database"></i></a></li>
    <li><a href="#"><i class="fa fa-desktop"></i></a></li>
    <li><a href="#"><i class="fa fa-cubes"></i></a></li>
    <li><a href="#"><i class="fa fa-envelope"></i></a></li>
  </ul>
  <ul data-submenuId="home" class="submenu">
    <li><a href="#"><i class="fa fa-user"></i></a></li>
    <li><a href="#"><i class="fa fa-users"></i></a></li>
    <li><a href="#"><i class="fa fa-car"></i></a></li>
    <li><a href="#"><i class="fa fa-save"></i></a></li>
    <li><a href="#"><i class="fa fa-plus"></i></a></li>
  </ul>
  <ul data-submenuId="database" class="submenu">
    <li><a href="#"><i class="fa fa-user"></i></a></li>
    <li><a href="#"><i class="fa fa-users"></i></a></li>
    <li><a href="#"><i class="fa fa-car"></i></a></li>
    <li><a href="#"><i class="fa fa-save"></i></a></li>
    <li><a href="#"><i class="fa fa-plus"></i></a></li>
  </ul>
</nav>

3. Basic CSS/CSS3 Styles for Radial Navigation.

.radialnav {
  position: fixed;
  bottom: 6%;
  right: 9%;
  display: block;
  width: 26em;
  height: 26em;
  font: 500 14px/14px arial normal;
}
.radialnav .ellipsis {
  position: absolute;
  right: 40%;
  bottom: 0;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: #2980b9;
  color: white;
  text-align: center;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.44);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.radialnav .ellipsis i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
}
.radialnav .ellipsis:active, .radialnav .ellipsis:hover {
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.44);
  background: #2e8ece;
}
.radialnav a {
  color: white;
  text-decoration: none;
}
.radialnav.active .ellipsis {
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.44);
  background: #2e8ece;
}
.radialnav.active .menu {
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.menu, .submenu {
  position: absolute;
  top: 50%;
  right: 8%;
  z-index: 0;
  width: 300px;
  height: 300px;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  -webkit-transition: all .15s ease;
  -moz-transition: all .15s ease;
  transition: all .15s ease;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.menu > li:nth-of-type(1), .submenu > li:nth-of-type(1) {
  -moz-transform: rotate(0deg) skew(50deg);
  -ms-transform: rotate(0deg) skew(50deg);
  -webkit-transform: rotate(0deg) skew(50deg);
  transform: rotate(0deg) skew(50deg);
}
.menu > li:nth-of-type(2), .submenu > li:nth-of-type(2) {
  -moz-transform: rotate(35deg) skew(50deg);
  -ms-transform: rotate(35deg) skew(50deg);
  -webkit-transform: rotate(35deg) skew(50deg);
  transform: rotate(35deg) skew(50deg);
}
.menu > li:nth-of-type(2) > a, .submenu > li:nth-of-type(2) > a {
  background-color: #4aa3df;
}
.menu > li:nth-of-type(3), .submenu > li:nth-of-type(3) {
  -moz-transform: rotate(70deg) skew(50deg);
  -ms-transform: rotate(70deg) skew(50deg);
  -webkit-transform: rotate(70deg) skew(50deg);
  transform: rotate(70deg) skew(50deg);
}
.menu > li:nth-of-type(4), .submenu > li:nth-of-type(4) {
  -moz-transform: rotate(105deg) skew(50deg);
  -ms-transform: rotate(105deg) skew(50deg);
  -webkit-transform: rotate(105deg) skew(50deg);
  transform: rotate(105deg) skew(50deg);
}
.menu > li:nth-of-type(4) > a, .submenu > li:nth-of-type(4) > a {
  background-color: #4aa3df;
}
.menu > li:nth-of-type(5), .submenu > li:nth-of-type(5) {
  -moz-transform: rotate(140deg) skew(50deg);
  -ms-transform: rotate(140deg) skew(50deg);
  -webkit-transform: rotate(140deg) skew(50deg);
  transform: rotate(140deg) skew(50deg);
}
.menu > li, .submenu > li {
  position: absolute;
  bottom: 50%;
  right: 50%;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  margin-top: -1.3em;
  margin-left: -10em;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all 0.3s ease;
}
.menu > li a, .submenu > li a {
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  display: block;
  height: 14.5em;
  width: 14.5em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 0em;
  text-align: center;
  font-size: 1.18em;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s, color 0.3s;
  -moz-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;
  background-color: #3498db;
}
.menu > li a i, .submenu > li a i {
  padding: 20px 15px 0 0;
}
.menu > li a:active, .menu > li a:hover, .submenu > li a:active, .submenu > li a:hover {
  background-color: #8bc4ea;
}

4. CSS/CSS3 Styles Required for Submenus.

.submenu {
  position: absolute;
  z-index: 1;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.submenu > li:nth-of-type(1) {
  -moz-transform: rotate(0deg) skew(50deg);
  -ms-transform: rotate(0deg) skew(50deg);
  -webkit-transform: rotate(0deg) skew(50deg);
  transform: rotate(0deg) skew(50deg);
}
.submenu > li:nth-of-type(2) {
  -moz-transform: rotate(35deg) skew(50deg);
  -ms-transform: rotate(35deg) skew(50deg);
  -webkit-transform: rotate(35deg) skew(50deg);
  transform: rotate(35deg) skew(50deg);
}
.submenu > li:nth-of-type(2) > a {
  background-color: #2cc36b;
}
.submenu > li:nth-of-type(3) {
  -moz-transform: rotate(70deg) skew(50deg);
  -ms-transform: rotate(70deg) skew(50deg);
  -webkit-transform: rotate(70deg) skew(50deg);
  transform: rotate(70deg) skew(50deg);
}
.submenu > li:nth-of-type(4) {
  -moz-transform: rotate(105deg) skew(50deg);
  -ms-transform: rotate(105deg) skew(50deg);
  -webkit-transform: rotate(105deg) skew(50deg);
  transform: rotate(105deg) skew(50deg);
}
.submenu > li:nth-of-type(4) > a {
  background-color: #2cc36b;
}
.submenu > li:nth-of-type(5) {
  -moz-transform: rotate(140deg) skew(50deg);
  -ms-transform: rotate(140deg) skew(50deg);
  -webkit-transform: rotate(140deg) skew(50deg);
  transform: rotate(140deg) skew(50deg);
}
.submenu > li {
  background: red;
  width: 6.5em;
  height: 4.1em;
  border-top-left-radius: 100%;
  border-top-right-radius: 0;
}
.submenu > li a {
  height: 13.5em;
  width: 13em;
  background-color: #27ae60;
}
.submenu > li a i {
  padding: 30px 0 0 0;
}
.submenu > li a:active, .submenu > li a:hover {
  background-color: #60db94;
}
.submenu.active {
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

5. JavaScript to enable radial navigation.

var thisButton,
    thisMenuItem,
    thisSubmenuItem,
    pieMenu = $('.radialnav'),
    menuItems  = $('.menu li'),
    submenuItems = $('.submenu'),
    submenuId = '';

function openMenu (thisButton) {
  if(!thisButton.hasClass('active'))
    thisButton.addClass('active');
  else
    $('.radialnav, .submenu').removeClass('active');
}

/* On click of the ellipsis */
$('.ellipsis').click(function (event) {
  event.preventDefault();
  
  openMenu($('.radialnav'));
});

menuItems.find('a').each(function (index) {
  thisMenuItem = $(this);
  
  thisMenuItem.hover(function () {
    // Hover over
    submenuId = menuItems.eq(index).attr('data-submenu');
    $('.submenu[data-submenuId="'+submenuId+'"]').addClass('active');
  }, function () {
    // Hover out
    // submenuItem.removeClass('active');
  });
});

submenuItems.find('a').hover(function () {
  console.log(1);
}, function () {
  console.log(0);
  submenuItems.hover(function () {
    console.log(2);
  }, function () {
    console.log(3);
  })
})

Material Design Styled Pie Menu with jQuery, material design pie menu Plugin/Github, material design select dropdown

See Demo And Download

Official Website(wbarahona): Click Here

This superior jQuery/javascript plugin is developed by wbarahona. For extra Advanced usage, please go to the official website.