It is a combination of 3 types of menu styles, Floating, 
Sliding and Accordion with the css and jQuery. The menu will appear in the screen as a floating menu, on mouse over the menu will slide(visible) from left to outside. And on mouse out event the menu will slide to left. On the menu you can click on each item, and the sub-entries will shown with an animated effect. While window scrolling the menu will hide to left-side and floating on the same position.
The two level menu style is done with nested ul, li elements.
HTML
<div id="floating"> <div id="accordionMenu"> <ul id="accordion"> <li> <a href="#">Recent Posts</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li> <a href="#">Archives</a> <ul> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </li> </ul> </div> <div id="closeOpen"></div> </div>
The above html is the layout of the UL li list. Replace with your content.
CSS
body {padding:0;margin:0;height:2000px;}
#floating {position:absolute;top:150px;font-size:.9em;}
#floating a {color:#FFF;text-decoration:none;}
#accordionMenu {width: 300px;}
#closeOpen {float:right;width:18px;}
#accordion {border:1px #666 solid;background-color:#DDD;margin-top:0;padding:0;float:left;list-style: none;width: 280px;}
#accordion ul {list-style: none;padding:0;display: none;}
#accordion li{cursor: pointer;padding:3px;list-style:none;font-weight:bold;background-color:#36A8FF;}
#accordion li ul li a{font-style:italic;}
#accordion li ul li{border-top:1px #666666 solid;}
#accordion li ul li:hover{background-color:#c0c0c0;}
#accordion li ul {display: none;}
#accordion li.current ul{display:block;}
#accordion .current ul{padding-left:10px;}
HTML Header
<head> <script type="text/javascript" src="jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.scrollTo-min.js"></script> <link type="text/css" rel="stylesheet" href="style.css"/> </head>
You need to download the latest jQuery and scrollTo plugin.
jQuery Script
<script type="text/javascript">
var menuIconWidth = 20;
var topMargin = null;
var openImage = '<img src="right.png" alt="open" />';
var closeImage = '<img src="left.png" alt="close" />';
// floating div id
var floatingDiv = "#floating";
// accordion menu div id
var accordionDiv = "#accordion";
$(document).ready(function () {
$("#closeOpen").html(openImage);
topMargin = parseInt($(floatingDiv).css("top").substring(0,$(floatingDiv).css("top").indexOf("px")))
$(floatingDiv).css({left: menuIconWidth - $(floatingDiv).width()});
// for floating menu
$(floatingDiv).mouseenter(function () {
// show menu
$(this).stop().animate({left: 0}, "slow");
$("#closeOpen").html(closeImage);
}).mouseleave (function () {
// hide menu
$(this).stop().animate({left: menuIconWidth - $(this).width()}, "slow");
$("#closeOpen").html(openImage);
});
// handle the scroll event of the window.
$(window).scroll(function () {
// calculate the offset of the page scroll and animate the div for the floating effect.
var offset = topMargin + $(document).scrollTop() + "px";
$(floatingDiv).animate({top:offset}, {duration:500, queue:false});
});
// for According Menu
$(accordionDiv + ' > li a').click(function() {
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp(300,function() {
$(this).parent().removeClass('current');
$.scrollTo(accordionDiv,300);
});
} else {
$(accordionDiv + ' li.current ul').slideUp(300, function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle(300, function() {
$(this).parent().toggleClass('current');
});
$.scrollTo(accordionDiv, 300);
}
return false;
});
});
</script>
In the above jQuery the floating and accordion are write separately, so you can disable a feature easily. 
Hi midhun,
you again done it. what an article.
This is the article i am looking for.
Thanks a lot.
Very great work.
I was looking for a similar work. However, I want Menu to be aligned to right. Now it is aligned to left. I actually want a reverse action. Expecting your help in this session itself.
Kindly help.
Thanks
Sahkav
how do I change from float left to float right?
In this version you need to change a lot for left to right align. Sorry!!!
hi admin it is not working in internet explorer 8 and ie7