Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






Очень сочное расползающееся меню на Jquery Easing и CSS



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

Мы будем использовать плагин 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!



Больше информации читайте по теме:

Красивое слайдшоу в стиле движущихся объектов на CSS и Jquery
Jquery горизонтальное навигационное меню с увеличивающимися иконками при наведении
Перекрестное выпадающее вертикально-горизонтальное универсальное анимированное меню на CSS3 и Jquery
RollOver кнопки средствами JavaScript (Jquery)
Раздвижное (выпадающее) вертикальное навигационное меню на JQuery
Стильное навигационное меню.
Всплывающая графическая подсказка на MooTools
Навигационное меню средствами jQuery



Оценить статью:

Оценивая статью, Вы подсказываете нам насколько данная информация стала полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала для понимания и простоты его изложения. Дополнительные комментари, вопросы, дополнения и замечания Вы можете указать на странице От Вас

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        


        Lev    28.07.2010 12:28:31
        

Проверка комментариев!!!


        Sasha    28.07.2010 12:29:48
        

Да, все ок. Странно...


        Anastarsia    03.06.2011 15:50:05
        

Спасибо! Очень помог урок!

78.80.31.14




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок