基于jquery的类似于京东商场左菜单的一个例子

来源：互联网发布：ecshop 水果商城源码编辑：程序博客网时间：2024/05/01 17:22

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul,li{list-style-type:none;line-height: 30px;font-size: 20px}
li:HOVER {cursor: pointer;}
li{width: 40px}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function(){
$('li').mouseover(function(){
var obj=$(this).offset();
var xobj=obj.left+40+"px";
var yobj=obj.top+"px";
$("#id1").css('top',yobj);
$("#id1").css('left',xobj);
$("#id1").css('display',"");
}).mouseout(function(){
$("#id1").hide();
});

$('div').mouseover(function(){
$(this).show();
}).mouseout(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="id1" style="background-color: grey;height: 200px;width: 200px;position: absolute;display: none;"></div>
<ul>
<li>dog</li>
<li>cat</li>
<li>pig</li>
</ul>
</body>
</html>