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

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, ...)

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

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

НБУ курс евро






CSS - вертикальное выезжающее меню на Jquery



Всем добрый день! =). Мы решили продемонстрировать что-то вроде небольшого виджета, который может быть использован, как последние статьи.

Основная идея состоит, чтобы показать фиксированный список в правой части экрана, с некоторыми картинками. Когда пользователь наводит курсор на картинки, то выскользнет заголовок и две ссылки, одна из них соответствует самой статье и 1 для демонстрации.

Перед тем как использовать это нам конечно же, хочется поделиться ею с вами :) Demo, Исходники

Итак, начнем!

HTML структура будет состоят из списка с некоторыми вложенными элементоми в внутри.

<div id="rp_list" class="rp_list">
    <ul>
    <li>
        <div>
            <img src="images/1.jpg" alt=""/>
            <span class="rp_title">Post Title</span>
            <span class="rp_links">
            <a target="_blank" href="#">Article</a>
            <a target="_blank" href="#">Demo</a>
            </span>
        </div>
    </li>
    ...
    </ul>
    <span id="rp_shuffle" class="rp_shuffle"></span>
</div>

В JavaScript мы определим, что мы показываем только 5 элементов одновременно. Конечно, необходимо заменить # с вашей ссылки.

Давайте взглянем на css стили.

Мы начнем с общих характеристик стилей:

.rp_list {
	font-family:Verdana, Helvetica, sans-serif;
	position:fixed;
	right:-220px;
	top:40px;
	margin:0;
	padding:0;
}

Как видите, список будет иметь фиксированное положение, всегда находится в том же месте, когда пользователь прокручивает страницу. Мы собираемся установить в право на отрицательное значение, скрывая весь список.

Теперь определим стиль Shuffle:

span.rp_shuffle{
	background:#222 url(../images/shuffle.png) 
	    no-repeat 10px 50%;
	width:28px;
	height:14px;
	display:block;
	margin:10px 0px 0px 20px;
	cursor:pointer;
	padding:4px;
	border:1px solid #000;
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}

//Список будет иметь следующий стиль:
.rp_list ul{
	margin:0;
	padding:0;
	list-style:none;
}

//Список предметов, не будет показана изначально:
.rp_list ul li{
	width: 240px;
	margin-bottom:5px;
	display:none;
}

//Наши основные элементы будут иметь следующий стиль:
.rp_list ul li div{
	display: block;
	line-height:15px;
	width: 240px;
	height: 80px;
	background:#333;
	border:1px solid #000;
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}

//Миниатюры будут размером 70 × 70 
//пикселей, и мы добавим тень к ним:
.rp_list ul li div img{
	width:70px;
	border:none;
	float:left;
	margin:4px 10px 0px 4px;
	border:1px solid #111;
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;
}

//Название будет иметь элементы тени:
span.rp_title{
	font-size:11px;
	color:#ddd;
	height:46px;
	margin:4px 0px 0px 20px;
	display:block;
	text-shadow:1px 1px 1px #000;
	padding-top:3px;
	background:#222;
	-moz-box-shadow:0px 0px 5px #000 inset;
	-webkit-box-shadow:0px 0px 5px #000 inset;
	box-shadow:0px 0px 5px #000 inset;
}

//Стили отвечающие за ссылки и кнопки 
//будут иметь следующий стиль:
span.rp_links{
	width:195px;
	height:8px;
	padding-top:2px;
	display:block;
	margin-left:42px;
}
span.rp_links a{
	background: #222 url(../images/bgbutton.png) repeat-x;
	padding: 2px 18px;
	font-size:10px;
	color: #fff;
	text-decoration: none;
	line-height: 1;
	-moz-box-shadow: 0 1px 3px #000;
	-webkit-box-shadow: 0 1px 3px #000;
	box-shadow:0 1px 3px #000;
	text-shadow: 0 -1px 1px #222;
	cursor: pointer;
	outline:none;
}

span.rp_links a:hover{
	background-color:#000;
	color:#fff;
}

И это всё - со стилями закончили. Давайте добавим волшебство!

Основная идея заключается в первую очередь показать 5 пунктов слайда. Это аккуратный эффект, и чтобы показать пользователю, что сдесть что-то происходит, и что он может взаимодействовать с этим элементом нам нужно применить небольшое усилие =).

Mы пока сделаем это слайд, во всю ширину, обнажив названия и ссылки.

Как вы заметили, мы добавили все наши соответствующие элементы в структуре HTML и из этих пунктов, мы в случайном порядке выбирать 5. Этот метод не гарантирует нам, что следующий набор элементов, не будет повторятся, но это простое решение.

Мы добавим следующие функции JQuery:

$(function() {
	/**
	* Список элементов
	*/
	var $list = $('#rp_list ul');
	/**
	* число соответствующих элементов
	*/
	var elems_cnt = $list.children().length;

	/**
	* показать первый набор элементов.
	* 200 является началом левого края для элементов списка
	*/
	load(200);

	function load(initial){
		$list.find('li').hide().andSelf().find('div').
		    css('margin-left',-initial+'px');
		var loaded	= 0;
		//показать 5 случайных сообщений в списке.
		//Убедимся в том, чтобы они не повторялись
		while(loaded < 5){
		  var r = Math.floor(Math.random()*elems_cnt);
		  var $elem = $list.find('li:nth-child('+ (r+1) +')');
		  if($elem.is(':visible'))
			continue;
		  else
			$elem.show();
		  ++loaded;
		}
		//оживить их
		var d = 200;
		$list.find('li:visible div').each(function(){
			$(this).stop().animate({
				'marginLeft':'-50px'
			},d += 100);
		});
	}

	/**
	* Заставляем элементы списка выскальзывать
	*/
	$list.find('li:visible').live('mouseenter',function () {
		$(this).find('div').stop().animate({
			'marginLeft':'-220px'
		},200);
	}).live('mouseleave',function () {
		$(this).find('div').stop().animate({
			'marginLeft':'-50px'
		},200);
	});

	/**
	* При нажатии на кнопку,
	* Показывать 5 случайных сообщений
	*/
	$('#rp_shuffle').unbind('click')
		.bind('click',shuffle)
		.stop()
		.animate({'margin-left':'-18px'},700);

	function shuffle(){
		$list.find('li:visible div').stop().animate({
			'marginLeft':'60px'
		},200,function(){
			load(-60);
		});
	}
});

Ну вот и все!

Надеемся, вам понравился урок, и вы его сочли полезным!



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

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



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

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

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


            
        




Имя:  


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



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



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