Меню - "сюрприз"

Меню под названием "сюрприз" с эффектами easing. Простенько исимпатично. Реализовано на jQuery и CSS3.  

HTML

Простенькая разметочка. Опять используем для навигации неупорядоченный список:

<div id="menu">
    <ul id="nav">
        <li>
            <a href="#" class="icon1">
                <span>Главная</span>
            </a>
        </li>
        <li>
            <a href="#" class="icon2">
                <span>Портфолио</span>
            </a>
        </li>    
        <li>
            <a href="#" class="icon3">
                <span>Наш блог</span>
            </a>
        </li>
        <li>
            <a href="#" class="icon4">
                <span>Услуги</span>
            </a>
        </li>    
    </ul>
</div>

CSS

#menu {
  width: 100%;
  background: #a7cfdf;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%);
  /* IE10+ */
  background: radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  position: relative;
  margin-top: 100px;
  border-top: 4px solid #eee;
  border-bottom: 4px solid #FFF;
  overflow: hidden;
}

/*======== Horizontal menu =========*/
#nav {
  z-index: 99999;
  margin: 0;
  padding: 0;
}
#nav li a, #nav li {
  float: left;
}
#nav li {
  list-style: none;
  position: relative;
}
#nav li a {
  padding: 0 10px;
  width: 130px;
  height: 102px;
  text-decoration: none;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: #FFF;
}
#nav li a.icon1 {
  background: url(../images/11.png) no-repeat center 0;
}
#nav li a.icon2 {
  background: url(../images/22.png) no-repeat center 0;
}
#nav li a.icon3 {
  background: url(../images/33.png) no-repeat center 0;
}
#nav li a.icon4 {
  background: url(../images/44.png) no-repeat center 0;
}
#nav li a span {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  font-size: 17px;
  color: #cfcfcf;
}
#nav li a:hover span {
  color: #fff;
}

JS

Подключаем jQuery, easing и backgroundPosition. И добавляем код вызова для меню:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/jаvascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/jаvascript">
$(function(){
    $('#nav li a')
        .css( {backgroundPosition: "52px -240px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(52px 10px)"}, {duration:1500, easing : 'easeOutElastic'})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(52px -240px)"}, {duration:500, easing : 'easeOutCubic', complete:function(){
                $(this).css({backgroundPosition: "52px -240px"})
            }})
        })
        
});
</script>

Анимация в данном примере (скрипт взят из Демо 1) использует эффекты easeOutElastic и easeOutCubic. Эти значения можно поменять на другие, которые поддерживает плагин easing - http://gsgd.co.uk/sandbox/jquery/easing/