<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Slide Menu</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () { var h = [];
for (var i = 1; i < 7; i++)
h.push("<li class='item'>Item" + i + "</li>"); $("#menu ul").html(h.join("\n")); function slideLeft() { var $m = $("#menu"); $m.animate({ "left": -$m.width(), opacity: 0 }, 500); }
$("#handle").click(function () { var $m = $("#menu"), $c = $("#main"); if ($m.position().left > 0)
slideLeft();
else
$m.show().animate({ left: $c.position().left, opacity: 1 }, 500); });
$("li.item").live("click", function () { slideLeft();
$("#main").text($(this).text()); });
});
</script>
<style type="text/css">
#main { width: 400px; height: 300px; background-color: Gray; text-align: center; color: White; }
#handle { position: absolute; z-index: 9; top: 8px; left: 0px; cursor: pointer; width: 10px; height: 150px;
background-color: Green; }
#menu { display: none; position:absolute; z-index: 1; top: 8px; left: -150px; background-color: Yellow;
width: 100px; height: 150px;
border-right: 2px solid #444444; border-bottom: 2px solid #444444; }
li.item { color: Blue; text-decoration: underline; cursor: pointer; } </style>
</head>
<body>
<div id="main"></div>
<div id="handle"></div>
<div id="menu"><ul></ul></div>
</body>
</html>