<link rel="stylesheet" href="/menu_ie/css/style.css" type="text/css" media="screen"/>  
  <div class="menu">  
  <div class="item">  
  <a class="link icon_search"></a>  
  <div class="item_content">  
  <h2>Поиск</h2>  
  <p>  
  <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin:0px" action="/search/">  
  <input placeholder="Введите текст..." class="search-bar" type="text" name="q" maxlength="45" onclick="if (this.value=='Поиск...'){this.value='';}"/>  
  <i class="search-btn fa fa-search"></i>  
  <form>  
  </p>  
  </div>  
  </div>  
  <div class="item">  
  <a class="link icon_contact"></a>  
  <div class="item_content">  
  <h2>Контакты</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>Помощь</h2>  
  <p>  
  <a href="#">Шаблоны</a>  
  <a href="#">Скрипты</a>  
  <a href="#">Информеры</a>  
  </p>  
  </div>  
  </div>  
  <div class="item">  
  <a class="link icon_archive"></a>  
  <div class="item_content">  
  <h2>Архив файлов</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="/forum">Форум</a>  
  </p>  
  </div>  
  </div>  
  </div>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
<script src="/menu_ie/js/jquery-css-transform.js" type="text/javascript"></script>  
<script src="/menu_ie/js/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:'278px'}, 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>