Animated Radial Menu with CSS and Jquery for Blogger New!

Here is the New animated responsive radial navigation menu for blogger created with CSS and Jquery. 

During working on navigation menus for blogger previously we have posted Flat responsive menu. But this time when i start thinking on some more styles I hit upon an Idea of Radial menu.

Now, using radial menu is becoming little trendy as it have some very unique features and pros. Therefore, before we get started first let's take a look at some pros of radial menu. ;=)

Pros of radial menu

Radial menu is now becoming new trend of navigation menus due to its different benefits. The first one is that it is beneficial for both Desktop and mobile users because it can't take to space which disturbs the mobile users. So, by using radial menu you don't need for separate mobile menu or don't need to customize it for mobile users.

Radial menu is interactive and adds interactivity in the website. As it animates beautifully when clicked and fades out the menu in radial style. Lets see how we can add the radial menu in blogger.

To check out the live demo of this menu then goto the below link:

Live Demo

Add it on Blogger

1. Goto Blogger Dashboard >> Template
2. Backup your template
3. Click on Edit HTML
4. Search for the ]]></b:skin> tag and just above it paste the following chunk of code:

 @import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
.pm-radialnev {
  background: auto;
    position:$endside;
  
}

.circular-menu {
  width: 250px;
  height: 250px;
  margin: 0 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.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}
.open.circle {
  opacity: 50;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.circle a {
  text-decoration: none;
  color: #5b97f9;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
}
.circle a:hover {
  color: #34495e;
}
.menu-button {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  text-decoration: none;
  text-align: center;
  color: white;
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  padding: 10px;
  background: #5b97f9;
}
.menu-button:hover {
  background-color: #34495e;
} #pmcredits{display:none;}

• Now goto Layout Tab and add a new gadget HTML/Javascript and paste the below code in it:

 <div class="pm-radialnev">
<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>
</div>
 <div id="pmcredits">         <a href="http://www.pakmax.net/">PakMax</a></div>     <script type='text/javascript'>
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');
}
                                                                                           </script>

Note: Don't forget to replace the # with the URL of your ones. And you can also change the icons of your ones by using font awesome icons.