2013-03-29 1st

jsdoit.css

body {
	padding: 1em 3em;
}

ul, li, h2 {
	list-style: none;
	margin: 0;
	padding: 0;
}

h2 {
	margin-bottom: 1em;
}

.menu {
	position: relative;
	display: inline-block;
}

.menu li {
	margin-bottom: 1em;
	position: relative;
	font-size: 0.9em;
}

.menu .pseudo-href 
, .menu li.selected .pseudo-href 
{
	color: blue;
	border-bottom: 1px dashed blue;
}
.menu .pseudo-href:hover {
	color: red;
	border-bottom-color: red;
	cursor: pointer;
}
.menu li.selected
, .menu li.selected .pseudo-href 
{
	color: white;
	cursor: default;
	border-width: 0;
}
.menu li.selector {
	position: absolute;
	top: 0;
	background: #00f;
	padding: 0.5em 1em;
	margin: -0.5em 0 0 -1em;
	border-radius: 5px;
	box-shadow: 1px 1px 10px #00f;
}
.menu .selector .inner {
	width: 110px;	
	height: 1.3em;
}

.denisx-link {
	position: relative;
  top: 0em;
  text-align: right;
	margin-right: 1em;
	color: #aaa;
	font-size: 0.8em;
}
.with-love {
	position: absolute;
	margin-top: 1.5em;
}

jsdoit.html

<!--
 @fileoverview: Simple Menu Selector with jQuery & easing animation
 @author: [email protected] (Denis Khripkov) 
 @site: http://denisx.ru
 fork by
 @author: [email protected] (Lev Rogozhin)
 @date: 2013-03-28
 @version: v1.01
-->
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://yandex.st/jquery/easing/1.3/jquery.easing.min.js" type="text/javascript"></script>

<h2>Тесто для блинов</h2>
<ul class="menu">
	<li class="selector"><span class="inner"></span></li>
	<li><span class="pseudo-href">Мука — 1,5 стак.</span></li>
	<li><span class="pseudo-href">Яйцо — 2 шт.</span></li>
	<li><span class="pseudo-href">Молоко — 1 стак.</span></li>
	<li><span class="pseudo-href">Вода — 1 стак.</span></li>
	<li><span class="pseudo-href">Масло — 50 мл.</span><br/>(растительное)</li>
	<li><span class="pseudo-href">Сахар — 1 ст. л.</span></li>
	<li><span class="pseudo-href">Соль — 1/2 ч. л.</span></li>
</ul>

<p class="denisx-link"><span class="with-love">from Russia with love</span><span class="jq-link"></span>Carefully made by <a target="_blank" href="http://www.denisx.ru/">Denis Khripkov</a></p>

jsdoit.js

/*
 * @fileoverview: Simple Menu Selector with jQuery & easing animation
 * @author: [email protected] (Denis Khripkov)
 * @site: http://denisx.ru
 * fork by
 * @author: [email protected] (Lev Rogozhin)
 * @date: 2013-03-28
 * @version: v1.01
 */
$(function(){
	var menu=$('.menu');
	var selector=$('.selector',menu);
	var selector_inner=$('.inner',selector);
	menu.delegate('li:not(.selected)','click', function(){
		var selected=$('.selected',menu);
		var from=selected.index('li',menu);
		selected.removeClass('selected');

		selected=$(this).addClass('selected');
		var to=selected.index('li',menu);
		var top_item=$(this).offset().top;
		var top_parent=menu.offset().top;
		var top_delay=top_item-top_parent;

		var ease = (from < to) ? 'easeOutBounce' : 'easeOutBack';
		selector.animate({
			top: top_delay
		},'slow',ease);
		selector_inner.animate({
			width: selected.width()
			, height: selected.height()
		},'fast');
	});
	$('li:eq(5)',menu).click();
});