您的位置：首页 > Web前端

前端开发日记之浮动下拉列表的设计

2016-07-22 16:38 429 查看
许多网站的导航栏都有浮动的下拉框，根据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就会紧挨着布局。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                前端开发
                                                css
                                                导航
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航