<div class="demo-wrapper">
            <div class="container">
                <h1>Simple Circular Menu With CSS &ndash; How-To</h1>
              <p>
                Circular menus are very popular for mobile apps. Using CSS transforms and transitions we can create a simple circular menu as the one shown in the corner below. And using the same principles explained below, the menu can be modified and customized to create an upwards or downwards opening menu too.
              </p>
              <p>There's no direct way in CSS to translate an item <em>diagonally</em>. But knowing the value of the radius of the circle on which we want to position the items, we can use it, and apply a simple mathematical rule to calculate the value of the horizontal and vertical translation values to pass to the translateX() and translateY() functions, and that way end up with a "diagonal" translation to move the menu items to the exact positions on the circle.</p>
                <p>The value of the radius of the circle will be the value of the hypotenuse we will use in a simple math rule according to this image below:</p>
              <p><img src="http://i.ajdesigner.com/cdn/right_triangle_image.png" alt="" /></p>
              <p>Assuming point A is the position of the "share" button, which is also the center of the circle on which we want to position the other menu items. Let B be the point where we want to position one of the items on the circle. We need to calculate the value of <strong>b</strong> and <strong>a</strong>, where b is the value to pass to the translateX() function and a the value for the translateY() function.</p>
              <p>The radius of the circle, i.e the value of <strong>c</strong> in our example is 10em.</p>
              <p>According to the cos rule applied to angle BAC of the triangle, we get: <strong>cos(BAC) = b / c</strong>, hence, <strong>b = c * cos(BAC)</strong>. You determine the value of the angle you want depending on how many items you need, and apply this rule to calculate the value of <strong>b</strong>.</p>
              <p>Similarly, <strong> a = sin(BAC) * c</strong>, and this will be the value for translateY().</p>
              <p>In this example, the angle for the google plus icon will be 30deg, and that for the facebook icon will be 60deg (after drawing the triangle for each angle), and you can apply the above rules to calculate the values needed to translate the items.</p>
              <p>And that's pretty much it.</p>
              <p>
                The click event which closes/opens the menu can be handled using Javascript, or you can take it one step further and have a CSS-only menu by using the CSS <a href="https://css-tricks.com/the-checkbox-hack/">Checkbox hack</a>. In this example, I'm using Javascript, and the HTML5 classList API, which is not supported in all browsers, so you need to view the demo in a modern browser to make it work, or uncomment the jQuery code and use that instead of the classList API code.
              </p>
              <p>If you like this simple How-To, you might want to read more about <a href="https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/">creating circular navigation in my tutorial on Codrops</a>, and have a look at the demos included with it.</p>
             
                <div class="share-buttons cn-wrapper">
                  <ul>
                    <li><a href="#"><span aria-hidden="true" class="icon-twitter"></span></a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-facebook"></span></a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-google-plus"></span></a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-reddit"></span></a></li>
                  </ul>
                   <button class="trigger"><span aria-hidden="true" class="icon-share"></span></button>
                </div>
            </div>
        </div>