Radial Menu mixin

Introduction

In this article we will be creating a mixin to create the styles for a radial menu. The idea for the radial menu is not my own, I came across a demonstration of a radial menu by Permalight NYC and got inspired. The mixin will be used to create the styles for our menu elements and I will show how you can easily change the way the menu fans out just by playing with some custom data attributes. The examples are in LESS but at the end you can download the finished mixin in either LESS or SCSS format.

Why reinvent the wheel?

That is a fair enough question. The Permalight menu looks good, in fact our end result will look very similar, but I think there is some room for improvement. Let me list the issues I will address in version.

The menu should be usable in Internet Explorer 8
There are still quite a lot of people browsing the web with Internet Explorer 8. I think the menu should be functional on Internet Explorer 8, it doesn't have to look as good as in a more modern browser.
Easier settings
The version I based mine on has two variables, distance and factor, which determine the size of the menu when opened. I find this a little too difficult to work with. I want to be able to just specify the radius of the circle, it seems easier that way to me to use the mixin.
Decouple the HTML element order from the order of the menu
I want to be able to easily shuffle the menu items and not having to alter their order in which they appear in the HTML itself. Perhaps the items don't make that much sense out of order when read out by a screen reader.
Make it easy to alter the way the menu opens
Sometimes you want the 1st element on top, other times you want it to be on the left. This should be easy to accomplish and not require a rewrite of the mixin.
Make it leaner
Why use a couple of HTML elements to make a menu item when only one HTML element will do? Lean & mean is the name of the game.
The menu should be usable for people using screen readers or the keyboard
The menu we create should be fully usable when you use the tab key to navigate the website or when you use a screen reader to get around.

Prerequisites

If you want to recreate the mixin from the tutorial you will need the following to succeed:

A LESS or SASS compiler
As stated in the introduction, at the end I offer a download for both a LESS and a SASS version. When you want to use the LESS version you will need version 1.4 or later.
HTML, CSS & and some JavaScript skills
This shouldn't come as a surprise, you need at least a basic knowledge of HTML and CSS / SASS. The SASS code that I wrote for this mixin will be explained in the article but a basic understanding of what SASS is and how it works helps to understand the examples.
High-school math
(Un)fortunately you can't make a radial menu without some basic trigonometry that you might have had in High-school. I'll do my best to explain the math I use the best I can. If you just want to use a radial menu you can skip the math and just enjoy the end result.

Let's get started!

