Я написал вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>slide-menu</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.hsm.js" type="text/javascript"></script>
<style type="text/css">
div#menu{width:500px; overflow:hidden;}
div#menu ul{ position:relative; list-style:none; width:1000px; height:200px; overflow:hidden; padding:0;}
div#menu ul li{ height:200px; float:left;}
div#menu ul li a{ display:block; width:98px; height:200px; border-left:2px solid #fff; float:left;}
.button1 a{background:url(images/landscapes.jpg) no-repeat;}
.button2 a{background:url(images/abstract.jpg) no-repeat;}
.button3 a{background:url(images/nature.jpg) no-repeat;}
.button4 a{background:url(images/people.jpg) no-repeat;}
.button5 a{background:url(images/urban.jpg) no-repeat;}
.active a{width:310px;}
</style>
</head><body>
<div id="menu">
<ul>
<li class="button1"><a href="#"></a></li>
<li class="button2"><a href="#"></a></li>
<li class="button3"><a href="#"></a></li>
<li class="button4"><a href="#"></a></li>
<li class="button5"><a href="#"></a></li>
</ul>
</div>
</body>
</html>
// JavaScript Document jquery.hsm.js
$(document).ready(function() {
$('#menu').find('a').mouseenter(
function(){
$('#menu').find('a').stop(true,false);
$(this).animate({'width':'310px'});
$(this).parent('li').siblings('li').find('a').animate({'width':'45px'});
}).live('click',function(){
$(this).animate({'width':'310px'});
$(this).parent('li').siblings('li').find('a').animate({'width':'45px'}).end().removeClass('active').end().addClass('active');
if($('#menu').find('li').hasClass('active')){
$('#menu').mouseleave(
function(){
$(this).find('a').stop(true,false);
$(this).find('li:not(.active)').find('a').animate({'width':'45px'});
$(this).find('li.active').find('a').animate({'width':'310px'});
}
);
}
});
if(!($('#menu').find('li').hasClass('active'))){
$('#menu').mouseleave(
function(){
$(this).find('a').stop(true,false);
$(this).find('a').animate({'width':'98px'});
}
);
}
else{
$('#menu').mouseleave(
function(){
$(this).find('a').stop(true,false);
$(this).find('li:not(.active)').find('a').animate({'width':'45px'});
$(this).find('li.active').find('a').animate({'width':'310px'});
}
);
}
});