Меню, которое отодвигает контент

Иногда заказчики просят сделать горизонтальное меню, которое отодвигает контент, при раскрытии. Раньше я перемещал выпадающую часть за меню и показывал его таким образом. Все работало отлично, но минус этого способа в том, что для вроде бы простой реализации нужно было написать много javascript кода.

Появилась идея реализовать это эффект по-другому.

1. HTML

Ничего не меняем, обычное меню:

<ul class="nav">
	<li><a href="/">Lorem</a></li>
	<li>
		<a href="/">Lorem</a>
		<ul>
			<li><a href="/">Lorem ipsum</a></li>
			<li><a href="/">Lorem ipsum</a></li>
			<li><a href="/">Lorem ipsum</a></li>
		</ul>
	</li>
	...
</ul>

2. CSS

Ставим контейнеру высоту и “overflow:hidden”.

.nav{
	overflow:hidden;
	height:24px;
	position:relative;
}

Подменю вешаем на “position:absolute” и скрываем с помощью “visibility:hidden”.

.nav ul{
	position:absolute;
	left:0;
	right:0;
	top:24px;
	visibility:hidden;
}

3. Javascript

Перебираем элементы первого уровня и узнаем высоты их подменю.

$nav.children('li').each(function(){
	var $this = $(this),
		height = $this.children('ul').outerHeight();	
	...
});

На hover по элементу ставим меню нижний padding в размере высоты нужного нам подменю, которое показываем.

...
$this.hover(function(){
	$this.addClass('over');
	$nav.css({paddingBottom:height});
}, function(){
	$this.removeClass('over');
	$nav.css({paddingBottom:0});
});
...

Вот собственно и все. Готовый результат можно посмотреть тут. Жду критику и Ваши варианты.

Автор: nagorskiy88

Источник