CSS3 circle with clickable items jQuery(Radial Menu)

Question

Where can I find an example to create a circle like this with css3 and jQuery (for navigation)
There should be text (html) in the center
When you click (or hover) the next item, the center content should change, and also the background color

Answer 1

forked from codepen

/**
 * Circular menu v2
 */
* { margin: 0; padding: 0; }
html { font: 100%/1.3 Century Gothic, Verdana, sans-serif; }
body { overflow: hidden; min-width: 20em; }
.menuopt { display: none; }
.circle, .circle:before, .circle:after { border-radius: 50%; }
nav {
 margin: 5em auto;
 min-width: 16em; width: 72%; max-width: 40em;
}
nav ul {
 position: relative;
 padding: 50%;
 max-width: 0; max-height: 0;
 box-shadow: 0 0 .5em rgba(0,0,0,.5);
 list-style: none;
 background: white;
}
nav li {
 position: absolute;
 transition: 2s;
}
.slice {
 overflow: hidden;
 position: absolute;
 top: 0; left: 0;
 width: 50%; height: 50%;
 transform-origin: 100% 100%;
}
.unsel {
 top: 34%; left: 34%;
 width: 32%; height: 32%;
 box-shadow: 0 0 .75em;
 background: paleturquoise;
}
.coconut { transform: skewX(50deg); }
.vanilla { transform: rotate(40deg) skewX(50deg); }
.orange { transform: rotate(80deg) skewX(50deg); }
.almond { transform: rotate(120deg) skewX(50deg); }
.grape { transform: rotate(160deg) skewX(50deg); }
.blackberry { transform: rotate(-160deg) skewX(50deg); }
.cherry { transform: rotate(-120deg) skewX(50deg); }
.strawberry { transform: rotate(-80deg) skewX(50deg); }
.raspberry { transform: rotate(-40deg) skewX(50deg); }
.magnifiable { height: 100%; }
nav label { cursor: pointer; }
.slice label {
 display: block;
 width: 200%; height: 200%;
 transform: skew(-50deg) rotate(-70deg);
 box-shadow: 0 0 .1em black;
 opacity: .5;
 color: transparent;
 font-size: .8em;
 line-height: 1.9;
 text-align: center;
 text-decoration: none;
 transition: 1s;
}
.slice label:before {
 position: absolute;
 top: 10%; left: 10%;
 width: 80%; height: 80%;
 border-radius: 50%;
 box-shadow: 0 0 1em rgba(0,0,0,.5);
 background-position: 50% 0;
 background-repeat: no-repeat;
 background-size: 35% 35%;
 content: '';
}
.slice label:hover { opacity: 1; }
.dark label:hover { color: white; }
.light label:hover { color: black; }
.unsel label {
 display: block;
 height: 100%;
 background: radial-gradient(rgba(0,0,0,.5), transparent 50%);
}
.coconut label, .ococonut:checked ~ nav .unsel { background: #f4f5fa; }
.vanilla label, .ovanilla:checked ~ nav .unsel { background: #ffeb98; }
.orange label, .oorange:checked ~ nav .unsel { background: #ffb038; }
.almond label, .oalmond:checked ~ nav .unsel { background: #d3a573; }
.grape label, .ogrape:checked ~ nav .unsel { background: #d9e260; }
.blackberry label, .oblackberry:checked ~ nav .unsel { background: #833a68; }
.cherry label, .ocherry:checked ~ nav .unsel { background: #b1001d; }
.strawberry label, .ostrawberry:checked ~ nav .unsel { background: #ec0404; }
.raspberry label, .oraspberry:checked ~ nav .unsel { background: #ef6982; }
.coconut label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Cocos_nucifera00.jpg/320px-Cocos_nucifera00.jpg); }
.vanilla label:before { background-image: url(http://www.learningherbs.com/image-files/vanilla-extract-7.jpg); }
.orange label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/OrangeBloss_wb.jpg/250px-OrangeBloss_wb.jpg); }
.almond label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/PikiWiki_Israel_7025_Amond_blossom.jpg/170px-PikiWiki_Israel_7025_Amond_blossom.jpg); }
.grape label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Table_grapes_on_white.jpg/220px-Table_grapes_on_white.jpg); }
.blackberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg/220px-Ripe%2C_ripening%2C_and_green_blackberries.jpg); }
.cherry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Cherry_Stella444.jpg/220px-Cherry_Stella444.jpg); }
.strawberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/PerfectStrawberry.jpg/220px-PerfectStrawberry.jpg); }
.raspberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Raspberries05.jpg/220px-Raspberries05.jpg); }
.slice label:hover:after { opacity: 0; }
.ococonut:checked ~ nav .coconut { transform: skewX(50deg) scale(1.05); }
.ovanilla:checked ~ nav .vanilla { transform: rotate(40deg) skewX(50deg) scale(1.05); }
.oorange:checked ~ nav .orange { transform: rotate(80deg) skewX(50deg) scale(1.05); }
.oalmond:checked ~ nav .almond { transform: rotate(120deg) skewX(50deg) scale(1.05); }
.ogrape:checked ~ nav .grape { transform: rotate(160deg) skewX(50deg) scale(1.05); }
.oblackberry:checked ~ nav .blackberry { transform: rotate(-160deg) skewX(50deg) scale(1.05); }
.ocherry:checked ~ nav .cherry { transform: rotate(-120deg) skewX(50deg) scale(1.05); }
.ostrawberry:checked ~ nav .strawberry { transform: rotate(-80deg) skewX(50deg) scale(1.05); }
.oraspberry:checked ~ nav .raspberry { transform: rotate(-40deg) skewX(50deg) scale(1.05); }
.ococonut:checked ~ nav .coconut label, 
.ovanilla:checked ~ nav .vanilla label, 
.oorange:checked ~ nav .orange label, 
.oalmond:checked ~ nav .almond label, 
.ogrape:checked ~ nav .grape label, 
.oraspberry:checked ~ nav .raspberry label {
 box-shadow: 0 0 .45em rgba(0,0,0,.5);
 opacity: 1; color: black;
}
.oblackberry:checked ~ nav .blackberry label , 
.ocherry:checked ~ nav .cherry label, 
.ostrawberry:checked ~ nav .strawberry label {
 box-shadow: 0 0 .45em rgba(0,0,0,.5);
 opacity: 1; color: white;
}
@media (min-width: 25em) { .slice label { font-size: 1em; line-height: 2.3; } }
@media (min-width: 35em) { .slice label { font-weight: 700; line-height: 2.7; } }

