Идея этого навигационного меню основана на другом обучающем уроке (Beautiful Background Image Navigation with jQuery), в котором реализован похожий эффект.
Отличные фотографии были предоставлены Маноэлем Петри (Manoel Petry)
Ссылка на канал фотографа в сервисе Flickr
Официальный веб-сайт фотографа
Изображения распространяются под лицензионным соглашением Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Generic License.
Взгляните на эти примеры (вы также можете переходить на другие демо-варианты посредством меню):
01 Показать/спрятать
02 Затухание
03 Продолжительное затухание
04 Скольжение в сторону
05 Скольжение в сторону (резкое)
06 Вверх/Вниз
07 Продолжительное смещение вверх/вниз
08 Промежуточное смещение вверх/вниз
09 Промежуточное смещение вверх/вниз (2)
10 Продолжительное промежуточное смещение вверх/вниз
Структура кода HTML состоит из «sbi_container», в котором содержатся все панели:
<div id="sbi_container" class="sbi_container">
<div class="sbi_panel" data-bg="images/1.jpg">
<a href="#" class="sbi_label">About</a>
<div class="sbi_content">
<ul>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
</ul>
</div>
</div>
<div class="sbi_panel" data-bg="images/2.jpg">
...
</div>
...
</div>
Атрибут «data-bg» содержит в себе путь к фоновому изображению, которое появляется при наведении курсора мыши на заголовок соответствующей панели.
Давайте взглянем на пример использования промежуточного вертикального смещения вверх/вниз:
$('#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
Надеемся, что вам понравится данное меню, и вы найдете ему применение в будущих проектах! Наслаждайтесь!