Add Animated Super Menu with Multicolor Effect

Add Animated Super Menu with Multicolor Effect

CSS menu

Earlier I have shared with you many CSS menu to make your template awesome and user friendly. We know there is not any alternative of navigation to make your template user friendly because it helps to find topic under different categories. As a result a visitors can go their desired post easily. From many days I have received email from some of my loyal readers they want the source code of this animated super menu. So due to huge request I have finally going to reveal the source code thus you can add this menu in your blog. It helps to make your blog attractive. This menu works simple but already added hover effect pre category. Whenever your visitors will mouse over then it will change the background color. You can add maximum 8 category with 8 different hover color. This  menu created with pure CSS coding which is fast loading and it won't affect on your browser loading time. You can Install it in 2 methods.

Live Demo

Method 1

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  
Step 3 Now Find this code ]]></b:skin> by Pressing  Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates. 

/*Anim Super Menu by */
BloggerSpice-wrap{margin: 19px 0 0 0
}.ie8 .BloggerSpice-wrap{margin:0}
.BloggerSpice li{
-moz-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
-webkit-transition:background-color 0.4s ease;
-ms-transition:background-color 0.4s ease
.BloggerSpice li:hover{
-moz-transition:background-color 0.1s ease;
-o-transition:background-color 0.1s ease;
-webkit-transition:background-color 0.1s ease;
-ms-transition:background-color 0.1s ease
-moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 6px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;
.BloggerSpice a{
border-top: 0 none;
color: white;
display: block;
font-family: 'Oswald',sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
margin-left: -10px;
overflow: hidden;
padding: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 2;
.nav a:before{display:none
.BloggerSpice a{padding:10px !important
.BloggerSpice span{
.BloggerSpice .BloggerSpice1 a:before{background-position:center -40px
.BloggerSpice .BloggerSpice2 a:before{
background-position:center -80px
.BloggerSpice .BloggerSpice4 a:before{
background-position:center -160px
.BloggerSpice .BloggerSpice3 a:before{
background-position:center -120px
.BloggerSpice .BloggerSpice5 a:before{
background-position:center -200px
.BloggerSpice .BloggerSpice6 a:before
{background-position:center -240px
.BloggerSpice .BloggerSpice8 a:before
{background-position:center -280px
.home .BloggerSpice .BloggerSpice7 a,.single-post .BloggerSpice.BloggerSpice7 a,.BS .BloggerSpice .BloggerSpice1 a,.BS2  .BloggerSpice .BloggerSpice2 a,.BSpage-snippet .BloggerSpice .BloggerSpice2 a,.BS1.BloggerSpice .BloggerSpice3 a,.BS3
.BloggerSpice .BloggerSpice3 a,.BS4 .BloggerSpice .BloggerSpice4 a,.BS5 .BloggerSpice .BloggerSpice4 a,.post-type-archive-screenshot .BloggerSpice .BloggerSpice5 a,.single-screenshot .BloggerSpice .BloggerSpice5 a,.BS6 .BloggerSpice .BloggerSpice6 a,.BS7 .BloggerSpice .BloggerSpice8 a{color:black}
.BloggerSpice li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}.ie8 .BloggerSpice li:before{display:none}.BS1 .BloggerSpice .BloggerSpice3,.BS3 .BloggerSpice .BloggerSpice3,.BloggerSpice .BloggerSpice3:hover{background:#01b0ec}.BS1 .BloggerSpice .BloggerSpice3:before,.BS3 .BloggerSpice .BloggerSpice3:before{background:#0484b0}.home .BloggerSpice .BloggerSpice7,.single-post .BloggerSpice .BloggerSpice7,.BloggerSpice .BloggerSpice7:hover{background:#ef7901}.home .BloggerSpice .BloggerSpice7:before,.single-post .BloggerSpice .BloggerSpice7:before{background:#cf7000}.BS .BloggerSpice .BloggerSpice1,.BloggerSpice .BloggerSpice1:hover{background:#d54421}.BS .BloggerSpice.BloggerSpice1:before{background:#bb2904}.BS2 .BloggerSpice .BloggerSpice2,.BSpage-snippet .BloggerSpice.BloggerSpice2,.BloggerSpice .BloggerSpice2:hover{background:#98bf0d}.BS2  .BloggerSpice .BloggerSpice2:before,.BSpage-snippet .BloggerSpice .BloggerSpice2:before{background:#87a812}.BS4 .BloggerSpice.BloggerSpice4,.BS5 .BloggerSpice .BloggerSpice4,.BloggerSpice .BloggerSpice4:hover{background:#7449f1}.BS4 .BloggerSpice .BloggerSpice4:before,.BS5 .BloggerSpice .BloggerSpice4:before{background:#5531bf}.post-type-archive-screenshot .BloggerSpice .BloggerSpice5,.single-screenshot .BloggerSpice .BloggerSpice5,.BloggerSpice .BloggerSpice5:hover{background:#b147a3}.post-type-archive-screenshot .BloggerSpice .BloggerSpice5:before,.single-screenshot .BloggerSpice .BloggerSpice5:before{background:#922a84}.BS6 .BloggerSpice .BloggerSpice6,.BloggerSpice .BloggerSpice6:hover{background:#f6b402}.BS6 .BloggerSpice.BloggerSpice6:before{background:#d49b00}.BS7 .BloggerSpice .BloggerSpice8,.BloggerSpice .BloggerSpice8:hover{background:#8d8d8d}.BS7 .BloggerSpice .BloggerSpice8:before{background:#5e5e5e}@-webkit-keyframes nav-1{50%{background:#ef7901}}@-moz-keyframes nav-1{50%{background:#ef7901}}.home .BloggerSpice .BloggerSpice7{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1}@-webkit-keyframes nav-2{50%{background:#d54421}}@-moz-keyframes nav-2{50%{background:#d54421}}.home .BloggerSpice .BloggerSpice1{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1}@-webkit-keyframes nav-3{50%{background:#98bf0d}}@-moz-keyframes nav-3{50%{background:#98bf0d}}.home .BloggerSpice .BloggerSpice2{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1}@-webkit-keyframes nav-4{50%{background:#01b0ec}}@-moz-keyframes nav-4{50%{background:#01b0ec}}.home .BloggerSpice .BloggerSpice3{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1}@-webkit-keyframes nav-5{50%{background:#7449f1}}@-moz-keyframes nav-5{50%{background:#7449f1}}.home .BloggerSpice .BloggerSpice4{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1}@-webkit-keyframes nav-6{50%{background:#b147a3}}@-moz-keyframes nav-6{50%{background:#b147a3}}.home .BloggerSpice .BloggerSpice5{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1}@-webkit-keyframes nav-7{50%{background:#f6b402}}@-moz-keyframes nav-7{50%{background:#f6b402}}.home .BloggerSpice .BloggerSpice6{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1}@-webkit-keyframes nav-8{50%{background:#8d8d8d}}@-moz-keyframes nav-8{50%{background:#8d8d8d}}.home .BloggerSpice .BloggerSpice8{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}

Step 5 Now Find <div id='header-wrapper'> by Pressing  Ctrl + F

Step 6 Paste the below code  after/below 

<div id='header-wrapper'>
------Other Code---------
<!--end header-wrapper-->
  >>Paste the below code here<<

<div class='BloggerSpice-wrap'>
        <nav class='BloggerSpice-wrap' id='BloggerSpice-wrap'>
          <ul class='BloggerSpice group'>
            <li class='BloggerSpice1'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                  To Learn
            <li class='BloggerSpice2'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
            <li class='BloggerSpice3'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                  For Blog
            <li class='BloggerSpice4'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
            <li class='BloggerSpice5'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
            <li class='BloggerSpice6'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                  Building Tips
            <li class='BloggerSpice7'>
              <a href='Category URL HERE?max-results=8' target='_blank'>Facebook<span>Tricks</span></a></li>
            <li class='BloggerSpice8'>
              <a href='Category URL HERE?max-results=8' target='_blank'>Templates<span>For Free</span></a></li>
      <div class='clear'/></div>

Step 7  and finally Save the templates. 


  • Change Category URL HERE with your label or category URL
  • Change max-results=8 to set how many post you want to show per label or category

Method 2

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the all code  from Step 4 and Step 6 and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place gadget below header. that's it.

If you feel any problem then feel free to leave a comment below. I will reply you as soon as possible. 
MM Nauman says: 6/23/2013

thanks ........thanks..........for this menu.......i was eagerly waiting for this menu..........and one more thing brother ...see my blog i have placed it down like you but i want it to be fit in full width of my template......and i want the black color like you have around the template.....thanks

Unknown says: 6/23/2013

keren sob, tapi banyak bgt script nya..
Comment back ya..

BloggerSpice says: ADMIN 6/23/2013

bro this is little bit tricky..plz check the code width:12.5%;

and you have to change 12.5% to 12.7% or 12.8% according to your blog wide.

MM Nauman says: 6/24/2013

i have tried this but not working it is coming down please help

BloggerSpice says: ADMIN 6/24/2013

this menu is very sensitive but you can remove or change background color of the menu...


delete this code or change the background color with your own template background..then it won't show extra color.

MM Nauman says: 6/24/2013

Thank you bro but this menu looks great in black color only ....and by the way i want to ask you please don't say no ... I want you to design my blog logo i know you don't have time but please for me give some time...

BloggerSpice says: ADMIN 6/24/2013

bro this is the only one field that I am weak. Even my logo is not beautiful..Recently I am so much busy on designing 2 blogger templates and not getting enough time to make post on my own blog.Its better take help from any graphics designer.

MM Nauman says: 6/25/2013

its ok bro i understand.............and bro please help me ....i want a orange or blue border around my footer ....please help me.....

Anonymous 7/03/2013

I could not put it in the template you made ​​the yellow BS mag
there is a solution?

sorry for bad english this translate

Contact Form


Email *

Message *