Here is the New animated responsive radial navigation menu for blogger created with CSS and Jquery.
Goto Blogger Dashboard >> Template
Backup your template
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.
Need Help! Radial Style Menu | Sharing Widget for BloggerHope 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 because 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 (Radial Style Menu | Sharing Widget for Blogger) with your friends, fans and followers on your social media and bookmarking profiles. And you may stay Blessed, happy and sucessful :)
 |
| Radial Style Menu | Sharing Widget for Blogger |
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. ;=)
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 image:
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 image:
Add it on Blogger
Goto Blogger Dashboard >> Template
Backup your template
Click on Edit HTML
Search for the
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.onlinebloggertricks.com/">Pakistani</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.
Need Help! Radial Style Menu | Sharing Widget for BloggerHope 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 because 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 (Radial Style Menu | Sharing Widget for Blogger) with your friends, fans and followers on your social media and bookmarking profiles. And you may stay Blessed, happy and sucessful :)