<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jquery - 左边栏菜单隐藏/显示</title>
<script src="js/1.3.2.js"></script>
<script>
$(document).ready(function(){
/** 通过点击展开左边栏 **/
$("#pull").click(function(){
if($("#mydiv").css("left") == "0px")
{
$("#mydiv").animate({left:"-150px"});
}
else
{
$("#mydiv").animate({left:"0px"});
}
});
/** 通过鼠标进出来展开与收缩左边栏 **/
/**
$("#pull").mouseover(function(){
$("#mydiv").animate({left:"0px"});
});
$("#pull").mouseout(function(){
$("#mydiv").animate({left:"-150px"});
});
**/
/** 首页连接 **/
/*$("#aIndex").click(function(){
$("#maindiv").load("http://xieruilin.iteye.com/");
});*/
});
</script>
<style>
body{ margin:0; padding:0; width:100%; height:100%;}
#mydiv
{
width:200px;
height: 100%;
position: absolute;
top:0;
left:-150px;
}
#maindiv
{
width:100%;
height: 100%;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="maindiv">
</div>
<div id="mydiv">
<div style="background:#69F;width:150px;height:100%;float: left;color:#FFFFFF;">
菜单栏
</div>
<div style="width:50px;height:100%;float: left;">
<div id="pull" style="background:#999;width:20px;height:20px;color:yellow;cursor:pointer;">
拉
</div>
</div>
</div>
</body>
</html>
jquery - 左边栏菜单滑动隐藏/显示
最新推荐文章于 2021-12-29 20:58:09 发布