|
<!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">
<style type="text/css">
body{
font-size: 13px;
}
ul,li{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu{
width: 180px;
border:solid 1px #E5D1A1;
background-color: #FFFDD2;
}
.optn{
width: 180px;
line-height: 28px;
border-top: dashed 1px #ccc;
}
.content{
padding-top: 10px;
clear: left;
}
a{
text-decoration: none;
color: #666;
padding: 10px;
}
.optnFocus{
background-color: #fff;
font-weight: bold;
}
div{
padding: 10px;
}
span{
padding-top: 3px;
font-size: 14px;
font-weight: bold;
float: left;
}
.tip{
width: 190px;
border: solid 2px #ffa200;
position: absolute;
padding: 10px;
background-color: #fff;
display: none;
}
.tip li{
line-height: 23px;
}
}
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
var curY;//所选项的top值
var curH;//所选项的Height值
var curW;//所选项的Width值
var srtY;//设置提示箭头的top值
var srtX;//设置提示箭头的left值
var objL;//获取当前对象
function setInitValue(obj){
curY = obj.offset().top
curH = obj.height();
curW = obj.width();
}
$(".optn").mouseover(function() {
objL = $(this);
setInitValue(objL);
var ally = curY - curH +"px";
objL.addClass(‘optnFocus‘);
objL.next("ul").show().css({"top":ally,"left":curW})
}).mouseout(function() {
$(this).removeClass(‘optnFocus‘);
$(this).next("ul").hide();
});
$(".tip").mousemove(function() {
$(this).show();
objL = $(this).prev("li");
setInitValue(objL);
objL.addClass(‘optnFocus‘);
}).mouseout(function(event) {
$(this).hide();
$(this).prev("li").removeClass(‘optnFocus‘);
});
});
</script>
<title>jQuery实现导航栏</title>
</head>
<body>
<ul>
<li class="menu">
<div>
<span>电脑数码产品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a></li>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
<li><a href="#">电脑软件4</a></li>
<li><a href="#">电脑软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
<li><a href="#">数码产品4</a></li>
<li><a href="#">数码产品5</a></li>
</ul>
</ul>
</li>
</ul>
</body>
</html>
|
