マウスオーバーするとラインがついてくるメニューの作り方

メニューの各項目にマウスオーバーすると、下にあるラインが「ピョ〜ン」とそのメニュー幅になりつつ移動してきて「ボヨヨ〜ン」となるメニューを作りたい時はこの方法。
何を言ってるのか分からない、という人は以下のサンプルページでメニューにマウスオーバーしてもらえれば意味が分かるはず。

サンプルページ

使うのはjqueryとエフェクト用のjquery.easing

設置方法

「jquery.easing.1.3.js」は以下のリンクからダウンロード
http://gsgd.co.uk/sandbox/jquery/easing/

「jquery-1.11.0.min.js」はjquery.comから呼び出す。
「jquery.easing.1.3.js」はjsフォルダ内に置いた場合。

まずはページにjavascriptの呼び出しを挿入

JAVASCRIPT

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>

同様に、ラインがついてくるようにするためのスクリプトも挿入

<script>
$(function(){
	$('#menu span').css({
		width:$('#menu .current').outerWidth(),
		left:$('#menu .current').position().left
	});
	$('#menu a').mouseover(function(){
		$('#menu span').stop(true).animate({width:$(this).outerWidth(),left:$(this).position().left},1000,'easeOutElastic');
	});
});
</script>

レイアウトのためのスタイルシートを挿入 #menuのwidthや#lineboxのwidth等はメニューの個数やページサイズに合わせる

CSS

<style>
#menu {
	position: relative; 
	margin: 0px auto 0px auto;
	padding: 0;
	text-align:center;
	width: 400px;
}
#menu a {
	padding:10px 20px;
	color:#999;
	text-decoration:none;
}
#menu span {
	display:block;
	position:absolute;
	margin-top:0px;
	left:0;
	width:50px;
	height:5px;
	background:#666;
}
#linebox {
	margin: 15px auto 0px auto;
	width:460px;
	height:5px;
	background:#eee;
}
</style>

メニュー部分のHTMLは

HTML

<div id="menu">
	<a href="#">menu1</a>
	<a href="#" class="current">menu2</a>
	<a href="#">menu3</a>
	<a href="#">menu4</a>
	<div id="linebox"><span></span></div>
</div><!-- menu -->

マウスが無い状態で、currentの項目にラインが表示されるから、例えば「menu2のページのメニューはmenu2にclass=”current”を入れる」。

<div id="linebox"><span></span></div>

の部分はjavascriptによりラインが書き出される。