【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考
【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考
柴高八斗之父 发表于3个月前
【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考
  • 发表于 3个月前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 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(); /*回到起点可以作为公共的函数来调用*/
		}
	)
})

 

共有 人打赏支持
粉丝 4
博文 135
码字总数 54165
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: