Вертикальное прокручивающееся меню

В данном уроке мы создадим вертикальное меню, которое прокручивается движениями курсора мыши. При наведении на пункт меню выводится текстовая подсказка.

 

Создаем разметку

Нужно создать необходимую структуру HTML. Естественное желание использовать для меню неупорядоченный список в качестве контейнера, придется оставить -  в Internet Explorer при введении расстояния между пунктами списка проявляется ошибка. Поэтому будет использоваться элемент div. Также необходимо задействовать атрибут title у каждой ссылки, в котором размещается текст всплывающей подсказки. Internet Explorer игнорирует атрибут title, поэтому будет также использовать текст в img alt .

<div class="sc_menu_wrapper">
	<div class="sc_menu">
	    <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a>
	    <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a>
	    <a title="jQuery" href="/"><img src="/images/3.jpg" alt="jQuery"/></a>		
	    <a title="CSS" href="/"><img src="/images/4.jpg" alt="CSS"/></a>
	    <a title="Вертикаль" href="/"><img src="/images/5.jpg" alt="Вертикаль"/></a>
	    <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a>
	    <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a>
	    <a title="jQuery" href="/"><img src="/images/3.jpg" alt="jQuery"/></a>
	    <a title="Навигация" href="/"><img src="/images/4.jpg" alt="Навигация" /></a>
	    <a title="JavaScript" href="/"><img src="/images/5.jpg" alt="JavaScript"/></a>
	    <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a>
	    <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a>
	    <a title="JavaScript" href="/"><img src="/images/3.jpg" alt="Javascript"/></a>		
	</div>
</div>

 

Добавляем базовые стили CSS

div.sc_menu_wrapper {
	position: relative; 	
	height: 500px;
	/* Делаем больше, чем фотография, так как нужно место для полоски прокрутки. */
	width: 160px;
	
	margin-top: 30px;
	overflow: auto;
}
div.sc_menu {
	padding: 15px 0;
}
.sc_menu a {
	display: block;
	margin-bottom: 5px;
	width: 130px;
	
	border: 2px rgb(79, 79, 79) solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;		
	
	/* Когда нет изображений */
	color: #fff;
	background: rgb(79, 79, 79);	
}
.sc_menu a:hover {
	border-color: rgb(130, 130, 130);
	border-style: dotted;
}
.sc_menu img {
	display: block;
	border: none;
}

Свойство overflow используется для добавления полоски прокрутки к внешнему контейнеру div. Также нам нужно свойство position для позиционирования наших подсказок. Свойства -webkit-border-radius и -moz-border-radius используются для формирования скругленных углов для Firefox, Safari и Chrome.

 

jQuery

Сначала нужно присоединить jQuery к нашему документу. Будем использовать библиотеку с сайта Google API, так как часто она уже имеется в кэше браузера, что сократит время загрузки страницы.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

$() - это короткая запись для $(document).ready(), самой используемой функции jQuery. Она позволяет привязывать выполнение скрипта к завершению загрузки DOM документа. Функция makeScrollable содержит весь код, который делает наше меню прокручиваемым.

function makeScrollable(wrapper, scrollable){
}

$(function(){   
  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});


Теперь добавим код, который будет выводить индикатор во время загрузки изображений. Функция enable будет запускаться, когда все изображения загружены.

function makeScrollable(wrapper, scrollable){
	// Получаем элементы jQuery
	var wrapper = $(wrapper), scrollable = $(scrollable);
	
	// Скрываем изображения, пока они не загружены
	scrollable.hide();
	var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper);
	
	// Запускаем функцию, которая проверяет загрузку всех изображений
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;
		
		// Подсчитываем количество загруженных изображений
		images.each(function(){
			if (this.complete) completed++;	
		});
		
		if (completed == images.length){
			clearInterval(interval);
			// Таймаут добавлен для устранения проблем с Chrome
			setTimeout(function(){
				
				loading.hide();
				// Удаляем полоску прокрутки
				wrapper.css({overflow: 'hidden'});						
				
				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 1000);	
		}
	}, 100);

Также зададим стиль для индикатора загрузки:

.sc_menu_wrapper .loading {
  position: absolute;
  top: 50px;
  left: 10px;

  margin: 0 auto;
  padding: 10px;

  width: 100px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;

  text-align: center;
  color: #fff;
  border: 1px solid rgb(79, 79, 79);
  background: #1F1D1D;
}

 

Делаем меню прокручиваемым

Мы будем использовать событие mousemove для функции, которая запускается при перемещении курсора мыши по меню.

