Home » Blogger Tutorials, Tricks and Hacks » Add A Vertical Navigation Menu With Animated HoverFader Effect

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add A Vertical Navigation Menu With Animated HoverFader Effect

Add A Vertical Navigation Menu With Animated HoverFader Effect

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,451 views

If you want to install a Blogger navigation menu that’s different and refreshing to look at, then you’re in luck! Today I’m featuring a tutorial by Safeer Ahmed on HowDoBlog.com that will teach you how to do exactly just that.

This navigation menu features a hover and fader effect to it, which has that Matrix movie feel to it. You can check out a demo version of the menu HERE.

If you would like to try it out on your own site, read and follow the instructions below:

  • Head over to the “Template” section over at the “Design” page of your Blogger dashboard.
  • Click on “Edit HTML” and then “Proceed”.
  • By pressing “Ctrl+F”, look for ]]></b:skin>.
  • Copy/paste the code below right before it:
#page_paramsInspector-shell .tabShell {
 width:480px;
 }
#page_paramsInspector-shell .tabShell {
 width:480px;
 }
 #page_paramsInspector_settings {
 width:400px;
 height:286px;
 font-size:12px;
 }
 #page_paramsInspector_preview {
 width:466px;
 }
 .menuLinks {
 position:relative;
 width:200px;
 background:#364040;
 padding:10px;
 padding-bottom:5px;
 }
 .menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
 display:block;
 font-size:12px;
 text-transform:uppercase;
 font-weight:bold;
 text-align:center;
 letter-spacing:4px;
 color:#bbb;
 background:#000;
 border:2px solid #000;
 width:182px;
 padding:5px 7px;
 margin-bottom:5px;
 text-decoration:none;
 overflow:hidden;
 }     
  • Now look for the <head> tag and copy/paste the following code below right after it:
<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/>     
  • Save your template.
  • Now go to the “Layout” section of Blogger’s “Design” page
  • Click on “Add a Gadget” and then scroll down to select “HTML/JavaScript
  • Copy/paste the code below:
<script type="text/javascript">

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>
 <div style="left:20px; top:0px;">
 <a href=" YOUR_PAGE_URL " 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 style="left:77px; top:93px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Products</a>
 </div>
 <div style="left:176px; top:17px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Services</a>
 </div>
 <div style="left:232px; top:158px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Technology</a>
 </div>
 <div style="left:319px; top:-8px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Solutions</a>
 </div>
 <div style="left:390px; top:73px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">My Account</a>
 </div>
 <div style="left:506px; top:-3px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Store Locator</a>
 </div>
 <div style="left:559px; top:90px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Investors</a>
 </div>
 <div style="left:42px; top:176px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Support</a>
 </div>
 <div style="left:447px; top:176px;">
 <a href="YOUR_PAGE_URL" style="background:#0;">Contact Us</a>
 </div>
 </div>
 </td>
 <td id="page_paramsInspector-shell"></td>
 </tr>
 </table>     
  • Replace YOUR_PAGE_URL with your own actual URLs.
  • Save.

Congratulations! You’re done. View your blog and see how it looks like on your site. Feel free to share what you think about the menu to Safeer by clicking on his name above. Cheers, everyone!

 

Liked It ? Please Share

Comments

6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Blog Bintaro says:

    Why it does not work.

  2. Safeer Ahmed says:

    Thanks for sharing my post admin with reference,.
    @blog bintaro and @ Huy

    Its work fine on all types of blogs. I think you have missed to add javascript file.
    read on my blog hope it will work for you.
    http://www.howdoblog.com/2012/07/Navigation-menu-hover-fader-animated-effects.html
    Thanks
    Safeer Ahmed

  3. Gesit says:

    not working ?

  4. Rebbeca says:

    This article arrived in a well timed passion!
    I can’t believe it. I was looking online for Email Templates. You did a very good job and yes i completely agree that any template could make or break your online business. Good Job!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here