Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Sara Soueidan.
<div class="demo-wrapper">
<div class="container">
<h1>Simple Circular Menu - How-To</h1>
<p>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.</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, it looks more complicated that it really is. :)</p>
<p>If you like this simple How-To, you might want to read more about <a href="http://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>
<p>Also, you can read more tutorials on <a href="http://sarasoueidan.com">my blog</a>, and <a href="http://twitter.com/SaraSoueidan">follow me on Twitter</a>.</p>
<p>See ya!</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><span aria-hidden="true" class="icon-share"></span></button>
</div>
</div>
</div>
var open = false;
$('button').click(function(){
if(!open){
$('li').addClass('slideout');
open = true;
}
else{
open = false;
$('li').removeClass('slideout');
}
});
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700);
@font-face {
font-family: 'icomoon';
src:url('http://s.cdpn.io/9674/icomoon.eot');
src:url('http://s.cdpn.io/9674/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://s.cdpn.io/9674/icomoon.woff') format('woff'),
url('http://s.cdpn.io/9674/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.icon-share, .icon-twitter, .icon-facebook, .icon-google-plus, .icon-reddit, button {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
color:white;
display:block;
font-size:1.5em;
width:100%;
height:100%;
line-height:2em;
border-radius:50%;
}
.icon-share:before {
content: "\e000";
}
.icon-twitter{
background-color: #00ACEE;
}
.icon-twitter:before {
content: "\e001";
}
.icon-facebook{
background-color: #3C5A98;
}
.icon-facebook:before {
content: "\e002";
}
.icon-google-plus{
background-color: #B73223;
}
.icon-google-plus:before {
content: "\e003";
}
.icon-reddit{
background-color: #A5ADAF;
}
.icon-reddit:before {
content: "\e004";
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border:0;
}
html,
body {
height: 100%;
}
body {
border: 1px solid transparent;
font: 300 1.3em "Source Sans Pro", sans-serif;
padding: 5%;
color: #999;
}
h1{
margin:10px auto 30px;
color: deepPink;
}
p {
margin-bottom: 10px
}
a{
color: deepPink;
text-decoration: none;
font-weight: bold;
}
.container{
overflow:hidden;
width:80%;
margin: 0 auto;
}
button,
li {
border-radius: 50%;
text-align: center;
width: 3em;
height: 3em;
position: fixed;
bottom: 0;
left: 0;
-webkit-transition: .2s linear;
transition: .2s linear;
border: none
}
button {
background-color: #111;
z-index: 5;
cursor: pointer;
font-size:1em;
}
li.slideout:nth-child(1) {
-webkit-transform: translateY(-10em);
transform: translateY(-10em)
}
li.slideout:nth-child(2) {
-webkit-transform: translateY(-8.6602540378em) translateX(5em);
transform: translateY(-8.6602540378em) translateX(5em)
}
li.slideout:nth-child(3) {
-webkit-transform: translateY(-5em) translateX(8.6602540378em);
transform: translateY(-5em) translateX(8.6602540378em)
}
li.slideout:nth-child(4) {
-webkit-transform: translateX(10em);
transform: translateX(10em)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment