<table id="mytable">  
<tr>  
<td class="check">  
<input id="check_1" name="check_1" type="checkbox" value="1" />  
</td>  
<td>Контент размещаем здесь</td>  
</tr>  
<tr>  
<td class="check">  
<input id="check_2" name="check_2" type="checkbox" value="2" />  
</td>  
<td>Контент размещаем здесь</td>  
</tr>  
  </table>

<div id="actionsBox" class="actionsBox">  
<div id="actionsBoxMenu" class="menu">  
<span id="cntBoxMenu">0</span>  
<a class="button box_action">Архивировать</a>  
<a class="button box_action">Удалить</a>  
<a id="toggleBoxMenu" class="open"></a>  
<a id="closeBoxMenu" class="button">X</a>  
</div>
<div class="submenu">  
<a class="first box_action">Переместить...</a>  
<a class="box_action">Отметить как прочтенный</a>  
<a class="box_action">Отметить как новый</a>  
<a class="last box_action">Спам</a>  
</div>  
  </div>

.actionsBox{  
font-size:13px;  
font-family:Helvetica,Arial,Verdana;  
font-style:normal;  
left:50%;  
position:absolute;  
top:-50px;  
opacity:0;  
cursor:move;  
  }

.actionsBox .menu{  
color:#47708F;  
width:240px;  
line-height:30px;  
text-shadow:1px 1px 0px #fff;  
padding:7px;  
-moz-border-radius:5px;  
-webkit-border-radius:5px;  
border-radius:5px;  
font-weight:bold;  
border:1px solid #D9EAF2;  
background:#e8f4fa;  
background:  
-webkit-gradient(  
linear,  
left bottom,  
left top,  
color-stop(0.58, rgb(217,234,242)),  
color-stop(0.93, rgb(232,244,250))  
);  
background:  
-moz-linear-gradient(  
center bottom,  
rgb(217,234,242) 58%,  
rgb(232,244,250) 93%  
);  
-moz-box-shadow:1px 1px 3px #999;  
-webkit-box-shadow:1px 1px 3px #999;  
box-shadow:1px 1px 3px #999;  
  }

.actionsBox .menu .button{  
padding:4px 7px;  
border:1px solid #D9EAF2;  
cursor:pointer;  
background:#e8f4fa;  
background:  
-webkit-gradient(  
linear,  
left bottom,  
left top,  
color-stop(0.38, rgb(230,243,249)),  
color-stop(0.88, rgb(245,249,250))  
);  
background:  
-moz-linear-gradient(  
center bottom,  
rgb(230,243,249) 38%,  
rgb(245,249,250) 88%  
);  
-moz-border-radius:5px;  
-webkit-border-radius:5px;  
border-radius:5px;  
-moz-box-shadow:0px 1px 0px #f9f9f9;  
-webkit-box-shadow:0px 1px 0px #f9f9f9;  
box-shadow:0px 1px 0px #f9f9f9;  
  }

.actionsBox .menu .button:hover{  
background:#fff;  
  }

.actionsBox .menu span{  
padding:0px 10px;  
  }

.actionsBox .submenu{  
display:none;  
width:120px;  
margin-left:100px;  
top:46px;  
right:10px;  
background:#fff;  
border:1px solid #D9EAF2;  
border-top:none;  
-moz-border-radius:0px 0px 10px 10px;  
-webkit-border-bottom-left-radius:10px;  
-webkit-border-bottom-right-radius:10px;  
border-bottom-left-radius:10px;  
border-bottom-right-radius:10px;  
-moz-box-shadow:0px 1px 4px #ddd;  
-webkit-box-shadow:0px 1px 4px #ddd;  
box-shadow:0px 1px 4px #ddd;  
  }  
  .actionsBox .submenu a{  
display:block;  
cursor:pointer;  
padding:10px 15px;  
border-top:1px solid #D9EAF2;  
  }

.actionsBox .submenu a.last{  
-moz-border-radius:0px 0px 10px 10px;  
-webkit-border-bottom-left-radius:10px;  
-webkit-border-bottom-right-radius:10px;  
border-bottom-left-radius:10px;  
border-bottom-right-radius:10px;  
  }

.actionsBox .submenu a.first{  
border-top:none;  
  }  
  .actionsBox .submenu a:hover{  
background-color:#f9f9f9;  
  }

.actionsBox .menu a.open,  
  .actionsBox .menu a.closed{  
border:1px solid #D9EAF2;  
padding:4px 17px;  
-moz-border-radius:5px;  
-webkit-border-radius:5px;  
border-radius:5px;  
-moz-box-shadow:0px 1px 0px #f9f9f9;  
-webkit-box-shadow:0px 1px 0px #f9f9f9;  
box-shadow:0px 1px 0px #f9f9f9;  
cursor:pointer;  
opacity:0.6;  
margin-right:5px;  
  }  
  .actionsBox .menu a.open{  
background:#fff url(../open.png) no-repeat center center;  
  }  
  .actionsBox .menu a.closed{  
background:#fff url(../closed.png) no-repeat center center;  
  }  
  .actionsBox .menu a.open:hover,  
  .actionsBox .menu a.closed:hover{  
opacity:1.0;  
  }

$(function() {  
/* сообщает, если мы перетаскивали меню */  
var dragged = false;  

/* таймаут для перемещения меню, когда прокручивается окно */  
var moveBoxTimeout;  

/* делаем actionsBox перемещаемым */  
$('#actionsBox').draggable({  
start: function(event, ui) {  
dragged = true;  
},  
stop: function(event, ui) {  
var $actionsBox = $('#actionsBox');  
/*  
вычисляем текущее расстояние от вреха окна до элемента  
данное значение будет использоваться в дальнейшем, чтобы переместить меню после прокрутки  
*/  
$actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop());  
}  
});  

/*  
когда происходит нажатие кнопки мыши на чекбоксе,  
изменяем класс строки таблицы,  
и показываем меню  
*/  
$('#mytable input[type="checkbox"]').bind('click',function(e) {  
var $this = $(this);  
if($this.is(':checked'))  
$this.parents('tr:first').addClass('selected');  
else  
$this.parents('tr:first').removeClass('selected');  
showActionsBox();  
});  

function showActionsBox(){  
/* количество отмеченных элементов */  
var BoxesChecked = $('#mytable input:checked').length;  
/* обновляем количество отмеченных элементов списка */  
$('#cntBoxMenu').html(BoxesChecked);  
/*  
если есть хотя бы один отмеченный элемент, показываем меню,
в другом случае - скрываем его  
*/  
var $actionsBox = $('#actionsBox');  
if(BoxesChecked > 0){  
/*  
Положение меню вычислется как сумма текущего положения верха окна с смещения  
Если мы не перетаскивали окно, то смещение нам известно, в другом случае значение хранится в distanceTop  
*/  
if(!dragged)  
$actionsBox.stop(true).animate({'top': parseInt(15 + $(document).scrollTop()) + 'px','opacity':'1'},500);  
else  
$actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) + 'px','opacity':'1'},500);  
}  
else{  
$actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() - 50) + 'px','opacity':'0'},500,function(){  
$(this).css('left','50%');  
dragged = false;  
/* если подменю открыты, то мы их закрываем */  
var $toggleBoxMenu = $('#toggleBoxMenu');  
if($toggleBoxMenu.hasClass('closed')){  
$toggleBoxMenu.click();  
}  
});  
}  
}  

/*  
при прокручивании содержимого окна нужно установить меню в правильную позицию  
*/  
$(window).scroll(function(){  
clearTimeout(moveBoxTimeout);  
moveBoxTimeout = setTimeout(showActionsBox,500);  
});  

/* зарываем/открываем подменю для других действий */  
$('#toggleBoxMenu').toggle(  
function(e){  
$(this).addClass('closed').removeClass('open');  
$('#actionsBox .submenu').stop(true,true).slideDown();  
},  
function(e){  
$(this).addClass('open').removeClass('closed');  
$('#actionsBox .submenu').stop(true,true).slideUp();  
}  
  );  

/*  
закрываем меню:  
скрываем его, и затем удаляем элемент из and DOM,  
что означает, что оно больше не появиться  
*/  
$('#closeBoxMenu').bind('click',function(e){  
$('#actionsBox').animate({'top':'-50px','opacity':'0'},1000,function(){  
$(this).remove();  
});  
});  

/*  
пример: для всех действий (className:box_action)  
выводим сообщение в котором указываем значения отмеченных элементов  
*/  
$('#actionsBox .box_action').bind('click',function(e){  
var ids = '';  
$('#mytable input:checked').each(function(e,i){  
var $this = $(this);  
ids += 'id : ' + $this.attr('id') + ' , значение : ' + $this.val() + '\n';  
});  
alert('Отмеченные элементы:\n'+ids);  
});  
  });