CSS:
Code
ul {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
a {
color: #FFF;
text-decoration: none;
}
p {
padding: 0px 5px;
}
.subtext {
padding-top: 15px;
}
.green {
background: #6AA63B url('green-item-bg.jpg') top left no-repeat;
}
.yellow {
background: #FBC700 url('yellow-item-bg.jpg') top left no-repeat;
}
.red {
background: #D52100 url('red-item-bg.jpg') top left no-repeat;
}
.purple {
background: #5122B4 url('purple-item-bg.jpg') top left no-repeat;
}
.blue {
background: #0292C0 url('blue-item-bg.jpg') top left no-repeat;
}
Включаем JQuery:
Code
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
Подключаем анимацию:
Code
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
JS:
Code
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$(this).blur();
});
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>
HTML:
Code
<ul>
<li class="green">
<p><a href="#">Пункт №1</a></p>
<p class="subtext">Бла-бла</p>
</li>
<li class="yellow">
<p><a href="#">Пункт №2</a></p>
<p class="subtext">Бла-бла</p>
</li>
<li class="red">
<p><a href="#">Пункт №3</a></p>
<p class="subtext">Бла-бла</p>
</li>
<li class="blue">
<p><a href="#">Пункт №4</a></p>
<p class="subtext">Бла-бла</p>
</li>
<li class="purple">
<p><a href="#">Пункт №5</a></p>
<p class="subtext">Бла-бла</p>
</li>
</ul>
