Где в этом коде -
задание ширины в пикселах?

Какая уже разница. Это те же яйца с использованием UI что я нарыл и выложил выше, только сбоку. Вот без UI бы...

Lutsk,
можно не display: none задавать, а просто изначально уводить свойствами right или margin-right этот блок за пределы окна, а по кнопке анимировать выезд/заезд. Такой прием часто используют.

Действительно выезжает. Только как при повторном клике на a.search-toggle вернуть блоку #searchCollapse обратно left:100%?

$('.search-toggle').click(function(){
	$('#searchCollapse').animate({left: '0%'});
	$(this).toggleClass("active");
});

Lutsk,
очень просто, делайте проверку на класс active. Как-то так (схематично)

if($(this).hasClass('active')) {
задвигаем элемент
} else {
выдвигаем
}

Ок, в итоге вышло:

$('.search-toggle').click(function(){
	if($(this).hasClass('active')) {
		$('#searchCollapse').animate({left: '100%'}, 700);
		$(this).removeClass("active");
	} else {
		$('#searchCollapse').animate({left: '0%'}, 700);
		$(this).toggleClass("active");
	}
});

vettel, спасибо за подсказки!