Awesome CSS3 animated Menu for blogger Blog

There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.










Want to see demo??Click the link below.

View Demo

• Go to Design->Page Elements [Take Layout in new template]
• Click on Add gadget just below the Header

• Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
• You can change RED highlighted text with your Menu title and GREEN with LINK

Add Elemic Blue Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdROn9X5p0cHeqI9jwT1hgbmCILvhTKlkxv0Jfnyfq9vRdzqBZPKlVwZmxRomeE6eXVhcY-mUhWJ30AhF2Rcfm3RHx3guyFnIhyphenhyphen1LWW8Dbp2znQ1lPpoxpgEkvpyQlmjcSWKLMbKM49-U/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU_deMZlHPR_mA9o9eI4jW6Ivis7IjDlZyTpMLsQvCVlwoeJtq-RjeoDCqwJ7LG20kiqa4giuNPJ4mBd-nGqgsPuRpDg4r5sGM_FVgolNrERLI2F0rF32wMUHJ50VynbDNP_uytBpDcQ/s1600/1x1juice.png" /></a>

<div class="noop-menu-blue">
<ul class="menu">
<li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>

</div>

Add Green Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLvJ1bm3KEaZiOAT7zzYOgOr-026T_8bbLpoT4WL14lr4hA6GwuAKfMI43BIpJ8ORhvCnmlbZFPr5HKTbvRK_9WlY4fhx6a9hfVJX4BCbrujRHOeaUnGK6347CCLsh6NDUj-kXiZsKok/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important;
border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU_deMZlHPR_mA9o9eI4jW6Ivis7IjDlZyTpMLsQvCVlwoeJtq-RjeoDCqwJ7LG20kiqa4giuNPJ4mBd-nGqgsPuRpDg4r5sGM_FVgolNrERLI2F0rF32wMUHJ50VynbDNP_uytBpDcQ/s1600/1x1juice.png" /></a>

<div class="noop-menu-green">
<ul class="menu">
<li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>

</div>

Add Grape Purple Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMpIw_aPvjmZmCvBbmmAgac71JHoYMRtTfObExy1ZjfBWxgow7lN98owDf1vsk1jnTLE27Rxsv_1NafnU3n_nmaaZ66q70rrGF00-yo3T6WUNdRwvmdPJaN1HCaj6yGfp_mgrd5D3PjE/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important;
border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU_deMZlHPR_mA9o9eI4jW6Ivis7IjDlZyTpMLsQvCVlwoeJtq-RjeoDCqwJ7LG20kiqa4giuNPJ4mBd-nGqgsPuRpDg4r5sGM_FVgolNrERLI2F0rF32wMUHJ50VynbDNP_uytBpDcQ/s1600/1x1juice.png" /></a>

<div class="noop-menu-purple">
<ul class="menu">
<li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>

</div>

Add Light-Dark SkyBlue Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hvkz-fOiJsUeHHj5CQahxdE1BWsnaJPZPwZG2lMhpgHCoJfqIucgWPdzxd2ef0l52dFh2B3MkLqGHc8_dFavzw0AOP_HGZMRtj1KAq2DNctwuiOM5AMigV9Cktl_3RSqZn3iimREVgo/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important;
border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU_deMZlHPR_mA9o9eI4jW6Ivis7IjDlZyTpMLsQvCVlwoeJtq-RjeoDCqwJ7LG20kiqa4giuNPJ4mBd-nGqgsPuRpDg4r5sGM_FVgolNrERLI2F0rF32wMUHJ50VynbDNP_uytBpDcQ/s1600/1x1juice.png" /></a>

<div class="noop-menu-skyblue">
<ul class="menu">
<li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>

</div>

Add Tree Brown Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhb4d3eltyHRmsOFRlM45O2Wc7ueStqCSWWZQWjHxOH3LaUYDlm98hQ2-na_A-Tbt68ULm4ZnkhReFXqAY-DJ90uZ0z-wxqH9pzOoPIie9vFAawT0WmcMZRVR8ygowlffF2RwKjtKu3Q/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;
border: 1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU_deMZlHPR_mA9o9eI4jW6Ivis7IjDlZyTpMLsQvCVlwoeJtq-RjeoDCqwJ7LG20kiqa4giuNPJ4mBd-nGqgsPuRpDg4r5sGM_FVgolNrERLI2F0rF32wMUHJ50VynbDNP_uytBpDcQ/s1600/1x1juice.png" /></a>

<div class="noop-menu-brown">
<ul class="menu">
<li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>

</div>

I hope you enjoyed this Menu and also except more from us.

Posted by R2blog. R2blog auto post for blogspot. Download at http://R2blogger.blogspot.com