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

サンプルページ

使うのは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="http://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によりラインが書き出される。