Hello readers, We all have seen various animated Navigation Menus but in my blog I have tried to create An Animated Radial Navigation Menu using JavaScript and CSS3 property.

In my blog , I have made a circular menu list items which gets displayed over the screen whenever we click over the toggle button which is basically hiding the listed items .

Now looking over to the HTML code given below , I have used HTML5 nav element i.e nav element with nested anchor tag containing the links of the fonts that are used in the example taken from the font awesome.

Inside the div with the class name as circular-menu , I have also created a menu button which looks like a toggle button, which with the help of JavaScript code whenever we click over it the list of items will appear in circular motion or radial around the toggle button.

Below is the HTML code for the above blog :-

<nav
class="circular-menu">


  <div
class="circle">

    <a
href="" class="fa fa-home fa-2x"></a>

    <a
href="" class="fa fa-facebook fa-2x"></a>

    <a
href="" class="fa fa-twitter fa-2x"></a>

    <a
href="" class="fa fa-linkedin fa-2x"></a>

    <a
href="" class="fa fa-github fa-2x"></a>

    <a
href="" class="fa fa-rss fa-2x"></a>

    <a
href="" class="fa fa-pinterest fa-2x"></a>

    <a
href="" class="fa fa-asterisk fa-2x"></a>

  </div>


  <a
href="" class="menu-button fa fa-bars fa-2x"></a>


</nav>

Now moving over to the CSS code , to the “circular-menu” class I have define the width and the height as required . I have also sets its position to relative so that I can position other items also the position to relative.

As the menu items will hide by default . So for displaying them out with a fade and zoom effect I need to set its opacity to 0 and also set the scale to 0 with the transform CSS3 property.

To the circle class I have provided the transform and transition property.

For making the display of the menu items seems to be faded and zoom ,for that I have to define an open class for creating the radial menu.

To the open class nested in the circle class , I have applied the opacity to 1 and transform scale to 1.

To the a elements that are also need to be styled and make their position to absolute .

Now the toggle button also need to be placed at the right position , so I have styled it and provided a right position to it at the center.

Below is the CSS code for the above example :-

body {

background: #39D;

}

.circular-menu {

width: 250px;

height: 250px;

margin: 127px auto;

position: relative;

}

.circle {

width: 250px;

height: 250px;

opacity: 0;


-webkit-transform: scale(0);

-moz-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.4s ease-out;

-moz-transition: all 0.4s ease-out;

transition: all 0.4s ease-out;

}

.open.circle {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

transform: scale(1);

}

.circle a {

text-decoration: none;

color: white;

display: block;

height: 40px;

width: 40px;

line-height: 40px;

margin-left: -20px;

margin-top: -20px;

position: absolute;

text-align: center;

}

.circle a:hover {

color: #eef;

}

.menu-button {

position: absolute;

top: calc(50% - 30px);

left: calc(50% - 30px);

text-decoration: none;

text-align: center;

color: #444;

border-radius: 50%;

display: block;

height: 40px;

width: 40px;

line-height: 40px;

padding: 10px;

background: #dde;

}

.menu-button:hover {

background-color: #eef;

}

Now moving to the JavaScript applied to the code for the radial menu to display in a circular motion .

Below is the JavaScript code :-

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {

items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

}

document.querySelector('.menu-button').onclick = function(e) {

e.preventDefault(); document.querySelector('.circle').classList.toggle('open');

}

Now for showing and hiding the menu items with the help of the toggle button the below code is applied:-

document.querySelector('.menu-button').onclick
= function(e) {

   e.preventDefault();
document.querySelector('.circle').classList.toggle('open');

}

The  query selector  will select the element with the menu-button and will invoke the click button.

Once when we click , I will take the element to the circle class and will add the open class displaying the menu items.

Now the last step i.e for positioning the items , the below code is applied :-

var items
= document.querySelectorAll('.circle a');


for(var i
= 0, l = items.length; i < l; i++) {

  items[i].style.left
= (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) +
"%";

  items[i].style.top
= (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) +
"%";

}

The above code will select all the links within the elements in the circle class .

I have also used a iterator  (i) basically for calculating the CSS top and left property .

With the help of some maths code, I was able to provide the position to the menu items.

Conclusion:-

Hence, An animated radial navigation menu is created using CSS and JavaScript which was easy to learn and understand.

Note:-The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.