Атрибут события pageY содержит координату по вертикали курсора мыши относительно всего документа. Но нам нужна координата относительно внешнего контейнера div. Поэтому мы вычитаем wrapperOffset.top.

Меню должно перемещаться быстрее, чем курсор мыши. Поэтому мы используем пропорцию (scrollableHeight - wrapperHeight) / wrapperHeight.

А вот код функции enable:

function enable(){
		// Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши
		var inactiveMargin = 99;					
		// Кэшируем параметры для повышения производительности
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Используем наружную высоту для включения отступов
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		
		//Когда пользователь перемещает курсор мыши по меню
		wrapper.mousemove(function(e){
			var wrapperOffset = wrapper.offset();
		
			// Прокручиваем меню
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			if (top < 0){
				top = 0;
			}			
			wrapper.scrollTop(top);
		});
		
		
	}


 

 

Задаем стили для подсказок

Код CSS для стилей подсказок:

/* Стили для подсказок */
.sc_menu_tooltip {
	display: block;
	position: absolute;
	
	padding: 6px;
	font-size: 12px;	
	color: #fff;
	
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	border: 1px solid rgb(79, 79, 79);
	background: rgb(0, 0, 0);
	/* Делаем фон немного прозрачным для браузеров, которые поддерживают rgba */	
	background: rgba(0, 0, 0, 0.5);
}


И вносим код в тело функции enable, который будет перемещать подсказку и менять в ней текст. Использование события jQuery hover ухудшает производительность. Поэтому используется другой подход. Код снабжен достаточно подробными комментариями и разобраться в нем будет просто.

function enable(){
		// Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши
		var inactiveMargin = 99;					
		// Кэшируем параметры для повышения производительности
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Используем наружную высоту для включения отступов
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		// Не будем кэшировать wrapperOffset, так как она поменяется при изменении окна просмотра
		// Можно использовать событие onresize, но овчинка не стоит выделки
		// var wrapperOffset = wrapper.offset();
		
		// Создаем невидимую подсказку
		var tooltip = $('<div class="sc_menu_tooltip"></div>')
			.css('opacity', 0)
			.appendTo(wrapper);
	
		// Сохраняем заголовки меню
		scrollable.find('a').each(function(){				
			$(this).data('tooltipText', this.title);				
		});
		
		// Удаляем подсказки по умолчанию
		scrollable.find('a').removeAttr('title');		
		// Удаляем подсказки по умолчанию в IE
		scrollable.find('img').removeAttr('alt');	
		
		var lastTarget;
		//Когда пользователь перемещает курсор мыши по меню
		wrapper.mousemove(function(e){
			// Сохраняем цель
			lastTarget = e.target;

			var wrapperOffset = wrapper.offset();
		
			var tooltipLeft = e.pageX - wrapperOffset.left;
			// Не даем подсказке выходить за рамки меню.
			// Так как свойство overflow имеет значение hidden, мы не сможем их увидеть. 
			tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75);
			
			var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
			// Перемещаем подсказку под курсор мыши, когда мы находимся в верхней части меню
			if (e.pageY - wrapperOffset.top < wrapperHeight/2){
				tooltipTop += 80;
			}				
			tooltip.css({top: tooltipTop, left: tooltipLeft});				
			
			// Прокручиваем меню
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			if (top < 0){
				top = 0;
			}			
			wrapper.scrollTop(top);
		});
		
		// Устанавливаем интервал, который помогает решить проблему производительности в IE
		var interval = setInterval(function(){
			if (!lastTarget) return;	
										
			var currentText = tooltip.text();
			
			if (lastTarget.nodeName == 'IMG'){					
				// Данные привязываются к ссылке, а не к изображению
				var newText = $(lastTarget).parent().data('tooltipText');

				// Выводим подсказку с новым текстом
				if (currentText != newText) {
					tooltip
						.stop(true)
						.css('opacity', 0)	
						.text(newText)
						.animate({opacity: 1}, 1000);
				}					
			}
		}, 200);
		
		// Скрываем подсказку, когда курсор мыши покидает меню
		wrapper.mouseleave(function(){
			lastTarget = false;
			tooltip.stop(true).css('opacity', 0).text('');
		});			
		
		/*
		//Использование события hover приводит к проблемам с производительностью
		scrollable.find('a').hover(function(){
			tooltip
				.stop()
				.css('opacity', 0)
				.text($(this).data('tooltipText'))
				.animate({opacity: 1}, 1000);
	
		}, function(){
			tooltip
				.stop()
				.animate({opacity: 0}, 300);
		});
		*/			
	}


Готово!

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

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

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



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

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