[Original] css3+jquery implements horizontal line following menu - including detailed optimization process and thinking

 Premise: I have always wanted to write an effect as shown below. Although there are also online, but considering the diversity of future design drawings, it is better to write one for scalability and maintenance.

The implementation process of version 01

• only the effect is achieved;
• Poor optimization

html is as follows:

<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>

The css is as follows: (The displacement value is defined for each 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 is as follows: (The hover event of jquery is used. The hover will add the displacement style, and the out will be removed;)

$(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")
			}
		)
})

 Disadvantages: all written dead, too much code.

 

Optimization process for version 02:

• To a certain extent, the amount of code is optimized and the ideas are sorted out.
• But it is not perfect, such as adding or deleting menu items at will, the displacement value needs to be changed manually. This issue will be resolved in version 03↓.

The css is as follows (this step removes each displacement value. Put it in the following 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;}

The js is as follows: (The js in this step has done the   extraction of the public part , ①: When the hover is on, $(".hover-line").css("opacity",1))

This is proposed; ②: When out, call the fallback function of the head. This is that every time the mouse is moved away, it will return to the starting place following the short line. It will also be extracted as a public, the code is as follows;
    function go_start(){
        $(".hover-line").css({transform:"translateX(-100px)",opacity:0})
    }

The above code can reduce the amount of code to a certain extent. It is also a process of organizing ideas.

$(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(); /*回到起点可以作为公共的函数来调用*/
		}
	)
})

 

Further optimization process for version 03:

•  Only the js part was changed, and the offset value was dynamically obtained and brought to the css control of the hover.
• Dynamically adding menu items does not require any additional code changes.

$(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(); /*回到起点可以作为公共的函数来调用*/
		}
	)
})