Add Animated Super Menu with Multicolor Effect

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. 

<style>
/*Anim Super Menu by www.bloggerspice.com */
.BloggerSpice{list-style:none}
BloggerSpice-wrap{margin: 19px 0 0 0
}.ie8 .BloggerSpice-wrap{margin:0}
.BloggerSpice li{
background:#000000;
float:left;
width:12.5%;
position:relative;
-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{
background:rgba(0,0,0,0.4);
-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;
}
.ie8
.nav a:before{display:none
}.ie8
.BloggerSpice a{padding:10px !important
}
.BloggerSpice span{
display:block;
text-align:center;
font-size:9px;
white-space:nowrap
}
.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}
</style>

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'>
                Tips
                <span>
                  To Learn
                </span>
              </a>
            </li>
            <li class='BloggerSpice2'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                Tricks
                <span>
                  Apply
                </span>
              </a>
            </li>
            <li class='BloggerSpice3'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                Widgets
                <span>
                  For Blog
                </span>
              </a>
            </li>
            <li class='BloggerSpice4'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                SEO
                <span>
                  Tips
                </span>
              </a>
            </li>
            <li class='BloggerSpice5'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                Make
                <span>
                  Money
                </span>
              </a>
            </li>
            <li class='BloggerSpice6'>
              <a href='Category URL HERE?max-results=8' target='_blank'>
                Backlinks
                <span>
                  Building Tips
                </span>
              </a>
            </li>
            <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>
          </ul>
        </nav>
      </div>
      <div class='clear'/></div>

Step 7  and finally Save the templates. 

Customization 

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