Okay, time to get down to business. In this tutorial we will use the mixin to create a menu with a maximum of 8 items. Please use 'inspect element' (or your browser's equivalent) on the examples to see the HTML that was used to create them. We'll just number the menu items so we can more easily see what is going on once we start playing around with them.

Say hello to the our lovely items

If you inspect the items above you will see it are just 8 buttons, nothing fancy.

Collapsed menu

First what we need to do is position all items directly on top of each other. This should be easy enough, we'll just give the buttons a position:absolute. As a result the container element in which the buttons are positioned no longer has a width or height.

We can think of our dimensionless div as the center point of the radial menu. It will help us later on when the buttons are centered on the div element. To center the buttons we need to shift it to the left and top.

And now you see one, too bad it's the wrong one

When you inspect the example above you will see the div with the class radial-menu-small is in the center of the buttons. The diameter of our buttons is 50px, making the buttons 50px by 50px. The radius is just half of that, 25px in this case. This is the number of pixels we had to shift the buttons up and to the left by, to center them on the div element.

Another thing to notice is that the div element has been positioned with some margin and has been given a bottom padding. Because the menu items are positioned absolute the parent element doesn't get a dimension. By using the margin and padding we make sure the div element takes up enough space to show the menu properly.

Okay, that takes care of that but now the last menu item is on top instead of on the bottom. Not quite what we want, is it? We will have to fix this.

Mixin for the z-index

The problem of the wrong button being on top is easy enough to counter. We can order the HTML elements the other way around or we can play with the z-index of the menu items to change the order in which they are displayed. Once we start animating the menu we can't get away with just setting the z-index for the first item as it will reveal the items in the wrong order. Instead of writing eight class to set the z-indexes we will create a small mixin to help us.


/*  The name of our mixin is radial-menu and it takes a single parameter, the
    number of menu items we have. */
.radial-menu(@items) {
    /*  This is another small mixin with a single parameter, index, with a LESS guard.
        This mixin will be executed only when the value of index is bigger than -1. */
    .radial-menu-items (@index) when (@index > -1) {
        /*  Here we create a CSS class with an attribute selector for data-index. Since
            we're using a custom attribute it is prefixed with 'data-' and it uses the
            index parameter that was used to call the mixin. */
        .radial-menu-item[data-index="@{index}"] {
            /*    In this line we set the z-index property. We're substracting the value
                of index from 100, assuming no one will make a menu with more than a
                100 items. */
            z-index: (100 - @index);
        }
        /*  Here we call the radial-menu-items mixin again but this time with the value
            of index decreased by 1. Yup, we're using recursion to generate all the
            styles we need. Since the guard prevents the mixin from executing when the
            value if index drops below 0 it will stop the recursion. In some examples
            you will see something like this:
                .radial-menu-items (@index) when (@index = -1){ }
            but this it totally uncessary. */
        .radial-menu-items((@index - 1));
    }
    /*  Within the radial-menu we need to kick off the radial-menu-items mixin. We pass
        items - 1 as the first value because we tell it we have 8 items but the
        radial-menu-items mixin is 0 based. We could make it 1 based but we're so used to
        the first element having an index of 0, why mess with that? */
    .radial-menu-items((@items - 1));
}

z-index mixin

Now we can call the mixin like this:

@include radial-menu(8);

It will output the following CSS:

.radial-menu-item[data-index="7"] { z-index: 93; }
.radial-menu-item[data-index="6"] { z-index: 94; }
.radial-menu-item[data-index="5"] { z-index: 95; }
.radial-menu-item[data-index="4"] { z-index: 96; }
.radial-menu-item[data-index="3"] { z-index: 97; }
.radial-menu-item[data-index="2"] { z-index: 98; }
.radial-menu-item[data-index="1"] { z-index: 99; }
.radial-menu-item[data-index="0"] { z-index: 100; }

Now we need to give our menu items the data-index attribute and fill this attribute with the sequential position where we want our item to be:

The triumphant return of item 1

Taking position

We will always need the menu items to be positioned absolutely, it would make sense to add this to our mixin. We also want the menu items to be centered on the top left corner of the parent element when the menu is closed, another thing to add to the mixin. But in order to be able to position the menu items the mixin needs to know how wide they are. Well, it really just need to know the radius and not the diameter in order to position the menu items. We will need to introduce another parameter, item-radius.

This is also a good moment to point out something about the radial menu, it is meant to work with circular or square menu items. It can be altered to work properly with rectangular items but that is outside the scope of this tutorial.


.radial-menu(@items, @item-radius) {
    .radial-menu-item {
        left: unit((-@item-radius), px);
        position: absolute;
        top: unit((-@item-radius), px);
    }

    .radial-menu-items(@index) when (@index > -1) {
        .radial-menu-item[data-index="@{index}"] {
            z-index: (100 - @index);
        }
        .radial-menu-items((@index - 1));
    }
    .radial-menu-items((@items - 1));
}

Adding the position of the menu items to the mixin

Our menu items are 50 by 50 pixles, so the radius is 25 pixels. Now we can call the mixin like this:

@radial-menu(8, 25);

It will output the following CSS:

.radial-menu-item { left: -25px; position: absolute; top: -25px; }
.radial-menu-item[data-index="7"] { z-index: 93; }
.radial-menu-item[data-index="6"] { z-index: 94; }
.radial-menu-item[data-index="5"] { z-index: 95; }
...

Now you see me, now you don't

Remember how I pointed out that it took 8 times hitting the tab key to get past the radial menu in its closed state? I promised we would do something about, this is where we will fix this. By default we will give our menu items a visibility value of hidden. In the mixin we will reset the visibility value of the item with data-index=0.


.radial-menu(@items, @item-radius, @menu-radius) {
    @step-in-radians: ((360 / @items) * (pi() / 180));

    .radial-menu-item {
        left: unit((-@item-radius), px);
        position: absolute;
        top: unit((-@item-radius), px);
        /*  We will hide the menu items by default, this will hide them from the
            tab key. */
        visibility: hidden;
    }
    /*  The first item should always be visible. */
    .radial-menu-item[data-index="0"] {
        visibility: visible;
    }

    /*  When the menu is open all items need to be visible. */
    &.open > .radial-menu-item {
        visibility: visible;
    }

    .radial-menu-items (@index) when (@index > -1) {
        .radial-menu-item[data-index="@{index}"] {
            z-index: (100 - @index);
        }

        .radial-menu-items((@index - 1));
    }
    .radial-menu-items((@items - 1));
}

Showing just the first item

Visually you will not see much of a difference between the example below and the previous example. If you've been using the keyboard you will notice a big difference, it will now just take a single stroke of the tab key to move past our closed menu.

Now extra keyboard friendly

Opening up the menu

That took care of the menu in its closed state, time to work on its opened state. We will have to calculate where each menu item needs to be when the user clicks on the menu and opens it. We will distribute the menu items evenly, this makes it easy to calculate the angle between the menu items. We can simply divide 360 degrees by the number of items to get the angle between each menu item.

Once we have the angle we need at least one other piece of information in order to be able to calculate each point, we need to know the radius of the circle on which the menu items will be positioned. With the angle and the radius known we can use the cos and sin functions to calculate the x and y coordinates for each menu item. Let's see what that will look like in our mixin.


/*  We've added yet another parameter to our mixin, menu-radius. This lets us
    specify how big the menu should be when it is opened. It is the distance from the
    center of the menu items when the menu is closed to the center of the menu items
    when the menu is opened. */
.radial-menu(@items, @item-radius, @menu-radius) {
    /*  Here we calculate the angle between the menu items by dividing 360 degrees with
        the number of menu items. Because the default unit for the cos and sin
        functions is radians we will convert the degrees to radians here. */
    @step-in-radians: ((360 / @items) * (pi() / 180));

    .radial-menu-item {
        left: unit((-@item-radius), px);
        position: absolute;
        top: unit((-@item-radius), px);
        visibility: hidden;
    }
    .radial-menu-item[data-index="0"] {
        visibility: visible;
    }

    &.open > .radial-menu-item {
        visibility: visible;
    }

    .radial-menu-items (@index) when (@index > -1) {
        .radial-menu-item[data-index="@{index}"] {
            z-index: (100 - @index);
        }

        /*  This is our new CSS class for when the menu is opened. We'll be applying
            the class active on the container element which will trigger this class to
            be applied. Note that this style doesn't use the attribute data-index but
            is using data-position instead. This will be important later on. */
        .active > .radial-menu-item[data-position="@{index}"] {
            /*  On this line we will calculate the angle for the current index by
                multiplying it with value we calculated earlier and stored in
                step-in-radians. We substract pi() / 2 to shift the angle 90 degrees
                counterclockwise. This will result in index 0 being positioned at
                12 o'clock instead of 3 o'clock. */
            @angle : ((@step-in-radians * @index) - (pi()/2));
            /*  The left value is calculated by taking the value of the cosine function
                for the angle of the menu item, this will produce a number between 0
                and 1. Now we multiply this with the radius of the open menu, this will
                give us the center point of the menu item on the x-axis. Last but not
                least we subtract the radius of the menu item, this is because we
                specify the left point of the element and not the center point of the
                element with CSS. */
            left: unit((round((cos(@angle) * @menu-radius), 0) - @item-radius), px);
            /*  This is very simular to the last line, except now we do it for the top
                value of the menu item. Instead of cos we use sin. */
            top: unit((round((sin(@angle) * @menu-radius), 0) - @item-radius), px);
        }

        .radial-menu-items((@index - 1));
    }
    .radial-menu-items((@items - 1));
}

Calculating where each menu item should go

The reason the top and left values will work for us is because everything is calculated around the top left corner of the nav element. This is position (0, 0) as far as our menu items are concerned. Say we want our menu to have a radius of 70 pixels when opened. Now we can call the mixin like this:

@radial-menu(8, 25, 70);

Now if we set the class open on the container element and we give each menu item the attribute data-position with its index as the value we get the following result. You can click on menu item 1 to open or close the menu.

Everything in its right place

As you may have noticed the margin and padding on the menu container has changed. Because the menu can now be opened up we need some extra room to display the menu in all its glory.

So, how does the math work?

This is the part you can easily skip if you want to. I will do my best to explain the math I've used to calculate where each menu item should go when the menu is opened up. It is not crucial to understanding the mixin.

As said before, the top left corner of the parent element for the menu items is the center of the radial menu. In Example 5 this is the div element with the class radial-menu-normal. For as far as the menu items are concerned this is coordinate (0, 0), as illustrated with the white rectangle in Image 1.

The center coordinate is shown as a white rectangle, the menu radius is visualized by the black circle.

The parameter menu-radius is the way we tell the mixin how far from the center coordinate we want our menu items to be when the menu is opened up. With a menu radius of 70 we are saying we want the center of the menu items to be 70 pixels away from the center of the radial menu. In Image 1 one the menu radius is visualized with the black circle around the menu item, this is where the center of the menu items will be placed when the menu is opened.

Calculating the position

Per menu item we need to calculate where on the circle the menu item should be when the menu is opened. Since the mixin knows the number of items we can easily calculate the angle between the items.

The menu item in its open position. The slanted side of the rectangle is 70 pixels long.

The distance from the center of the radial menu to the center of the menu item is 70 pixels. We know the angle of the menu item, in our example we have 8 menu items and this position has an angle of 45 degrees. With these two variables known we have all the information we need to calculate how far we need to move the menu item on the x- and y-axis. All we need for this are the sines and cosines functions.

The vertical position

The menu item at the top of the opened menu has an angle of 0 degrees. With the sines function we can calculate the shift of the menu item on the y-axis. The sines of 0 degrees is -1. The negative value works well for us as we need to position the menu item above its parent, in HTML this requires a negative top value. Of course -1 is too little a shift, we need to multiply it with the menu radius to get the proper value of -70.

If you have been paying attention you know the value of -70 isn't the correct value for the top position of the menu item. We've just calculated the center coordinate for the menu item, not the top value for the HTML element. To get the top position of the HTML element we need to place it half its height higher. Our menu items are 50px heigh, to get the center of the menu item at -70px we need to place the menu item another 25px away from the parent element. In our case the top value for the menu item at angle 0 degrees is -95px.

The horizontal position

Where we need the sines function for the vertical position we need the cosines for the horizontal position. If we take again the menu item at the top of the opened menu we know the angle is 0 degrees. The cosines value of 0 is 0, which is what you'd expect for the menu item right at the top. For the horizontal position we also need to multiply the result of cosines with the menu radius but 70 times 0 is still 0.

Again we now just have the center coordinate for the menu item, not the left position of the HTML element. Just like with the vertical position we need to correct the value we have with half the size of the menu item, 25px. For the menu item at the top this gives us a left value of -25px.

Space needed for the menu

When you know the size of the menu items and the radius of the menu when it's opened, it is easy to calculate how much space the menu will take up when it is opened. In our case the menu radius is 70px so the diameter, which is twice the radius, is 140px. Now we need to take into account that the menu items stick out half of their size. This happens at both opposite ends of the circle. We will have to add the height of a menu item to the menu diameter. For our example menu that will be 140px + 50px = 190px.

The data-position attribute explained

Remember when I said the data-position attribute is important? Let me tell you what you can use it for. It will allow you to change the way the menu opens without having to change anything in the mixin. The value 0 will always correspond with the item at the straight at the top and then it is number sequentially clockwise. With the exact same styles as we've created earlier in the section 'Opening up the menu' we can make these menus.

Look ma, no extra styles!

Adding some transition into the mix(in)

What we have now is quite nice but it doesn't yet have the wow factor we're looking for. Let's add some transitions to really make it shine. In order to do this we'll be adding one last parameter to our mixin, the item-delay parameter. The effect I am going for is a fan out effect, each subsequent menu item should take a little longer before its transition starts. Say you want every menu item to wait .1 second longer before the previous one to start. The first item would have a delay of 0 and the eight item, which has index 7, a delay of .7 seconds. The perfect place to add this is in the mixin where we now set the z-index. Let's modify the mixin to look like this:


/*  First we added the fourth parameter to the mixin. It will take the delay specified
    in seconds */
.radial-menu(@items, @item-radius, @menu-radius, @item-delay) {
    @step-in-radians: ((360 / @items) * (pi() / 180));

    .radial-menu-item {
        left: unit((-@item-radius), px);
        position: absolute;
        top: unit((-@item-radius), px);
        visibility: hidden;
    }
    .radial-menu-item[data-index="0"] {
        visibility: visible;
    }

    &.open > .radial-menu-item {
        visibility: visible;
    }

    .radial-menu-items (@index) when (@index > -1) {
        .radial-menu-item[data-index="@{index}"] {
            -moz-transition-delay: unit(round((@item-delay * @index), 2), s);
            -o-transition-delay: unit(round((@item-delay * @index), 2), s);
            -webkit-transition-delay: unit(round((@item-delay * @index), 2), s);
            /*  Here we set the delay for the transition, we round it to two decimals or
                else you get some crazy numbers. The three lines above do the same only
                with the vendor prefixes that you may need. */
            transition-delay: unit(round((@item-delay * @index), 2), s);
            z-index: (100 - @index);
        }

        .active > .radial-menu-item[data-position="@{index}"] {
            @angle : ((@step-in-radians * @index) - (pi()/2));
            left: unit((round((cos(@angle) * @menu-radius), 0) - @item-radius), px);
            top: unit((round((sin(@angle) * @menu-radius), 0) - @item-radius), px);
        }

        .radial-menu-items((@index - 1));
    }
    .radial-menu-items((@items - 1));
}

Adding support for delayed transitions

Now we can call our mixin like this:

@radial-menu(8, 25, 70, 0.05);

And it will output the following CSS for us. I left out the vendor prefixed attributes for brevity.

.radial-menu-item {left:-25px;position:absolute;top:-25px}
.radial-menu-item[data-index="7"] {transition-delay:.35s;z-index:93}
.active>.radial-menu-item[data-position="7"] {left:-74px;top:-74px}
.radial-menu-item[data-index="6"] {transition-delay:.3s;z-index:94}
.active>.radial-menu-item[data-position="6"] {left:-95px;top:-25px}
.radial-menu-item[data-index="5"] {transition-delay:.25s;z-index:95}
.active>.radial-menu-item[data-position="5"] {left:-74px;top:24px}
.radial-menu-item[data-index="4"] {transition-delay:.2s;z-index:96}
.active>.radial-menu-item[data-position="4"] {left:-25px;top:45px}
...

As you may have noticed, the mixin only sets the transition-delay property and nothing else. This means it is up to you to specify in your own CSS what it is you want to be transitioned. For the example below I've added the following (again, the vendor prefixes are left out for brevity):

transform: left 1s linear, top 1s linear, visibility 1s linear;

I've set the transformation duration to 1 second for the demo below, I would advice you to use a much shorter duration, you don't want users to wait for a second each time they want to use the menu.

Now with extra shiny!

Wrapping up

We've created a mixin for a radial menu which gives us total freedom over how the menu opens up without having to alter the mixin. You can even make the menu with less items than the maximum you've created styles for to get some nice effects.

If you have any questions please post them in the comments section below. To get started with your own radial menu you can use the links below to download the finished mixin.