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.

Credits

You are most welcome to share this widget with your own readers but you have to give credits to PakMax blog by attaching a link back to this post. All rights are strictly reserved!

Need Help!

Hope that you easily understand the process of installation and during installation not found any problem. But if you got any problem during installing it on your site or find any bug in the widget then don't worry becuase I am here to solve your problems simply comment below and I will help you as early as possible :)

Well, hope you like this new radial navigation menu widget for blogger and find it awesome for your blog. I hope that this new widget will new life to your blog and increase your site's uniqueness :).

Don't forget to share this with your friends, fans and followers on your social media and bookmarking profiles. And you may stay Blessed, happy and sucessful :)