Sunday 11 August 2013

BUILDING A CIRCULAR NAVIGATION WITH CSS TRANSFORMS - Part 1

A tutorial on how to create a circular navigation using CSS transforms.
CircularNavigation
In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.
Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. But don’t worry, the math is really very simple and I’ll be going through it step by step.
I also want to mention that credit for the original technique goes to Ana Tudor. I tweaked it to achieve the results that I wanted, which is also what I’m hoping you’ll be able to do by the end of this tutorial: have a deep and clear understanding of the technique so you can start fiddling around and creating your own styles.
So, without further ado, let’s get started!

THE MARKUP

We’re going to be building a navigation, so we’ll start with a regular navigation structure. We’ll need a div to contain our unordered list of items, a button to trigger the opening and closing of the navigation, the list of items, and for the first demo we’ll need an extra overlay to cover the page when the navigation is open.
1
2
3
4
5
6
7
8
9
10
11
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
   <ul>
       <li><a href="#"><span class="icon-picture"></span></a></li>
       <li><a href="#"><span class="icon-headphones"></span></a></li>
       <li><a href="#"><span class="icon-home"></span></a></li>
       <li><a href="#"><span class="icon-facetime-video"></span></a></li>
       <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
   </ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>
The icons we’re using in this demo are from Font Awesome.

THE MATH BEHIND THE CSS TRANSFORMS

The best way to explain the math is to use a visual explanation instead of a written one. So I’ll start with the logic and we’ll apply the math as we go, and after we’re done with our explanation we’ll get to the coding part, at which point you’ll be able to know what each CSS rule exactly does.
First let’s go over what a “central angle” is. This is a visual representation followed by a simple explanation:
cn-central-angle
Suppose you want to distribute all navigation items on a semi-circle like the example we’re making here, and you have 6 items in your navigation list, then each angle would have a central angle of:
180deg / 6 = 30deg
If you want the items to take up a complete circle, and you have 6 items you want to have in this circle, the central angle for each item would be:
360deg / 6 = 60deg
And so on. So you calculate the value of the central angle you want, and from here on we’ll start applying some simple math to CSS transforms to actually create these angles.
To create an angle of value equal to our desired central angle value, we’ll have to skew the items (using the skew() CSS function) by:
90deg – x degwhere x is the value of the central angle we want.
Simple. But in this case, all the content inside the list items will also be skewed and the content will look distorted, which is not what we want, so we’ll “unskew” the anchors inside each item so that the content looks fine, but we’ll get to that in a moment.
I’ve set up a live and interactive demo that will show you how the transforms are applied to the navigation items step by step so you get a clearer understanding of what we’ll be doing in the code. (Note that the walkthrough in the demo may differ slightly in order of steps from the steps we’ll be taking in the tutorial)
You might want to play the step-by-step demo at this point to get a clearer understanding of what we’ll be doing next. I’ve also added a walkthrough to the demo which explains what’s happening in each step, so take a minute to play the demo and try to gain a better understanding of what we’ll do. You can play the demo from start to finish using the Start Demo Button, or control moving from step to step using the Next Step Button, and you can reset it anytime using the Reset Button.
Here are screenshots of the steps you’re going to see in the demo:

Initial state:

Step-0

Step 1:

Step-1

Step 2:

step-2

Step 4:

Step-4

Step 5:

Step-5

Step 6:

Step-6

Step 7

Step-7
So let’s go over this again:
  • we’ll need to position the items absolutely inside their container.
  • We’ll set the transform-origin for each item to be the bottom right corner.
  • We’ll then translate the items up and to the left just enough so that their transform origin coincides with their container’s center.
  • We’ll then rotate the items clockwise into their positions using this formula: For each item of index i we rotate it by: i * x where x is again the value of the central angle
  • then skew them to get the central angle we want (using the formula we mentioned above)
In our example, we have 5 items, which means 5 central angles, that we want to cover only the upper half of the circle, so according to the math we explained above, every item would have a central angle of 36deg, but in our example I’ve set the central angle value to 40deg (because it provides a bigger clickable area), so the sum of all angles will be 5 * 40 = 200deg which is greater than 180deg. In this case, all we do is just rotate the items “back” counter-clockwise by (200-180)/2 deg to ensure they are balanced on both sides.
At this point we have created our central angles and positioned them. But skewing the list items has also caused their content (anchor tags) to skew too, and thus caused their content to be distorted, so the last mathematical rule we’ll be applying here (phew!) is one that will make sure the anchor tags aren’t distorted and their content be visible. The rule is:
You unskew the anchor tags, which means you skew them by the opposite value of that you used to skew the list items, and then you unrotate the anchors by a value of:
- [90 – (x/2) ] with x being the value of the central angle
so, for a central angle value of 40deg, we have to skew the anchors by -40deg and rotate them by:
-[ 90 – (40/2) ] = -70 deg
The anchors are positioned absolutely inside their parents, and the overflow is set to hidden on the list items, which means that part of the anchors is cut off, so in order to make sure that the text/icon content of the anchors lies within their visible part, we’ll set their text to be aligned at the center.
And that’s all the math you need to create the slices inside the navigation! Phew, finally, right?
So let’s go over this one more time, quickly:
  1. Rotate the items into position by: angle y = i * x (where i = index of item, and x = value of central angle)
  2. Skew them by 90deg – x (where x is the value of central angle, again)
  3. Rotate items in the opposite direction if/when needed to balance (this step is actually merged with the previous one, you subtract the value by which you want to rotate the angles back from the value of the angle you rotate them by)
  4. “Unskew” and “unrotate” the anchors inside them (and set their text align to center”)
