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.
I hope you enjoyed this Menu and also except more from us.
Want to see demo??Click the link below.
- 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
<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/AVvXsEhYOtuZhaySN33NotdbbjaJ0n-pQKNuDcKlVy82Tke0Xsvgirm55BcCpLAYfdHPkm9OBSfwC7ta8E0160wxxbAONDHVow7syJiYEEUHe2R7H0QMUkxTb38k-VVQ_pe1o6FzhUcsOiBotLU/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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-blue">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="noop-menu-blue">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Green Menu
<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/AVvXsEirl6Y0nk79Y2L2Odpn7vaUr_0o-FA56yqqQXEyDiHmsBYDdlnV1h-XVaZr0dLf5p67PdEKZxQ5B16P5SQs7iB_C0KGXdK4OMblf-Suwns_0HQUFIjBDw4LKzxMRYJMqKewVySkBieOu9I/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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-green">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-green">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Grape Purple Menu
<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/AVvXsEgzlUxj7U4fWpKUsAF3tA7bjYFAj-FRpediAVaM4EL64aIiczC2j5sVzzDtLwXPgmstDYFePAqfmOnyHOOjZ9u_5TuVhDF5GPR-csYTgRqqSV0uEukgShR-5_RIsHRtCaHttI-BoLCkH_0/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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-purple">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-purple">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Light-Dark SkyBlue Menu
<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/AVvXsEhWEX5YpB51EDJDMKddZHHrkHvTEr1U2PLoB0-PsjOLip7TXEmEuER1Oy5K1SkGSLjAq1sni8bZK9-KPC5Gs97Q5iDg5WW1R59QB1IFpmGfbqk7xSIw0n6mWmTIup1yUf4HlvJ6LYILyLc/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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-skyblue">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-skyblue">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Tree Brown Menu
<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/AVvXsEhZQDc128qwzLeKf4GyhMGQjECa4JCw1mrftk1akjAW-72fKrRILyCLLHpFgGbItqGQyUp_vLLssDv1WBsmlGwBcd2E8CxWB_OwWFIkRL_LpIfOpeZnSnHiVoKbajkBgnT9CXwq5ALcEaY/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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-brown">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
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://fe-blogger.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png" /></a>
<div class="noop-menu-brown">
<ul class="menu">
<li><a href="http://fe-blogger.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://fe-blogger.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://fe-blogger.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.
{ 0 comments... read them below or add one }
Post a Comment