notslang/gist:3915084

## gistfile1.html
<html>
    <head>
        <style>
html, body {
    height:100%;
    font-family: Arial, Verdana, Tahoma;
}
#nav {
    width: 50px;
    height:270px;
    position: fixed;
    top: 0px;
    left: -50px;
    background: #333;
    padding:10px 0 10px 0;
}

a {
    padding: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 40px;
    display:block;
}
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="https://raw.github.com/richardscarrott/jquery-mousestop-event/master/jquery.mousestop.js"></script>
        <script>
$(document).ready(function() {
    var timeout, p = $("#nav"), mouseActive = false;
    $(document).mousemove(function() {
        clearTimeout(timeout);
        mouseActive = true;
    }).mousestop(function(){
        hide();
    }).mouseout(function(){
        hide();
    });

    function hide() {
        timeout = setTimeout(function(){mouseActive = false;}, 1000);
    }
    interval = setInterval(function() {
        p.animate({
            left: mouseActive ? "0px" : "-50px"
        }, 300);
    }, 500)
});
        </script>
    </head>
    <body>
        <div id="nav">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
        </div>
    </body>
</html>
	<html>
	<head>
	<style>
	html, body {
	height:100%;
	font-family: Arial, Verdana, Tahoma;
	}
	#nav {
	width: 50px;
	height:270px;
	position: fixed;
	top: 0px;
	left: -50px;
	background: #333;
	padding:10px 0 10px 0;
	}

	a {
	padding: 10px;
	text-decoration: none;
	color: #fff;
	font-size: 40px;
	display:block;
	}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="https://raw.github.com/richardscarrott/jquery-mousestop-event/master/jquery.mousestop.js"></script>
	<script>
	$(document).ready(function() {
	var timeout, p = $("#nav"), mouseActive = false;
	$(document).mousemove(function() {
	clearTimeout(timeout);
	mouseActive = true;
	}).mousestop(function(){
	hide();
	}).mouseout(function(){
	hide();
	});

	function hide() {
	timeout = setTimeout(function(){mouseActive = false;}, 1000);
	}
	interval = setInterval(function() {
	p.animate({
	left: mouseActive ? "0px" : "-50px"
	}, 300);
	}, 500)
	});
	</script>
	</head>
	<body>
	<div id="nav">
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	</div>
	</body>
	</html>