<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>
想看Live Demo的人可以到這裡。
|
