Instantly share code, notes, and snippets.

Last active December 22, 2015 08:39
Show Gist options
• Save SaraSoueidan/6446310 to your computer and use it in GitHub Desktop.
A Pen by Sara Soueidan.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters


There's no way in CSS to translate an item diagonally. But knowing the value of the radius of the circle, 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.

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:

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 b and a, where b is the value to pass to the translateX() function and a the value for the translateY() function.

The radius of the circle, i.e the value of c in our example is 10em.

According to the cos rule applied to angle BAC of the triangle, we get: cos(BAC) = b / c, hence, b = c * cos(BAC). 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 b.

Similarly, a = sin(BAC) * c, and this will be the value for translateY().

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.

And that's pretty much it, it looks more complicated that it really is. :)

If you like this simple How-To, you might want to read more about creating circular navigation in my tutorial on Codrops, and have a look at the demos included with it.

See ya!

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 var open = false; \$('button').click(function(){ if(!open){ \$('li').addClass('slideout'); open = true; } else{ open = false; \$('li').removeClass('slideout'); } });

Another simple circular menu. UPDATE: How-to and explanation included.

A Pen by Sara Soueidan on CodePen.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters