许多网站的导航栏都有浮动的下拉框,根据hover事件来决定下拉框的显示与隐藏。如猎聘的头部导航栏。
先看实现的代码
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="nav-title">
<span class="finsh_order">已完成订单</span>
<div class="order_export">
<p><a href="javascript:orderExport();">导出已完成订单</a></p>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$('.<span style="color:#ff6666;">nav-title</span>').hover(function(){
$('.order_export').show();
},function(){
$('.order_export').hide();
});
</script>
</body>
</html>
css:
.nav-title{
<span style="color:#ff0000;">position:relative;</span>
margin-left:500px;
}
.order_export{
<span style="color:#ff0000;">position: absolute;</span>
z-index: 1;
left:1px;
text-align: left;
background-color: #39474e;
padding-left:8px;
padding-right:30px;
display:none;
}
.order_export a{
color:#ddd;
font-size:14px;
}
.order_export a:hover{
color:#fff;
}
下拉框order_export的position要设为absolute,而order_export的上一级div.nav-title的position要设为relative。此时order_export就可以跳出当前全局的文档流,而根据其父元素nav-tittle的位置而布局。值得一说的是,order_export的position设为absolute之后,跳出文档流后是根据谁来布局,取决于其祖元素谁显示声明了是relative。比如当前.nva-title的position没有设为relative,order_export的相对布局对应的就是其最近的显示声明了position为relative的祖元素。
注意的几点:
1. 如果order_export的top和left都没有设置值,这时order_export是相对于其父元素布局,紧挨着其父元素(不管其父元素是否显示声明了position为relative)。如果order_export声明了top或者left,就如上所述。
2.浮动下来框就根据父元素nav-title的hover事件来判定。值得一提的是top的值不能大于span.finsh_order的高度。因为如果大于了,span.finsh_order和.order_export之间就会有空隙,从而导致hover事件的执行效果不是想要的,即鼠标始终不能点击到order_export,因为想点击它的时候,它已经隐藏了。最好的方式就是top不设值,这样order_export就会紧挨着布局。