前端开发日记之浮动下拉列表的设计
2016-07-22 16:38
597 查看
许多网站的导航栏都有浮动的下拉框,根据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就会紧挨着布局。
相关文章推荐
- GUI - Web前端开发框架
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