Sunday, September 1, 2013

CSS3 Circular Menu

Creating menu using CSS3 is quite easy and fun. To create a circle for each menu item you need to work with border-radius.  While creating the circular menu I used the "CSS3 Simple Horizontal menu". While doing it removed unnecessary CSS code.
  To create a circle using border-radius property make sure that values for height, width and border-radius are same.
For example if the height and width of the menu is 90px, then the border-radius should be kept to 90px as well.
I have created the code using the jsfiddle. If you want to change it according to your need "Click here".

Note: The border-radius property is supported in : IE9+, FF 4+ , Opera 10.5 +, Safari 5+ and chrome.

For older version of FF and Safari -moz and -webkit prefix are used.

HTML



CSS


After completing the code menu would look like as follow:

Result