【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考
2017-09-11 00:00
211 查看
摘要: 可随意自定义新增菜单项
前提:一直想自己写一个如下图的效果,虽然网上也有,但是考虑到不受将来设计图的多样性,自己写一个拓展性和维护性更佳。
优化欠佳
html如下:
css如下:(为每一个li定义了位移值。)
js如下:(用到了jquery的hover事件。hover就追加位移的样式,out就移除;)
缺点:全部写死,代码过多。
但是并非完美,比如随意新增或删除菜单项,位移值需要手动改。这个问题会在版本03里解决 ↓。
css如下(这一步将每次位移值都去掉了。放到了下面js中。)
js如下:(这一步的js做了 公共部分的提取,①:hover上的时候,将$(".hover-line").css("opacity",1))
这个提出来;②:out时,调用头部的回退函数,这个是每次鼠标一移开,跟随短线会回到起始地方。作为公共也会提取出来了,代码如下;
function go_start(){
$(".hover-line").css({transform:"translateX(-100px)",opacity:0})
}
以上代码可以一定程度上的减少代码量。同时也是一个对思路的整理过程。
动态添加菜单项均无需再另外改任何代码。
前提:一直想自己写一个如下图的效果,虽然网上也有,但是考虑到不受将来设计图的多样性,自己写一个拓展性和维护性更佳。
版本01的实现过程
只是效果实现;优化欠佳
html如下:
<div class="menu"> <ul> <li>tab01</li> <li>tab02</li> <li>tab03</li> <li>tab04</li> <li>tab05</li> </ul> <div class="hover-line"></div> </div>
css如下:(为每一个li定义了位移值。)
/*清全局*/ body{ padding: 200px; background: #ECECEC; font-size: 12px;} *{ margin: 0; padding: 0;} ul,li{ list-style: none;} /*菜单*/ .menu{ position: relative; width: 600px; height:36px;} .menu ul li{ transition: all 0.5s; float:left; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #002A80; color: #fff;} .menu ul li:hover{ background: #008080;} /*线条*/ .hover-line{ transition: all 0.5s; opacity: 0; position: absolute; left: -100px; bottom: 0px; width: 100px; height: 3px; background: greenyellow;} .hover-line-1{ transform: translateX(100px); opacity: 1;} .hover-line-2{ transform: translateX(200px); opacity: 1;} .hover-line-3{ transform: translateX(300px); opacity: 1;} .hover-line-4{ transform: translateX(400px); opacity: 1;} .hover-line-5{ transform: translateX(500px); opacity: 1;}
js如下:(用到了jquery的hover事件。hover就追加位移的样式,out就移除;)
$(function(){ $(".menu ul li").eq(0).hover( function(){ $(".hover-line").addClass("hover-line-1") }, function(){ $(".hover-line").removeClass("hover-line-1") } ) $(".menu ul li").eq(1).hover( function(){ $(".hover-line").addClass("hover-line-2") } , function(){ $(".hover-line").removeClass("hover-line-2") } ) $(".menu ul li").eq(2).hover( function(){ $(".hover-line").addClass("hover-line-3") }, function(){ $(".hover-line").removeClass("hover-line-3") } ) $(".menu ul li").eq(3).hover( function(){ $(".hover-line").addClass("hover-line-4") }, function(){ $(".hover-line").removeClass("hover-line-4") } ) $(".menu ul li").eq(4).hover( function(){ $(".hover-line").addClass("hover-line-5") }, function(){ $(".hover-line").removeClass("hover-line-5") } ) })
缺点:全部写死,代码过多。
版本02的优化过程:
一定程度上优化了代码量,整理了思路。但是并非完美,比如随意新增或删除菜单项,位移值需要手动改。这个问题会在版本03里解决 ↓。
css如下(这一步将每次位移值都去掉了。放到了下面js中。)
/*清全局*/ body{ padding: 200px; background: #ECECEC; font-size: 12px;} *{ margin: 0; padding: 0;} ul,li{ list-style: none;} /*菜单*/ .menu{ position: relative; width: 600px; height:36px;} .menu ul li{ transition: all 0.5s; float:left; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #002A80; color: #fff;} .menu ul li:hover{ background: #008080;} /*线条*/ .hover-line{ transition: all 0.5s; opacity: 0; position: absolute; left: -100px; bottom: 0px; width: 100px; height: 3px; background: greenyellow;}
js如下:(这一步的js做了 公共部分的提取,①:hover上的时候,将$(".hover-line").css("opacity",1))
这个提出来;②:out时,调用头部的回退函数,这个是每次鼠标一移开,跟随短线会回到起始地方。作为公共也会提取出来了,代码如下;
function go_start(){
$(".hover-line").css({transform:"translateX(-100px)",opacity:0})
}
以上代码可以一定程度上的减少代码量。同时也是一个对思路的整理过程。
$(function(){ //回退函数 function go_start(){ $(".hover-line").css({transform:"translateX(-100px)",opacity:0}) } //事件响应 $(".menu ul li").hover( function(){ var this_index = $(this).index(); //得到索引号 $(".hover-line").css("opacity",1) /*hover后,透明度可以作为公共样式抽到顶部来先执行掉。*/ if(this_index==0) { $(".hover-line").css("transform","translateX(100px)") } if(this_index==1) { $(".hover-line").css("transform","translateX(200px)") } if(this_index==2) { $(".hover-line").css("transform","translateX(300px)") } if(this_index==3) { $(".hover-line").css("transform","translateX(400px)") } if(this_index==4) { $(".hover-line").css("transform","translateX(500px)") } }, function(){ return go_start(); /*回到起点可以作为公共的函数来调用*/ } ) })
版本03的进一步优化过程:
仅仅改了js部分,做了动态获取偏移值,带到hover的css控制中。动态添加菜单项均无需再另外改任何代码。
$(function(){ //回退函数 function go_start(){ $(".hover-line").css({transform:"translateX(-100px)",opacity:0}) } //事件响应 $(".menu ul li").hover( function(){ var this_index = $(this).index(); //得到索引号 $(".hover-line").css("opacity",1)/*hover后,透明度可以作为公共样式抽到顶部来先执行掉。*/ var this_left_px = (this_index+1)*100; //取到偏移值 if(this_left_px!=="") { $(".hover-line").css("transform","translateX("+this_left_px+"px)") //带进来 } }, function(){ return go_start(); /*回到起点可以作为公共的函数来调用*/ } ) })
相关文章推荐
- rsync实现客户端自动与服务器同步数据详细过程(原创)
- AOI的实现的优化过程
- Android仿人人客户端(v5.7.1)——有关滑动式左侧菜单实现过程中网友的疑问解答
- [原创]桓泽学音频编解码(4):MP3 和 AAC 中反量化原理,优化设计与参考代码中实现
- Spectator view——Hololens第三人称视角技术的详细实现过程
- Hive map阶段优化之一次详细的优化分析过程
- 站在巨人的肩膀上——二维码扫描功能的实现和优化过程
- 实战Jsp连接MySQL数据库详细过程(原创)
- asp.net DropDownList无刷新ajax二级联动实现详细过程
- 源码实现lamp环境搭建的详细过程
- 使用struts-menu_详细实现动态菜单
- canny 算子实现图像边缘检测(详细过程附源码)
- 【原创】解决Eclipse 安装过程中preference 菜单不出现Android 选项的的办法
- C++接口的定义与实现的详细过程
- Android图表库MPAndroidChart(六)——换一种思考方式,水平条形图的实现过程
- elk实时日志分析平台部署搭建详细实现过程
- AsyncTask中各个函数详细的调用过程,初步实现异步任务
- ionic入门教程第十四课-详细说明slide-tabs的实现和优化
- Android Service实现详细过程
- 精心为您准备的Openssl实现私有CA的详细过程,以及如何配置安装证书 推荐