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>

</style> 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; } 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 .