Home » Blogger Tips , Blogger Trick , Blogger Widgets » Awesome CSS3 animated Menu for blogger Blog

Awesome CSS3 animated Menu for blogger Blog

Written By Unknown on Friday, February 7, 2014 | 1:43 AM

css3 sliding menus 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.

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/AVvXsEgVTBGHx4LAP5i9vfo9Cr8jWL0Zb31kuX5hKHGsdSiaOLYLRp03XxEXmXOTnDBHiOhHBgDYaDgXaRPCV3rGFGlHZMtPofFK_rk-3SQU7zQ915Hi4KcPSACw3yYduBCfOZ_Z7XTV5-SBJxQ/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/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/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

<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/AVvXsEh3TtfZxEAIQ1WlT729qeQx4L0ph7uiXBuHkWFgTI_6061N84KcBd2TluHCpWUBkuYRzfzP4dirMk-A5mNczvQhG3JukLccYEKE-eAAaaF7kUgHeXQTSCm1KQAeEueJbB3rg-Gg3lF5U9Y/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/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/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

<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/AVvXsEiVeyFfLSUj2T-1Yuv0R4V5bS_kRFh_el7B7dcY_mONPenJ1X-ZBMi-i8ZbDO_SW_8LLy7oEPugiX2ObFXeCJcVtq6kzcl9Xf6fhkCVggckZmUmlyI_K29u9QxvM86oFMe3YcBS0il7_Gg/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/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/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

<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/AVvXsEgtMBKMnfY6WWu9FvMQuYXLqO9OdTuE-PD0qgS1ngjmzfEQv5HNovklNnE_y1JpjMWRVtAaG0G8Y4iBwFqdNQiAJqc0KsxhVuugxtt9IHjz6-QnrevzjSllAj6dmDPYoB4u81wM5zhOXlI/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/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/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

<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/AVvXsEgyi6GjUo2GrSazYSHC3q7Fo1O_mn1aJiFzws8dmtdzuEmoVHbRUG4h4d8lyGvv9vv4p2GTQj57zSw6S7eXaRJz2EYsfZVN62c_mb0Oro6baUwYwp9cn3uT9y0ydg1JwuTGI_TYsHKSy-U/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/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/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.