<!-- content to be placed inside <body>…</body> -->
<input type='radio' name='opt' id='ococonut' class='menuopt ococonut'>
<input type='radio' name='opt' id='ovanilla' class='menuopt ovanilla'>
<input type='radio' name='opt' id='oorange' class='menuopt oorange'>
<input type='radio' name='opt' id='oalmond' class='menuopt oalmond'>
<input type='radio' name='opt' id='ogrape' class='menuopt ogrape'>
<input type='radio' name='opt' id='oblackberry' class='menuopt oblackberry'>
<input type='radio' name='opt' id='ocherry' class='menuopt ocherry'>
<input type='radio' name='opt' id='ostrawberry' class='menuopt ostrawberry'>
<input type='radio' name='opt' id='oraspberry' class='menuopt oraspberry'>
<input type='radio' name='opt' id='unsel' class='menuopt' checked>
<nav>
 <ul class='circle'>
  <li class='coconut light slice'>
    <label for='ococonut' class='circle'>Coconut</label>
  </li>
  <li class='vanilla light slice'>
    <label for='ovanilla' class='circle'>Vanilla</label>
  </li>
  <li class='orange light slice'>
    <label for='oorange' class='circle'>Orange</label>
  </li>
  <li class='almond light slice'>
    <label for='oalmond' class='circle'>Almond</label>
  </li>
  <li class='grape light slice'>
    <label for='ogrape' class='circle'>Grape</label>
  </li>
  <li class='blackberry dark slice'>
    <label for='oblackberry' class='circle'>Blackberry</label>
  </li>
  <li class='cherry dark slice'>
    <label for='ocherry' class='circle'>Cherry</label>
  </li>
  <li class='strawberry dark slice'>
    <label for='ostrawberry' class='circle'>Strawberry</label>
  </li>
  <li class='raspberry light slice'>
    <label for='oraspberry' class='circle'>Raspberry</label>
  </li>
  <li class='unsel circle'><label for='unsel'></label></li>
 </ul>
</nav>

Or even this one

