列表中的导航菜单应用
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./optn.js"></script>
<link type="text/css" href="./optn.css" rel="stylesheet"/>
<title>列表中的导航菜单应用</title>
</head>
<body>
<ul>
<li class="menu">
<div>
<img src="personal.jpg" alt="" width="25px" />
<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>
<img id="sort" src="kong.png" alt="" />
</li>
</ul>
</body>
</html>
css
body{
font-size: 13px;
}
ul,li{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu{
width: 190px;
border: solid 1px #EEEEEE;
background-color: #FEEEC2;
}
.optn{
width: 190px;
line-height: 28px;
border-top: dashed 1px #ccc;
}
.content{
padding-top: 10px;
clear: left;
}
a{
text-decoration: none;
color: #666666;
padding: 10px;
}
.optnFocus{
background-color: #fff;
font-weight: bold;
}
div{
padding: 10px;
}
div img{
float: left;
padding-right: 6px;
}
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;
}
#sort{
position: absolute;
display: none;
}
js
$(function(){
var curY;//获取所选项的top的值
var curH;//获取所选项的height的值
var curW;//获取所选项的width的值
var strY;//获取提示箭头的top的值
var strX;//获取提示箭头的left的值
var objL;//获取当前对象
// 设置往前位置数值
// 参数obj为当前对象名称
function setInitValue(obj){
curY = obj.offset().top
//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
curH = obj.height();
curW = obj.width();
strX = curY + (curH / 2)+"px";//设置提示箭头的top值
strY = curW - 5 + "px";//设置提示箭头的left值
}
//设置当前所选取的项的鼠标移入事件
$(".optn").mouseover(function(){
objL = $(this);//获取当前对象
setInitValue(objL);//设置当前对象
var allY = curY - curH +"px";//设置提示框top的值
objL.addClass("optnFocus");//增加获取焦点时的样式
objL.next("url").show().css({
"top": allY,"left":curW})//显示并且设置提示框的坐标
$("#sort").show().css({
"top":strY,"left":strX})//显示并且设置提示箭头的坐标
})
//设置当前所选项的鼠标移出事件
.mouseout(function(){
//删除获得焦点时的样式
$(this).removeClass("optnFocus");
$(this).next("ul").hide();//隐藏提示框
$("#sort").hide();//隐藏提示箭头
})
$(".tip").mousemove(function(){
$(this).show();//显示提示框
objL = $(this).prev("li");//获取当前的上一级对象li
setInitValue(objL);//设置当前位置
//增加上级li对象获取焦点时的样式
objL.addClass("optnFocus");
//显示并且设置提示箭头的坐标
$("#sort").show().css({
"top":strY,"left":strX})
})
.mouseout(function(){
$(this).hide();//隐藏提示框
//删除获取焦点时的样式
$(this).prev("li").removeClass("optnFocus");
$("#sort").hide();//隐藏提示箭头
})
})
预览效果
