Выскальзывающее меню на CSS и jQuery

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

 

Разметка

Для 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">Портфолио</span>
    <span class="sdt_descr">Мои работы</span>
   </span>
  </a>
  <div class="sdt_box">
   <a href="#">Веб сайты</a>
   <a href="#">Иллюстрации</a>
   <a href="#">Фотографии</a>
  </div>
 </li>
 ...
</ul>

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

 

CSS

Начнем задавать стили для неупорядоченного списка:

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

Также мы сбросим свойства text-decoration и outline для всех ссылок в нашем меню:  

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

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

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


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

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

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

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

Также можно изменять тени – установка значений 2px 2px 6px #000 inset создает прелестный эффект.

Изображения будут иметь следующие стили:

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” в качестве исходной точки. Также используются тени. Первые два значения 0 устанавливают равномерное распределение тени вокруг изображения. Мы используем такие тени в элементе ссылки. Такое распределение тени можно применять тогда, когда нужно организовать светлую границу. При этом не нужно беспокоиться о вычислении высоты и ширины элемента. Недостаток такого использования тени заключается в том, что CSS3 не поддерживается в IE.

Контейнер для элементов span заголовка и описания будет иметь следующий стиль:

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

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

Определим стили для серого прямоугольника, который будет выскальзывать вниз. Установим для него высоту 0 и будем позиционировать его таким образом, чтобы нужно было только увеличивать высоту при анимации.

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:190px;
	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;
}

Стили для элементов span и ссылок в прямоугольниках:

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; /*Для тупого IE7*/
	font-size:10px;
	letter-spacing:1px;
}

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

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:190px;
	overflow:hidden;
	height:190px;
	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;
}

 

JavaScript

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

$(function() {
    $('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'190px',
				'height':'190px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
		     .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
		     .stop(true)
			 .animate({'height':'190px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '190px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-190px';
				$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);
	});
 });


Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mvDKf2LcMFo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Выскальзывающее меню на CSS и jQuery | | 2012-06-29 06:31:48 | | Статьи Web-мастеру | | В данном уроке мы создадим интересное выскальзывающее меню. Идея заключается в том, что прямоугольник с пунктом меню при выборе выскальзывает вниз, а миниатюра выскакивает наверх. В меню есть также | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: