Floating Vertical Navigation Menu Using jQuery For Blogger Blogspot

Navigation menu is very important part of a web page as it gives flexibility to navigate to different pages of a website.Here is a navigation menu which floats with the screen in a beautiful manner.Have a look in the demo.

javascript:void(0)

DEMO

Installation:




Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!

Step 1 :  Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET selevt HTML/JAVA paste below code in it and Click SAVE

HTML

<div id="floatMenu">  <ul class="menu1">    <li><a href="#" onclick="return false;"> Home </a></li>  </ul>  <ul class="menu2">    <li><a href="#" onclick="return false;"> Table of content </a></li>    <li><a href="#" onclick="return false;"> Exam </a></li>    <li><a href="#" onclick="return false;"> Wiki </a></li>  </ul>  <ul class="menu3">    <li><a href="#" onclick="return false;"> Technical support </a></li>  </ul></div>

<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Step 2:


CSS

Now comes the CSS part

Find ]]></b:skin>

Paste below code ABOVE ]]></b:skin>

#floatMenu {    position:absolute;    top:150px;    left:50%;    margin-left:235px;    width:200px;}#floatMenu ul {    margin-bottom:20px;}#floatMenu ul li a {    display:block;    border:1px solid #999;    background-color:#222;    border-left:6px solid #999;    text-decoration:none;    color:#ccc;    padding:5px 5px 5px 25px;}    #floatMenu ul.menu1 li a:hover {        border-color:#09f;    }    #floatMenu ul.menu2 li a:hover {        border-color:#9f0;    }    #floatMenu ul.menu3 li a:hover {        border-color:#f09;    }

Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Step 3: Now find ]]></b:skin>


Paste the below code Below  ]]></b:skin>  code

JAVA SCRIPTS

<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.js'/>    <script language='javascript' src='http://files-teckzest.bravehost.com/jquery.dimensions.js'/>    <script language='javascript'>     $(document).ready(function(){        // code will go here    });      $(document).ready(function(){        $(window).scroll(function () {             // code will go here        });    });     var name = &quot;#floatMenu&quot;;    var menuYloc = null;     $(document).ready(function(){        menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))        $(window).scroll(function () {             // code will go here        });    });     var name = &quot;#floatMenu&quot;;    var menuYloc = null;     $(document).ready(function(){        menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))        $(window).scroll(function () {             var offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;            $(name).animate({top:offset},{duration:500,queue:false});        });    });     </script>

Click Save Template !

Now you will see Floating type menu in Right side of youe web page. Please comment if you liked that .)

Credits : Author  : Jeff Dion Distributed for blogger : Blogger Plug n Play