Of course I’ve skipped part where you move the list items so that their transform origin coincides with their container’s center (as shown in the demo). And that’s pretty much all you need to create the angles, but that’s not everything you need to create the whole navigation. A few simple steps remain, and they are pretty much just regular styling, so let’s start with the CSS and talk about these steps as we go!

THE CSS

We’re first going to style the first demo.
CircularNavigation_Demo1
We’re going to use Modernizr‘s classes applied to the body tag to target supporting and non-supporting browsers, and provide a very simple and basic fallback for older browsers that do not support CSS transforms.
Let’s start with the styles for the navigation wrapper. It will get a fixed position at the bottom center of the page, and will initially be scaled down, and when the open button is clicked it will open / scale up.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.csstransforms .cn-wrapper {
  font-size:1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  transform: scale(0.1);
  transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the navigation up */
.csstransforms .opened-nav {
  border-radius: 50%;
  transform: scale(1);
}
We’ll also style and position the button which will trigger the opening and closing of our navigation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.cn-button {
  border:none;
  background:none;
  color: white;
  text-align: Center;
  font-size: 1.5em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #111;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
  background-color: #222;
}
When the navigation is opened, an overlay covers the page. Here are the styles for the overlay.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.cn-overlay{
  width:100%
  height:100%;
  background-color: rgba(0,0,0,0.6);
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  opacity:0;
  transition: all .3s ease;
  z-index:2;
  pointer-events:none;
}
 
/* Class added to the overlay via JavaScript to show it when navigation is open */
.cn-overlay.on-overlay{
  pointer-events:auto;
  opacity:1;
}
Now we’ll style the navigation items and their anchors, applying the logic and math-based transformed we explained earlier.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  transition: border .3s ease;
}
 
.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  transform: skew(-50deg) rotate(-70deg) scale(1);
  transition: opacity 0.3s, color 0.3s;
}
 
.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}
/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */
 
.csstransforms .cn-wrapper li:first-child {
  transform: rotate(-10deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(2) {
  transform: rotate(30deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(3) {
  transform: rotate(70deg) skew(50deg)
}
 
.csstransforms .cn-wrapper li:nth-child(4) {
  transform: rotate(110deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(5) {
  transform: rotate(150deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
}
 
.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
}
 
/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}
 
/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}
We’ll provide a simple and basic fallback for browsers that do not support CSS transforms.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.no-csstransforms .cn-wrapper{
  font-size:1em;
  height:5em;
  width:25.15em;
  bottom:0;
  margin-left: -12.5em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left:50%;
  border:1px solid #ddd;
}
 
.no-csstransforms .cn-button{
  display:none;
}
 
.no-csstransforms .cn-wrapper li{
  position:static;
  float:left;
  font-size:1em;
  height:5em;
  width:5em;
  background-color: #eee;
  text-align:center;
  line-height:5em;
}
 
.no-csstransforms .cn-wrapper li a{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
  font-size:1.3em;
  border-right: 1px solid #ddd;
}
 
.no-csstransforms .cn-wrapper li a:last-child{
  border:none;
}
 
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus{
  background-color: white;
}
 
.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}
Of course we want our navigation to be responsive, so it will shrink to fit smaller screens. Here are the responsive styles for both the circular and the simple styles.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media screen and (max-width:480px){
  .csstransforms .cn-wrapper{
    font-size:.68em;
  }
  .cn-button{
    font-size:1em;
  }
  .csstransforms .cn-wrapper li {
    font-size:1.52em;
  }
}
 
@media screen and (max-width:320px){
  .no-csstransforms .cn-wrapper{
    width:15.15px;
    margin-left: -7.5em;
  }
  .no-csstransforms .cn-wrapper li{
    height:3em;
    width:3em;
  }
}
And that’s it for the first demo! Let’s move on to the next one.
CircularNavigation_Demo2
The second circular style is different from the first one, but all the math and logic and transforms needed to create this style is pretty much the same as the previous one, except for three differences. So we won’t be going over the same explanation again, we’ll only cover the three different steps needed for this style.
Let’s take the above example again, and change just a small simple CSS rule, and see what difference it makes to the shape of the items.
We’ll apply a radial gradient background to the anchors with a transparent background color. The result will look like this:
cn-radial-gradient
You can see where we’re headed from here. Next, we’re going to add space between the items, by changing the angle of rotation for each item a little bit. We’ll also remove the background colors of the list items and the container, and the borders used, and decrease the top padding of the anchor tags to pull the icons up a little bit to center them vertically. The result obtained looks like this: