<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style>
*{
margin:0;
padding:0;
background:#f9f9f9;
}
</style>
<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Counter-Strike Source</h2>
<p>
<a href="своя ссылка">Плагины</a>
<a href="своя ссылка">Моды</a>
<a href="своя ссылка">Античиты</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>CS 1.6</h2>
<p>
<a href="своя ссылка">Плагины</a>
<a href="своя ссылка">Моды</a>
<a href="своя ссылка">Античиты</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Поиск</h2>
<p>
<input type="text"></input>
<a href="">Поиск</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Photoshop</h2>
<p>
<a href="своя ссылка">Кисти</a>
<a href="своя ссылка">Шрифты</a>
<a href="своя ссылка">Градиенты</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Главная</h2>
<p>
<a href="своя ссылка">Главная</a>
<a href="своя ссылка">Форум</a>
<a href="своя ссылка">Обратная связь</a>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://sm-pro.clan.su/jquery-css-transform.js" type="text/javascript"></script>
<script src="http://sm-pro.clan.su/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>
