Vibrating Animated Horizontal Navigation Menu Widget For Blogger

Vibrating animated horizontal navigation menu bar widget for blogger. Created in html and css without any javascript and loads faster.

Vibrating Animated Horizontal Navigation Menu Widget For Blogger
Vibrating Animated Horizontal Navigation Menu Widget For Blogger

One of the best and attractive animated navigation menu bar widget for blogger. Since today we have shared many navigation menu bar widget for blogger that were vertical but this time we are gong to give you a horizontal navigation menu. It has some fantastic animation.

When you hover your mouse over the icon or image than it gives you a feel of vibration and slides towards right side. That is why we have given a name of vibrating horizontal navigation menu.

In our last post we shared Solid responsive navigation drop down  menu and animated call to action navigation menu for which we got nice feedback. So this time we are coming up with a horizontal navigation menu.

More Navigation Menu For Blogger



Below is the combined code of html and css. You have to copy the code and paste the code where you want this widget to appear. If you want to do it a different way that we will also share separate html and css code for you. So you can install this widget different way.


How to install this blogger widget


  • Login to blogger.
  • Go to layout.
  • Choose to add a gadget.
  • Choose html/javascript.
  • Copy the below code.
  • Paste it and you are done.



Complete html and css code



<style type="text/css">
ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 300px;
}
@-moz-keyframes expand {
0% {
width: 5px;
padding-left: 0px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-moz-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;}
50% {
width: 200px;}
70% {
width: 170px;}
80% {
width: 200px;}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;}
}
@-webkit-keyframes expand {
0% {
width: 5px;
padding-left: 0px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;}
50% {
width: 200px;}
70% {
width: 170px;}
80% {
width: 200px;}
90% {
width: 190px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-moz-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-moz-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;}
50% {
width: 5px;}
70% {
width: 35px;}
80% {
width: 5px;}
90% {
width: 15px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-webkit-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;}
50% {
width: 5px;}
70% {
width: 35px;}
80% {
width: 5px;}
90% {
width: 15px;}
100% {
width: 5px;
padding-left: 0px;}
}
ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #1F7D8F;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.hara {
background: rgb(107,186,112);
}
ul.nice-menu li.neela {
background: rgb(78,92,127);
}
ul.nice-menu li.or {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.re {
background: rgb(178,59,30);}
ul.nice-menu li.chamak {
background: rgb(241,249,210);
}
</style>
<div class = "bigdaddy" style = "">
<ul class = "bigdaddy-bounce">
<li class = "or"><a href = "">Home</a></li>
<li class = "re"><a href = "">About</a></li>
<li class = "hara"><a href = "">Blogger</a></li>
<li class = "neela"><a href = "">SEO</a></li>
<li class = "chamak"><a href = "">Contact Us</a></li>
<li class = "re"><a href = "">Wordpress</a></li>
</ul>
</div>



Customization

Below I am providing separate html and css code which you can use for customization.

METHOD 2 FOR INSTALLATION : -


If you want to html and css code separately. Then follow this method. It will also work for you.


  • Login to blogger.
  • Go to layout.
  • Click to add a gadget.
  • Choose html/javascript.
  • Copy the below html code.
  • Paste it.



HTML CODE



<div class = "bigdaddy" style = "">
<ul class = "bigdaddy-bounce">
<li class = "or"><a href = "">Home</a></li>
<li class = "re"><a href = "">About</a></li>
<li class = "hara"><a href = "">Blogger</a></li>
<li class = "neela"><a href = "">SEO</a></li>
<li class = "chamak"><a href = "">Contact Us</a></li>
<li class = "re"><a href = "">Wordpress</a></li>
</ul>
</div>



Now time to add css code to your template.


  • Now copy the below css code.
  • Go to template.
  • Click on edit html.
  • And search for ]]></b:skin>
  • Now copy the below css code above ]]></b:skin>.
  • Save and you are done.



CSS Code



ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 300px;
}
@-moz-keyframes expand {
0% {
width: 5px;
padding-left: 0px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-moz-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;}
50% {
width: 200px;}
70% {
width: 170px;}
80% {
width: 200px;}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;}
}
@-webkit-keyframes expand {
0% {
width: 5px;
padding-left: 0px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;}
50% {
width: 200px;}
70% {
width: 170px;}
80% {
width: 200px;}
90% {
width: 190px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-moz-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-moz-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;}
50% {
width: 5px;}
70% {
width: 35px;}
80% {
width: 5px;}
90% {
width: 15px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-webkit-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;}
50% {
width: 5px;}
70% {
width: 35px;}
80% {
width: 5px;}
90% {
width: 15px;}
100% {
width: 5px;
padding-left: 0px;}
}
ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #1F7D8F;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.hara {
background: rgb(107,186,112);
}
ul.nice-menu li.neela {
background: rgb(78,92,127);
}
ul.nice-menu li.or {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.re {
background: rgb(178,59,30);}
ul.nice-menu li.chamak {
background: rgb(241,249,210);
}


Customization

You can make changes in HTML code. Simply change the names like home, Blogger, Wordpress with your names and save it and you are done.

So this was the vibrating animated horizontal navigation menu bar widget for blogger. Please like it and share it and give us your feedback in the comments.
Next Post Previous Post