jQueryを使用して、メニューボタンのスライドせり出し効果を実現するスクリプトを作成しました。

●スライドせり出し効果のスクリプト

var Slide_Button = function(){
  this.intvl = 500;
  this.on_css = {
    backgroundColor: "#ddccff",
    color: "#663300"
  };
  this.off_css = {
    backgroundColor: "#ffffff",
    color: "#000000"
  };
  this.on_anm = {
    width: "200px"
  };
  this.off_anm = {
    width: "150px"
  };
}
Slide_Button.prototype = {
  button_onmouse: function($){
    $.css(this.on_css);
    $.animate( this.on_anm, this.intvl );
  },
  button_outmouse: function($){
    $.css(this.off_css);
    $.animate( this.off_anm, this.intvl);
  }
}

$(document).ready(function(){

  var obj = new Slide_Button();

  $("ul li").hover(
    function(){
      obj.button_onmouse($(this));
    },
    function(){
      obj.button_outmouse($(this));
    }
  );

});

●HTMLソース

<div id="container">
  <ul class="clrfix">
    <li><a href="#">menu01</a></li>
    <li><a href="#">menu02</a></li>
    <li><a href="#">menu03</a></li>
    <li><a href="#">menu04</a></li>
    <li><a href="#">menu05</a></li>
  </ul>
</div>

●CSS

ul{
  width:202px;
  margin:0;
  padding:0;
  }
ul li{
  list-style:none;
  width:150px;
  margin-bottom:5px;
  font-size:75%;
  border:solid 1px #dcf;
  float:right;
  }
ul li a,ul li a:visited{
  display:block;
  width:auto;
  padding:5px;
  color:#000;
  text-decoration:none;
  }
ul li a:hover{
  color:#630;
  }

.clrfix{ zoom:1; }
.clrfix:after{
  display:block;
  content:".";
  height:0;
  clear:both;
  visibility:hidden;
  }

・関数内では”$”のみでjQueryオブジェクトを継承できる。
・animateで変更できるのは数値要素のみ（width,height,margin,padding,fontSizeなど）で、背景色や背景画像の差し替えはできない。

サンプル