title: Dynamic circle navigation menu
body: <p>Here are the requirements:</p>
  
  <ol>
  <li>Hover effect when any of the ‘Navigation’ sections (Navigation 1,
  Navigation 2, Navigation 3) is selected.</li>
  <li>Click effect when any of the ‘Navigation’ sections (Navigation 1,
  Navigation 2, Navigation 3) is selected. If Navigation 1 is clicked,
  it will go to another page, same as Navigation 2 and Navigation 3.</li>
  </ol>
  
  <p>I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text
  {
  cursor:pointer;
  }
  .circle {
    position: relative;
    border: 0px;
    padding: 0;
    margin: 1em auto;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
  }
  li {
    overflow: hidden;
    position: absolute;
    top: -20%;
    right: -20%;
    width: 70%;
    height: 70%;
    transform-origin: 0% 100%;
    
  }
  
  .text {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
    text-align: center;
    transform: skewY(-60deg) rotate(15deg);
    padding-top: 20px;
  }
  li:first-child {
    transform: rotate(0deg) skewY(30deg);
    border-left: 8px solid #fff;
     border-right: 8px solid #fff;
  }
  li:nth-child(2) {
    transform: rotate(120deg) skewY(30deg);
     border-right: 8px solid #fff;
     border-left: 8px solid #fff;
  }
  li:nth-child(3) {
    transform: rotate(240deg) skewY(30deg);
    border-right: 8px solid #fff;
    border-left: 8px solid #fff;
  }
  li:first-child .text {
    background: green;
  }
  li:nth-child(2) .text {
    background: tomato;
  }
  li:nth-child(3) .text {
    background: aqua;
  }
  li:nth-child(3) .text:hover {
    background-color: #a5e2f3;
   
  }
  li:nth-child(2) .text:hover {
    background-color: #86d8ef;
    
  }
  li:nth-child(1) .text:hover {
    background-color: #66ceeb;
   
  }
  .cn-button {
   position: absolute;
   top: 40%;
   left: 50%;
   z-index: 11;
   margin-top: -2.25em;
   margin-left: -2.25em;
   padding-top: 0;
   width: 4.5em;
   height: 4.5em;
   border: 1px solid;
   border-radius: 50%;
   background: none;
   background-color: yellow;
   color: yellow;
   text-align: center;
   font-weight: 700;
   font-size: 1.5em;
   text-transform: uppercase;
   cursor: pointer;
   -webkit-backface-visibility: hidden;
  }
  .icon {
    position: absolute;
    /* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
   
    top: 40%;
    /* make sure it it rotated enough; angle of rotation = angle of the sector itself */
    transform: rotate(224deg);
    /* style further as needed */
    color: #fff;
    font-family: Indie Flower;
    font-size: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="cn-button" id="cn-button"&gt;&lt;/button&gt;
  &lt;ul class="circle"&gt;
    &lt;li&gt;
    &lt;a class="one" href="circle.html"&gt;
      &lt;div class="text" &gt;&lt;span class="icon"&gt;Navigation 1&lt;/span&gt;&lt;/div&gt;
   &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;a class="two" href="circle2.html"&gt;
      &lt;div class="text"&gt;&lt;span class="icon"&gt;Navigation 2&lt;/span&gt;&lt;/div&gt;
   &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;a class="three" href="circle3.html"&gt;
      &lt;div class="text"&gt;&lt;span class="icon"&gt;Navigation 3&lt;/span&gt;&lt;/div&gt;
   &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i want exact like <a href="https://i.stack.imgur.com/jyUgs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jyUgs.png" alt="enter image description here"></a>.</p>
  
  <p>How can I create a menu like this where I can dynamically add items?</p>