Add Vertical Navigation Menu In Blog with Hover Stretching Effects

In previous Article I told you about Vertical Navigation Menu with hover fader and animated effects. In this Article i will tell you about another type of navigation menu having different colors and stretching effects. Its look very beautiful when you slide your mouse pointer on them. Add this into your blog i will ensure you it will give a very good impression to your visitors. This vertical menu is also designed by Uize and i make possible to add it in blogger blogs. Now we are going to add it in blogger blogs.

Series on Navigation Menus

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

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

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

Let's see how to add this.

Adding Vertical Navigation Menu with Hover and Stretching Effects

1. Go to your Blogger account. Backup your template.

2. Go to Templates==> Edit HTML==> Proceed.

3. Search for below code by pressing Ctrl+F.

4. Copy below code and paste it just above ]]>.

5. Click on save template.

6. Now go to Layout==> Add a Gadget==> HTML/Javascript and copy paste the below code.

Uize.module ({
  required:[
    'UizeDotCom.Page.Example.library',
    'UizeDotCom.Page.Example',

// these curve modules are only needed for the additional effects previews
    'Uize.Curve',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod'
  ],
  builder:function () {
    (window.page = UizeDotCom.Page.Example ({evaluator:function (code) {eval (code)}})).wireUi ();
  }
});

</script>

<div style="width:700px; margin:auto;">
    <div class="menus">
      <div class="menu">
        <a href="URL of Page" class="menuLink" style="background:#A4059F;"><div class="highlight">
</div>
About Us</a>
        <a href="URL of Page" class="menuLink" style="background:#05A487;"><div class="highlight">
</div>
Products</a>
        <a href="URL of Page" class="menuLink" style="background:#eb3;"><div class="highlight">
</div>
Services</a>
        <a href="URL of Page" class="menuLink" style="background:#9c7;"><div class="highlight">
</div>
Technology</a>
        <a href="URL of Page" class="menuLink" style="background:#f96;"><div class="highlight">
</div>
Solutions</a>
        <a href="URL of Page" class="menuLink" style="background:#c6f;"><div class="highlight">
</div>
My Account</a>
        <a href="URL of Page" class="menuLink" style="background:#86f;"><div class="highlight">
</div>
Store Locator</a>
        <a href="URL of Page" class="menuLink" style="background:#f4c;"><div class="highlight">
</div>
Investors</a>
        <a href="URL of Page" class="menuLink" style="background:#f88;"><div class="highlight">
</div>
Support</a>
        <a href="URL of Page" class="menuLink" style="background:#79f;"><div class="highlight">
</div>
Contact Us</a>
      </div>
<script type="text/javascript">
        window.$page_menuHoverFader = {
          widgetClass:'Uize.Widget.HoverFader',
          nodes:{className:/\bmenuLink\b/},
          defaultStyle:{width:150,letterSpacing:2,borderRightColor:'0'},
          hoverStyle:{width:240,letterSpacing:9,borderRightColor:'f'}
};
      </script></div>
</div>

7. Replace "URL of Page" with your URL and also you can change the name by replacing each of them.

8. You can also change color of each button by replacing style="background:#xxx;" this number. Colors are in HEX.

Visit Custom Color Code Generator to select your favourite color.

Demo Version

This is all for today. I hope you will like this Navigation Menu and give me feedback on my work. Get subscribe to remain update. Have a Nice Day.