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

Мы будем использовать плагин jQuery Easing и красивые фотографии tibchris.

Для структуры HTML мы будем использовать неупорядоченный список, где каждый пункт меню будет содержать пункты главной ссылки и Div элемент подменю:

<ul id="sdt_menu" class="sdt_menu">
	<li>
		<a href="#">
			<img src="images/1.jpg" alt=""/>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
		<div class="sdt_box">
			<a href="#">Websites</a>
			<a href="#">Illustrations>/a>
			<a href="#">Photography>/a>
		</div>
	</li>
	...
</ul>

Если нет меню, Div могут быть просто опущены. Изображение не будет показано в начале так как мы установим его ширину и высоты на 0 в CSS. Давайте взглянем на этот стиль.

Мы начнем стиль маркированного списка:

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", 
	    "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

//Мы хотим, удалить какой-либо стандартный 
//text-decoration и наброски:

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

//Стили для основных элементов, где у нас есть два span
//название и описание будут в стиле следующим образом:

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent 
	    url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Обратите внимание, что z-index: мы будет определять порядок наложения на все важные элементы, так что правильно остановиться на высоте.

Мы используем фоновое изображение, что создает эффект, как стекло с полупрозрачным градиентом. При использовании некоторой фоновой картинки (например, дрова в демо) она создает красивый эффект. Убедитесь в этом, чтобы опробовать различные текстуры - это выглядит просто потрясающе!

Вы также можете играть с тенями - изменение значения 2px 2px 6px #000 что даст вам очень красивый эффект.

Изображение будет в стилях далее:

ul.sdt_menu li a img
{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

Мы хотим оживить изображение, поэтому мы позиционируем абсолютно использованием "bottom" в качестве точки отсчета. Мы также аккуратно добавим тень. Первые два значения равны нулю, что делает тень равномерной по всему изображению. Мы использовали это, ссылке элемента. Даже эти же тени можно использовать как фокус, когда вы хотите создать свечение границы. Преимущество в том, что тени на самом деле не существует - вам не нужно рассматривать его в ширину или высоту расчёт в элементах. Текущий недостаток в том, что CSS3 не поддерживается в IE.

ul.sdt_menu li span.sdt_wrap
{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

Если у вас есть большие тексты, то вам нужно адаптировать эти ценности. Убедитесь в том, что адаптированный значения сочетается с анимацией значения в JavaScript.

Далее, мы определяем стиль, который скользит вниз. Мы даем ее высота от 0 до положения, которое он уже в пути, что нам нужно увеличить высоту в анимации:

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

//Общие стили для пролетов и ссыллок в
//ящиках будет заключаться в следующем:

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

//Название и описание будут в следующих стилях:

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

Подменю окно первоначально будет скрыто под серый ящик. Затем мы оживим его вправо или влево, в зависимости от того, где мы находимся. Если мы, например, наведиём на последний элемент, то мы его оживим с левой стороны, во всех других случаях мы хотим оживить ее с правой стороны.

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

//Первая ссылка в меню должны иметь верхнее поле:

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

И это всё стили! Давайте добавим волшебство!

Когда мы водим с помощью мыши на элемент списка нам нужно увеличить изображение, и покажем, как, sdt_active и sdt_wrap. Если элемент имеет подменю (sdt_box), то сдвиньте его в сторону. Если элемент является последним в меню, мы сдвиним подменю с левой стороны, в противном случае вправо:

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().
				    length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().
				    animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

И всё! Мы надеемся, что вам понравился этот маленький урок и вы найдёте его полезным!

P.S. Менюшка выглядит очень сочно в Google Chrome!