【原創】css3+jquery 實現橫線跟隨菜單-含詳細優化過程和思考

 前提：一直想本身寫一個以下圖的效果，雖然網上也有，可是考慮到不受未來設計圖的多樣性，本身寫一個拓展性和維護性更佳。

版本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(); /*回到起點能夠做爲公共的函數來調用*/
		}
	)
})