—»     —»   Меню со скользящим фоном на jQuery
  Раздел: Меню и Навигация   Комментариев: 2  

Меню со скользящим фоном на jQuery



Сегодня мы хотим поделиться с вами еще одним меню, разработанным посредством jQuery. Это меню предлагает вам несколько панелей, за каждую из которых отвечает отдельное фоновое изображение, которое будет отображено при наведении на определенный заголовок. Также стоит отметить выезжающие подменю. У вас будет возможность устанавливать собственные настройки: размер изображения, эффект при наведении, а также вручную устанавливать положения меню по умолчанию.

Идея этого навигационного меню основана на другом обучающем уроке (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

Надеемся, что вам понравится данное меню, и вы найдете ему применение в будущих проектах! Наслаждайтесь!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 7655   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 июля 2011 @ 13:20
Написал: NeuroFighter — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличная статья. Полезное меню. Подбросили мне идею wink Спасибо
Комментарий #2: 17 июля 2011 @ 13:22
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
NeuroFighter, пожалуйста ... плюсуйте Google +1 вначале статьи, если считаете материал полезным smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930