Building a Circular Navigation with CSS Transforms

A tutorial on how to create a circular navigation using CSS transforms.

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.

<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 deg, where 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.

View the interactive demo

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.

.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.

.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.

.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.

.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);
}
.csstransforms .cn-wrapper li:not(.active) a:focus {
  position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
}

We’ll provide a simple and basic fallback for browsers that do not support CSS transforms.

.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.

@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:

cn-demo2-step1

As you see the navigation is already starting to look different; we’re more than halfway through.
We still have one important thing to do. At the current state of this style, the clickable area of the anchors is still bigger than what we want. What we do want, is that only the colored part of the navigation shown in the image be clickable/hoverable. The image below shows the extra clickable area of the anchors.

cn-demo2-cover

When you hover over the red area shown in the image, which is the lower part of the anchor tags, the hover state of the anchors is fired, which is the normal thing to happen, but because we want it to seem like the anchors are only the purple area, we need to prevent mouse events from firing on the lower part of the anchors. For this we’re going to use a “cover” which we’ll place over at the center of the navigation container, which will be a circular shape covering the lower parts of the anchors, and therefore blocking the mouse events on these parts. We’ll be using a pseudo-element for this to avoid adding additional empty tags to our markup.

So, applying these three steps to our CSS, and changing the overall styles (colors and size) of the navigation and navigation items to look like the preview image above, we end up with the following CSS:

.csstransforms .cn-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  margin-top: -13em;
  margin-left: -13.5em;
  width: 27em;
  height: 27em;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transition: all .3s ease 0.3s;
  transform: scale(0.1);
  pointer-events: none;
  overflow: hidden; 
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
  color: transparent;
  content:".";
  display:block;
  font-size:2em;
  width:6.2em;
  height:6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top:50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index:10;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin-top: -1.3em;
  margin-left: -10em;
  width: 10em;
  height: 10em;
  font-size: 1.5em;
  transition: all .3s ease;
  transform: rotate(76deg) skew(60deg);
  transform-origin: 100% 100%;
  pointer-events: none;
}