$(document).ready(function() {
  //Center the "info" bubble in the  "circle" div
  var divTop = ($("#divCircle").height() - $("#middleBubble").height()) / 2;
  var divLeft = ($("#divCircle").width() - $("#middleBubble").width()) / 2;
  $("#middleBubble").css("top", divTop + "px");
  $("#middleBubble").css("left", divLeft + "px");

  //Arrange the icons in a circle centered in the div
  numItems = $("#divCircle img").length; //How many items are in the circle?
  start = 0.0; //the angle to put the first image at. a number between 0 and 2pi
  step = (4 * Math.PI) / numItems; //calculate the amount of space to put between the items.

  //Now loop through the buttons and position them in a circle
  $("#divCircle img").each(function(index) {
    radius = ($("#divCircle").width() - $(this).width()) / 2.3; //The radius is the distance from the center of the div to the middle of an icon
    //the following lines are a standard formula for calculating points on a circle. x = cx + r * cos(a); y = cy + r * sin(a)
    //We have made adjustments because the center of the circle is not at (0,0), but rather the top/left coordinates for the center of the div
    //We also adjust for the fact that we need to know the coordinates for the top-left corner of the image, not for the center of the image.
    tmpTop = (($("#divCircle").height() / 2) + radius * Math.sin(start)) - ($(this).height() / 2);
    tmpLeft = (($("#divCircle").width() / 2) + radius * Math.cos(start)) - ($(this).width() / 2);
    start += step; //add the "step" number of radians to jump to the next icon

    //set the top/left settings for the image
    $(this).css("top", tmpTop);
    $(this).css("left", tmpLeft);
  });

});

$('.avatarList').click(function() {
  $(this).toggleClass('expand');
  $('#divCircle').toggleClass('expand');
});

$('#divCircle img').click(function() {
  var theSrc = $(this).attr('src');
  // alert(theSrc);
  $('.mainImg img').attr('src', theSrc);
});

html {
  background: #f2f6f8;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f8), color-stop(50%, #d8e1e7), color-stop(51%, #b5c6d0), color-stop(100%, #e0eff9));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
  /* IE6-9 */
}
.body {
  width: 200px;
  font-family: sans-serif;
  margin: 10% auto;
  text-align: center;
  height: 200px;
}
#divCircle {
  width: 195px;
  height: 195px;
  border-radius: 200px;
  position: relative;
  overflow: hidden;
  top: -10px;
  left: -10px;
  opacity: 0;
  margin: -60px;
  -webkit-transition: opacity 0s 0s;
}
#divCircle img {
  position: absolute;
  width: 50px;
  height: 50px;
  background: orange;
  border-radius: 60px;
  border: 2px #000 solid;
  -webkit-transition: all 0.4s;
}
#divCircle img:hover {
  border: 2px #333 solid;
  width: 55px;
  height: 55px;
}
#middleBubble {
  text-align: center;
  vertical-align: top;
  color: #252525;
  /*#6d6e71*/
  height: 60px;
  width: 60px;
  position: absolute;
  text-align: center;
}
#middleBubble img {
  top: 0px !important;
  left: 0px !important;
}
.mainImg {
  width: 60px;
  position: absolute;
  margin: -60px;
}
.mainImg img {
  width: 60px;
  border-width: 0px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 600px;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  margin: 60px 0 0 60px;
}
.avatarList {
  margin: 0px -60px;
  display: inline-block;
  /*  border:1px black solid; */
  width: 60px;
  height: 60px;
  background: orange;
  border-radius: 60px;
}
.avatarList.expand .mainImg img {
  border-color: rgba(0, 0, 0, 1);
  border-width: 60px;
  margin: 0;
}
#divCircle.expand {
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.5s 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div>Click to pick avatar</div>
  <br/>
  <div class="avatarList">
    <div class="mainImg">
      <img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/i04.png">
    </div>

    <div id="divCircle">
      <div id="middleBubble"></div>
      <img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/a03.png">
      <img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/c05.png">
      <img src="https://gp5.googleusercontent.com/-esaz03FKsLU/AAAAAAAAAAI/AAAAAAAAAAA/kk0t9Rd9DB0/s48-c-k-no/photo.jpg">
      <img src="http://www.veryicon.com/icon/png/Avatar/Face%20Avatars/Male%20Face%20G1.png">
      <img src="http://icons.iconarchive.com/icons/hopstarter/face-avatars/256/Female-Face-FG-1-brunette-icon.png">
      <img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/c05.png">
      <img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/i04.png">
    </div>

  </div>

</div>
<!--body-->