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.

Hammer effect drop down menu bar widget for blogger
CSS Gradient navigation menu bar widget for blogger 
Attitude navigation menu bar widget for blogger 
Dashed Rich Navigation menu bar widget for blogger 
Professional Blue Navigation menu bar widget for blogger 
Fashion Style Navigation menu bar widget for blogger 
Cute Yellow Navigation menu bar widget for blogger 
King of Black Navigation Menu Bar Widget 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.

<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>

<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>

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);
}