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.

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:
Add it on Blogger
- Goto Blogger Dashboard >> Template
- Backup your template
- Click on Edit HTML
- 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 :)
Animated Radial Menu with CSS and Jquery for Blogger New!
Reviewed by Maher Afrasiab
on
2:04:00 pm
Rating:

Thank you for your awesome post! I now got an idea how to improve my css menus. I only used Dreamweaver and online generators like http://www.generatecss.com/advanced/menus/ in developing menus. Nice post!
ReplyDeleteHi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India . or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India
DeleteThanks dear for liking and the tools like dreamweaver are also very useful.
ReplyDeleteStay connected with us for more nice posts
Hey. It doesnt seem to be working on my blog.
ReplyDeleteLink: http://sbfsa.blogspot.in/
Could you take a look and maybe tell me what I might have done wrong? :)
Thank
ReplyDeleteThank
ReplyDeletethanks
ReplyDeleteI got nice blog
ReplyDeletesap partner companies in bangalore
sap implementation companies in bangalore
sap partners in india
aws staffing
jquery interview questions
sql interview questions
Nice blog
ReplyDeleteuipath training in bangalore
angular4 interview questions
python interview questions
artificial intelligence interview questions
python online training
artificial intelligence online training
Excellent blog
ReplyDeletepython interview questions
git interview questions
django interview questions
sap grc interview questions and answers
advanced excel training in bangalore
zend framework interview questions
apache kafka interview questions
uipath training in bangalore
Thank you for sharing this type of interview questions
ReplyDeleteIot Online Training
Itil Interview Questions
Salesforce Interview Questions
Msbi Interview questions
Salesforce Interview Questions
C Interview Questions
aws partners in bangalore
aws partners in india
aws service providers in india
aws service providers
sap partner companies in bangalore
ReplyDeletesap implementation companies in bangalore
sap partners in india
aws staffing
very nice interview questions
ReplyDeletevlsi interview questions extjs interview questions
laravel interview questions
sap bi/bw interview questions
pcb interview questions
unix shell scripting interview questions
Your good knowledge and kindness in playing with all the pieces were
ReplyDeletevery useful. I don’t know what I would have done if I had not
encountered such a step like this.
aws training in bangalore
aws training in chennai