Developer Snippets - An Embodiment for Developers

body{
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-left:20px;
	padding-left:10px;
	border-left:1px solid #999999;
}
 
#slideMenu.closed{
	left:-300px;
}
 
#slideMenu{
	position:fixed;
	left:0;
	top:20px;
	width:300px;
	height:300px;
	border:5px solid #416888;
	border-left:0px;
	background-color:#FFFFFF;
	z-index:20;
}
 
#slideMenu a.toggleBtn{
	position:absolute;
	right:0;
	top:0;
	outline:none;
	display:block;
	height:87px;
	width:27px;
	border-width:1px 1px 1px 0px;
	margin:0;
	padding:0 5px 0;
	color:#000;
	text-decoration:none;
	font:12px/25px Verdana, Arial, Helvetica, sans-serif;
	background:url(images/arrow.gif) no-repeat;
	z-index:20;
}
 
#slideMenu a.toggleBtnHighlight{
	position:absolute;
	right:0;
	top:0;
	outline:none;
	display:block;
	height:87px;
	width:27px;
	border-width:1px 1px 1px 0px;
	margin:0;
	padding:0 5px 0;
	color:#000;
	text-decoration:none;
	font:12px/25px Verdana, Arial, Helvetica, sans-serif;
	background:url(images/arrow.gif) no-repeat 0px -88px;
	z-index:20;
}
 
.content{
	padding:5px;
	z-index:20;
}

<div id="slideMenu" class="closed">
	<div class="content">
	<strong>Quick Links</strong>
		<ul>
			<li><a href="#myAnchor" class="anchorLink" title="Anchor Link">Anchor Link</a></li>
			<li><a href="http://www.developersnippets.com/about/" title="About Me">About Me</a> </li>
			<li>Back to Article</li>
		</ul>
	</div>
	<a style="top:100px; right: -42px;" href="#" class="toggleBtn" id="toggleLink"></a>
</div>

/*
*****************************************
Author: Vivekanand
Website: http://www.developersnippets.com
*****************************************
*/
$(document).ready(function(){
	$(".toggleBtn").click(function(e){
                        e.preventDefault(); // prevent the anchor tag from sending the user off to the link that is href
			if($("#slideMenu").hasClass('closed')){
				$("#slideMenu").animate({left:0}, 500, function(){
					$(this).removeClass('closed').addClass('opened');
					$("a#toggleLink").removeClass('toggleBtn').addClass('toggleBtnHighlight');
				});
			}//if close
 
			$('#slideMenu').bind("mouseleave",function(){
				$("#slideMenu").animate({left:-300}, 500, function(){
					$(this).removeClass('opened').addClass('closed');
					$("a#toggleLink").removeClass('toggleBtnHighlight').addClass('toggleBtn');
				});
			});//bind close
	});//toggleBtn click close
 
	$("a.anchorLink").click(function () {	
		elementClick = $(this).attr("href");
		destination = $(elementClick).offset().top;
		$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1000 );
		return false;
	})
 
	/* Mouse Enter Event (that is mouseover event)
	$(".toggleBtn").bind("mouseenter",function(e){
                        e.preventDefault(); // prevent the anchor tag from sending the user off to the link that is href
			if($("#slideMenu").hasClass('closed')){
				$("#slideMenu").animate({left:0}, 500, function(){
					$(this).removeClass('closed').addClass('opened');
					$("a#toggleLink").removeClass('toggleBtn').addClass('toggleBtnHighlight');
				});
			}//if close
 
			$('#slideMenu').bind("mouseleave",function(){
				$("#slideMenu").animate({left:-300}, 500, function(){
					$(this).removeClass('opened').addClass('closed');
					$("a#toggleLink").removeClass('toggleBtnHighlight').addClass('toggleBtn');
				});
			});//bind close
	});//toggleBtn click close*/
 
});//ready close

$(document).ready(function(){
	$(".toggleBtn").click(function(){
			if($("#slideMenu").hasClass('closed')){
				$("#slideMenu").animate({left:0}, 500, function(){
					$(this).removeClass('closed').addClass('opened');
					$("a#toggleLink").removeClass('toggleBtn').addClass('toggleBtnHighlight');
				});
			}//if close

$('#slideMenu').bind("mouseleave",function(){
				$("#slideMenu").animate({left:-300}, 500, function(){
					$(this).removeClass('opened').addClass('closed');
					$("a#toggleLink").removeClass('toggleBtnHighlight').addClass('toggleBtn');
				});
			});//bind close

$("a.anchorLink").click(function () {	
		elementClick = $(this).attr("href");
		destination = $(elementClick).offset().top;
		$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1000 );
		return false;
	})