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));
    }
  );

});

<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>

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など）で、背景色や背景画像の差し替えはできない。

サンプル