【マウスオーバー】ナビゲーションのテキストリンクを移動する下線【PCサイト用】

ナビゲーションのテキストリンクに現在位置を示す下線を表示します。テキストリンクをマウスオーバーすると下線がアニメーションで移動し、マウスアウトで戻ります。

htmlのコードは下記になります。
ナビゲーションのliタグで現在位置を示す箇所にclass=”current”を付与します。

<div class="nav_menu">
	<ul>
		<li class="current"><a href="#">ABOUT</a></li>
		<li><a href="#">SERVICE</a></li>
		<li><a href="#">NEWS</a></li>
		<li><a href="#">ACCESS</a></li>
	</ul>
</div>

続いてCSSのコードです。
jQueryで動的に追加する下線のdivタグのCSSを記述します。position: absoluteで配置、下線の太さは2px、横幅100%に設定します。

.nav_menu {
	position: relative;
}
.nav_menu ul {
	display: flex;
	margin: 0;
	padding: 0;
}
.nav_menu ul li {
	margin: 0 40px 0 0;
	padding: 0 0 16px;
	list-style-type: none;
}
.nav_menu ul li a {
	color: #78909c;
	text-decoration: none;
}
.nav_menu .current-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #78909c;
}

最後にjQueryのコードです。
ページ表示時はクラス名currentの付与されているナビゲーションのliタグの横幅とX軸方向の位置を調べ、下線のdivタグのCSSに設定します。
ナビゲーションのテキストリンクにマウスオーバー時、マウスアウト時は、関数navAnimateを呼び出します。マウスオーバー時はマウスオーバーしたテキストリンクの親要素であるナビゲーションのliタグの横幅とX軸方向の位置を調べ、animateを利用して下線を移動します。delay、duration、easingも設定します。マウスアウト時はページ表示時と同様にクラス名currentの付与されているナビゲーションのliタグの横幅とX軸方向の位置を調べ、マウスオーバー時と同様にanimateを利用して下線を移動します。

$(function() {
	if($('.nav_menu').length) {
		var navMenu = $('.nav_menu');
		var currentWidth = 0;
		var currentPos = 0;
		var currentBar = null;
		
		if($('.nav_menu ul li.current').length) {
			currentWidth = $(navMenu).find('.current').outerWidth();
			currentPos = $(navMenu).find('.current').position().left;
			$(navMenu).append('<div class="current-bar"></div>');
			currentBar = $(navMenu).find('.current-bar');
			$(currentBar).css({
				width: currentWidth+'px',
				left: currentPos+'px'
			});
			$(navMenu).find('ul li a').hover(navOn, navOff);
		}
			
		function navOn(){
			navAnimate($(this).parent(), 300, 0, 'swing');
		}
		function navOff(){
			navAnimate($(navMenu).find('.current'), 200, 300, 'swing')
		}
		
		function navAnimate(target, duration, delay, easing) {
			currentWidth = target.outerWidth();
			currentPos = target.position().left;
			$(currentBar).stop(true).delay(delay).animate({
				width: currentWidth+'px',
				left: currentPos+'px'
			},duration, easing);
		}
	}
});