Плагин jQuery для меню со сменяющимся фоном

На нашем сайте есть урок "Навигация по сайту со сменой фона", в котором строится оригинальное меню для сайта. Данный плагин является развитием кода, представленного в уроке. Добавлены различные эффекты переходов между пунктами меню.

Меню со сменяющимся фоном

Как использовать

HTML структура меню представляет собой следующий код:

<div id="sbi_container" class="sbi_container">
	<div class="sbi_panel" data-bg="images/1.jpg">
		<a href="#" class="sbi_label">Пункт 1</a>
		<div class="sbi_content">
			<ul>
				<li><a href="#">Подпункт</a></li>
				<li><a href="#">Подпункт</a></li>
				<li><a href="#">Подпункт</a></li>
			</ul>
		</div>
	</div>
	<div class="sbi_panel" data-bg="images/2.jpg">
		...
	</div>
	...
</div>

Атрибут data-bg содержит путь к фоновому рисунку, который соответствует пункту меню.

Само меню запускается следующим кодом JavaScript:

$('#sbi_container').bgImageMenu({
	defaultBg	: 'images/default.jpg',
	menuSpeed	: 300,
	border		: 1,
	type		: {
		mode		: 'verticalSlideAlt',
		speed		: 450,
		easing		: 'easeOutBack'
	}
});

Можно использовать следующие параметры:

defaultBg
изображение, которое выводится, когда курсор мыши отсутствует в области меню
pos
если не установлено значение defaultBg, то pos указывает, какую панель надо показывать
width
ширина контейнера и изображений (они должны иметь одинаковый размер)
height
высота контейнера и изображений
border
расстояние между панелями
menuSpeed
скорость проскальзывания пунктов меню
mode
тип анимации (можно использовать def | fade | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt)
speed
скорость выполнения анимации панелей
easing
эффект перехода для анимаций
seqfactor
задержка между выполнением анимаций для типов seqFade | seqHorizontalSlide | seqVerticalSlide | seqVerticalSlideAlt

Смотрите примеры использования в исходниках.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^