.csstransforms .cn-wrapper li a {
  position: absolute;
  position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
  right: -7.25em;
  bottom: -7.25em;
  display: block;
  width: 14.5em;
  height: 14.5em;
  border-radius: 50%;
  background: #429a67;
  background: radial-gradient(transparent 35%, #429a67 35%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 2;
  transition: all .3s ease;
  transform: skew(-60deg) rotate(-75deg) scale(1);
  pointer-events: auto;
}

.csstransforms .cn-wrapper li a span {
  position: relative;
  top: 1.8em;
  display: block;
  font-size: .5em;
  font-weight: 700;
  text-transform: uppercase;
}

.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
	background: radial-gradient(transparent 35%, #449e6a 35%);
}

We want the navigation items in the second demo to spread out in a fan-like effect when the navigation is opened.
To achieve this effect, we have positioning the items in the same place and with the same rotation/skew of rotate(76deg) skew(60deg).

Using transition delays we allow the items to spread out after we scale the wrapper up. When the navigation gets closed, we’ll wait for the items to move back in, before we scale the wrapper down again.

When the open button is clicked we’re going to spread the items out by rotating each of them to their final position on the circle.

.csstransforms .opened-nav {
  border-radius: 50%;
  opacity: 1;
  transition: all .3s ease;
  transform: scale(1);
  pointer-events: auto;
}

.csstransforms .opened-nav li {
  transition: all .3s ease .3s;
}

.csstransforms .opened-nav li:first-child {
  transform: rotate(-20deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(2) {
  transform: rotate(12deg) skew(60deg);
}

.csstransforms .opened-nav  li:nth-child(3) {
  transform: rotate(44deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(4) {
  transform: rotate(76deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(5) {
  transform: rotate(108deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(6) {
  transform: rotate(140deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(7) {
  transform: rotate(172deg) skew(60deg);
}

Of course, we’ll also provide a basic fallback for non-supporting browsers.

.no-csstransforms .cn-wrapper{
  margin:10em auto;
  overflow:hidden;
  text-align:center;
  padding:1em;
}
.no-csstransforms .cn-wrapper ul{
  display:inline-block;
}
.no-csstransforms li{
  font-size:1em;
  width:5em;
  height:5em;
  float:left;
  line-height:5em;
  text-align:center;
  background-color: #fff;
}
.no-csstransforms li a{
  display:block;
  height:100%;
  width:100%;
  text-decoration: none;
  color: inherit;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus{
  background-color: #f8f8f8;
}
.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}
.no-csstransforms .cn-button{
  display:none;
}

And the navigation is also going to be responsive, so we’ll shrink it on smaller screens. Here are the responsive styles for both circular and simple styles.

@media only screen and (max-width: 620px) {
  .no-csstransforms li{
    width:4em;
    height:4em;
    line-height:4em;
  }
}
@media only screen and (max-width: 500px) {
  .no-ccstransforms .cn-wrapper{
    padding:.5em;
  }
  .no-csstransforms .cn-wrapper li{
    font-size:.9em;
    width:4em;
    height:4em;
    line-height:4em;
  }
}
@media only screen and (max-width: 480px) {
  .csstransforms .cn-wrapper{
    font-size: .68em;
  }
  .cn-button{
    font-size:1em;
  }
}
@media only screen and (max-width:420px){
  .no-csstransforms .cn-wrapper li{
    width:100%;
    height:3em;
    line-height:3em;
  }
}

And that’s pretty much all the CSS you need to create these styles!

The JavaScript

We won’t be using any JavaScript framework for these demos. I will be using David De Sandro’s Classie.js to add and remove classes. And finally for browsers that don’t support the addEventListener and removeEventListener we’ll use Jonathan Neal’s EventListener polyfill.

We’ll add an event handler to the button in each of the two demos. Clicking the button and/or focusing it will trigger opening/closing of the navigation.
Also, for the first demo, clicking anywhere outside the navigation when it’s open will also close it.
Let’s start with the JavaScript for the first demo.

(function(){

  var button = document.getElementById('cn-button'),
    wrapper = document.getElementById('cn-wrapper'),
    overlay = document.getElementById('cn-overlay');

  //open and close menu when the button is clicked
  var open = false;
  button.addEventListener('click', handler, false);
  button.addEventListener('focus', handler, false);
  wrapper.addEventListener('click', cnhandle, false);

  function cnhandle(e){
    e.stopPropagation();
  }

  function handler(e){
    if (!e) var e = window.event;
    e.stopPropagation();//so that it doesn't trigger click event on document

      if(!open){
        openNav();
      }
    else{
        closeNav();
      }
  }
  function openNav(){
    open = true;
      button.innerHTML = "-";
      classie.add(overlay, 'on-overlay');
      classie.add(wrapper, 'opened-nav');
  }
  function closeNav(){
    open = false;
    button.innerHTML = "+";
    classie.remove(overlay, 'on-overlay');
    classie.remove(wrapper, 'opened-nav');
  }
  document.addEventListener('click', closeNav);

})();

The JavaScript for the second demo is similar to the previous one, except that we customize it for this case:

(function(){

  var button = document.getElementById('cn-button'),
    wrapper = document.getElementById('cn-wrapper');

    //open and close menu when the button is clicked
  var open = false;
  button.addEventListener('click', handler, false);
  button.addEventListener('focus', handler, false);

  function handler(){
    if(!open){
      this.innerHTML = "Close";
      classie.add(wrapper, 'opened-nav');
    }
    else{
      this.innerHTML = "Menu";
    classie.remove(wrapper, 'opened-nav');
    }
    open = !open;
  }
  function closeWrapper(){
    classie.remove(wrapper, 'opened-nav');
  }

})();

And that’s pretty much it! I hope you liked this tutorial and found it useful!

Update: The demo has been updated based on a few of the reported bugs in the comments section below. The menu should now be fully functional in Chrome/Webkit.

Tagged with:

Sara Soueidan

Sara is a Lebanese freelance front-end web developer and speaker, specializing in semantic markup, CSS, SVG, and progressively enhanced, responsive design, with a strong focus on accessibility and performance. She is the author of our CSS Reference and has co-authored the Smashing Book 5, a book that covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. Sara also runs in-house workshops about SVG and about building accessible UI patterns. Her client list includes Netflix, The Royal Schiphol Group @ Amsterdam Airport, TELUS Digital, and more. Learn more about some of her work or hire her.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 158

Comments are closed.
  1. I love your own blog but now you also write for Codrops! AWESOME! And your first post? Brilliant. And thanks a lot for the Interactive Demo! Very interesting.

    I’m excited whats coming next by you 🙂

  2. This is really really nice work! Would there be away to execute this as mobile navigation? The menu would only accessed by pressing down and holding, and while still held down sliding your thumb to access a link? When the user releases the menu closes.

  3. Like I’ve said before, thank you for taking the time to teach others. You do great, inspiring work!

  4. Awesome article, but just one tip: You don’t need to make reference to the elements in the DOM with document.getElementById, once you assigned the id attribute to the element in your html file, is already avaliable to you referencing the Id directly.

  5. AMAZING menu. Super creative and just genius.!

    Question though. For those of us that aren’t so good with the code, how difficult would it be to have this load on the left side of the screen instead of the bottom?

    • You can do that by rotating the whole thing by 90 degrees, and positioning it with the left property instead of the bottom.

    • Thanks Sara for the great tutorial.
      I tried to have this load on the left side of the screen by rotating the whole thing by 90 degrees, and positioning it with the left property instead of the bottom.

      The circular navigation is on the left, but the icons disappeared as shown below:
      http://jsfiddle.net/rageprof/9p78rtv0/1/

      Any suggestion to bring those icons back? Thanks again!

  6. Great article. Would love to see this expanded to show how you might rotate or spin the navigation with swiping for touch devices.

  7. So much inspiration on this website, love browsing and seeing whats new in the world. Tutorials are well described. I love this effect, thinking of using it in my GIS system to make the navigation look a bit nicer, thank the standard drupal stuff.

  8. Hi,

    Thank’s , It’s beuty , nice and fuel off idea 😉 .

    Nice Work 😉 .

    Keep Going !!!

  9. Awesome!! I like this effect so much, I think these CSS3 effect are useful for responsive website code! 🙂

  10. In the css part of this tutorial you have use this code (without which it is not displaying properly):
    *{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    }
    Now since you have used the universal selector *, my other css designs are getting affected. Is there a way out to apply this property only to the circular navigation and not the whole page as a whole. Help Plz.
    Thank you.

    • Instead of “*” put the top-most name of the container with your navigation.
      I.e. if your navigation is in , change * to nav#navigation

    • Rewriting the previous reply because I forgot to add the code tag:

      Instead of “*” put the top-most name of the container with your navigation.
      I.e. if your navigation is inside <nav id="navigation"> , change * to nav#navigation

    • Instead of applying these rules to the universal selector you can apply them to the cn-wrapper.

    • I tried everything, but nothing worked for me. Using respective selector didnt help. Without * selector the rules are not working. But I cant use * since its affecting other rules.

    • Add “box-sizing” to “.csstransforms .cn-wrapper li a”, “margin: 0” to “.cn-wrapper ul”, “padding: 0” to “.cn-button”, “list-style: none” to “.cn-wrapper ul” and “position: relative” to “.cn-wrapper ul”.

  11. Thanks for the great menu. Will definitely use it somewhere at some point.
    Just a heads up – the “Interactive” area of the Demo isn’t working for me in FF22 an Chrome28

  12. Scratch my last comment. I failed to realize it was an interactive demo of building the menu.. I expected a working one with some real content. Sorry ’bout that.

  13. Great “Pie control”!
    I have a question.
    Is it possible to click the menu link, close the circular navigation?
    Thanks.

  14. I’m toying with the degrees to see if I can make it shaped like a record. I’ve modified the degrees on demo2 to make a full circle, but there’s a small gap between the 5th and 6th link. Is there a way to increase the button sizes to fill a complete circle?

  15. Hi ,
    i have a problem and its when i click on the icon to show the menus , the menu is showing for one second it disappear !!
    i have no idea what is going on and where i do wrong .
    i checked everything and its fine . just looks like the version i’ downloaded from here .

  16. Very sweet nav idea. I don’t think there is a demo/tutorial on this site that I haven’t liked. 🙂

  17. WOW, very nice! I’m not that well versed in web design and so I rely on people like you and your examples to learn from. Thanks!

    I altered your code to create this site http://www.cawws.org/index.html . Works great in everything but Samsung and Motorola devices despite using different browsers within those device.

    Anyone know why this would be? Work around?

    Thanks, greatly appreciated,

    MRT

  18. I can not get this demo’s nav umbrella, as it is posted in demo 1 and demo 2, to open correctly on some android mobile devices esp. Samsung ones. I have even gone to Best Buy and tried the actual devices (rather than emulators online) and tried different browser (chrome, dolphin, etc.) within the devices without luck, so the problem would seem device specific? This is beyond my understanding. Any ideas about how to fix this or what is the cause? Anyone? I would love to use this at my site.

    Thanks

  19. I love it! We can use it on mobile devices as an alternative to standard navigation. Just one quick “on touchstart” and touchend event listener and we get perfect pie controls 😀
    Older Androids might lack support for someproperties. But still, your piece of work is a step-forward!

  20. Es increible lo que se puede hacer con css3 habia leido sobre eso pero es mejor verlo en la practica para entenderlo. Mucho trabajo y nunca hubiese imaginado como hacer la parte en javascript, no conocia sobre esas funciones

  21. Hello, great work your Circular Navigation, I inserted the component 2! But I have a problem and I need help, why? I change the position to the left border of the page. Now I would love to change the link-texts, each by itself to another deg (°). I have tried it with -webkit-transform: rotate(-180°) – it worked well, but I need to set each text-link to it’s own deg(°). Anybody here who knows what to do for that? Thanks in advance, Michael

  22. Holy hubcaps that’s awesome!!! Wow! To even think of half the techniques used here is something else. I have CSS envy…

  23. Oh my god,

    just found your website and don’t know a word to describe it, maybe: UNBELIEVABLE and PURE AWESOMENESS???

    Thank you so much for your tutorials!

    Greets,

    m00

  24. Hi,
    I have installed this menu, but demo 2 is not working in Internet explorer,
    Menu in the middle is not shown.
    Help me out

    Regards,
    Abhishek