Vertical Navigation Menu With Hover Fader and Animated Effects

Navigation menus are the most attracting part of any blog or website. The more beautifully they looked more people satisfied with you blog/website. I can say that navigation menus put's first impression on your readers and we know that first impression is the last impression. So for your beautiful blog you need a beautiful navigation menu also. So today i am presenting you a UZIE created navigation menu. I have arranged things and make it compatible with blogger. So here is the required procedure to add this beautiful menu in your blog.

Click Here to See Demo Version

Let's see step by step procedure.

Series On Navigation Menu

Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Published)

Vertical Navigation Menu With Hover Fader and Animated Effects (Current)

Animated-Colored CSS Navigation Menu Buttons For Bloggers (Published)

Add Navigation Menu with Animated Hover Effect

1. Go to Blogger account and select your blog.

2. Back up your template and save it somewhere in your computer.

3. Go to Templates==>Edit HTML==> Proceed and search for this Line(For search Press Ctrl+F).

4. Copy the below code and pate it above this line.

5. Now Search for this tag.

Copy the below line and paste it just below the head tag.

6. Now save the template.

7. Now go to Layout==> Add a Gadget==> HTML/Javascript.

Paste the below code in it and save it.

Uize.module ({
  required:[
    'UizeDotCom.Page.Example.library',
    'UizeDotCom.Page.Example',
    'Uize.Widget.HoverFader',
    'Uize.Curve.Rubber',
    'Uize.Fx.xShadows'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = UizeDotCom.Page.Example ();

/*** create the hover fader instance ***/
      page.addChild (
        'hoverFader',
        Uize.Widget.HoverFader,
        {
          nodes:{className:/\bmenuLink\b/},
          defaultStyle:{marginLeft:0,marginTop:0,
        color:'f',borderColor:'#9F9797',
        backgroundColor:'044',
        textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
      },
      hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',
        color:'8',
        backgroundColor:'000',
        textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
      },
      fadeIn:{duration:350},
      fadeOut:{duration:1000}
        }
      );

/*** wire up the page widget ***/
      page.wireUi ();
  }
});

</script>

<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
      <td>
        <div class="menuWorkspace darkInsetBackgroundColor">
    <div class="menuLinkShell" style="left:20px; top:0px;">
      <a href="PAGE URL" class="menuLink" style="
        textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a>
    </div>
<div class="menuLinkShell" style="left:77px; top:93px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Products</a>
    </div>
<div class="menuLinkShell" style="left:176px; top:17px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Services</a>
    </div>
<div class="menuLinkShell" style="left:232px; top:158px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Technology</a>
    </div>
<div class="menuLinkShell" style="left:319px; top:-8px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Solutions</a>
    </div>
<div class="menuLinkShell" style="left:390px; top:73px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">My Account</a>
    </div>
<div class="menuLinkShell" style="left:506px; top:-3px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Store Locator</a>
    </div>
<div class="menuLinkShell" style="left:559px; top:90px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Investors</a>
    </div>
<div class="menuLinkShell" style="left:42px; top:176px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Support</a>
    </div>
<div class="menuLinkShell" style="left:447px; top:176px;">
      <a href="PAGE URL" class="menuLink" style="background:#0;">Contact Us</a>
    </div>
</div>
</td>
      <td id="page_paramsInspector-shell"></td>
    </tr>
</table>

8. Replace YOUR PAGE URL with link to your page or post.

To see your Navigation Menu live click to view your blog. It's an awesome navigation menu.

If you want any customization just change the changer Hover and Default Style in HTML/JavaScript Section.

If you still face any problem do mention in comments. I will appreciate your valueable feedbacks. Have a Nice Day.