Make a vertical scroll menu

A vertical scroll menu is a good idea for sidebar ,with this menu ,you can add more links than others . Last week ,I came across to queness.com website and found an article for making this vertical scroll menu . So I take it and write it down here again for applying to Blogger .I hope it helpful to you .

Check out my Live Demo

Here is steps for making this kind of menu :
1,Go to Blogger and create an HTML/Javascript widget .In fact ,you can add the code direct to template but it will be difficult for you to edit and find errors ,so a widget is better .

2,Add this script

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/scroll%20menu/jquery-1.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/scroll%20menu/jquery.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/scroll%20menu/jquery_002.js"></script>

This code will included Jquery framework ,Jquery Ease plugin and Jquery color animation plugin to your web .

3,The main code :
<script type="text/javascript">
$(document).ready(function() {   
    //Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';

    //Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';
   
    //Default Padding
    var defpadLeft = $('#menu li a').css('paddingLeft');
    var defpadRight = $('#menu li a').css('paddingRight');
       
    //Animate the LI on mouse over, mouse out
    $('#menu li').click(function () {   
        //Make LI clickable
        window.location = $(this).find('a').attr('href');
       
    }).mouseover(function (){
       
        //mouse over LI and look for A element for transition
        $(this).find('a')
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {
   
        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });   
   
    //Scroll the menu on mouse move above the #sidebar layer
    $('#sidebar').mousemove(function(e) {

        //Sidebar Offset, Top value
        var s_top = parseInt($('#sidebar').offset().top);       
       
        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($('#sidebar').height() + s_top);
   
        //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#menu li').height() * $('#menu li').length);
   
        //I used this coordinate and offset values for debuggin
        $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
           
        //Calculate the top value
        //This equation is not the perfect, but it 's very close   
        var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
       
        //Animate the #menu by chaging the top value
        $('#menu').animate({top: top_value}, { queue:false, duration:500});
    });

   
});
   
</script>

4,A little of CSS for our cook :

<style>
body {
padding:0;
margin:0 20px;
}

#sidebar {
height:400px;
overflow:hidden;
position:relative;
background-color:#eee;
}   

#menu {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}

#menu li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}

#menu li a {
background:url() repeat #1f1f1f;

color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}

#menu li span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}

</style>

5,And now the HTML for menu,it's like that :
<div id="sidebar">
<ul id="menu">
<li><a href="#">MENU 1 </a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
<li><a href="#">MENU 6</a></li>
......
......
......
</ul>
</div>

Add more <li><a href="#">MENU ...</a></li> if you want more link in menu .

Ok,Save widget and you are done .
P/s: To make your menu look good and more professional ,you can add /edit CSS to make it as you want .