2 745 Скрипты / Menu & Nav

abMenu - меню с анимированным фоном

abMenu - меню с анимированным фоном

Каждый пункт меню может быть связан с фоновым изображением. Когда курсор мыши перемещается от одного пункта меню к другому, происходит смена фонового изображения. Плагин поддерживает также ещё один уровень для подменю и область infobox для дополнительного контента.

В шапке подключим необходимые скрипты:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/jаvascript" src="js/jquery.abmenu.js"></script>

HTML

Fade Animation + Submenu
Плавное появление это основная анимация используемая в плагине.
Меню может иметь любое количество элементов, стиль которых можно настроить в CSS. Каждый элемент может иметь дополнительное одно-уровневое меню. Положение Меню и Подменю можно откорректировать либо с помощью CSS, либо с помощью свойств плагина abMenu. Используя свойства menuFloat, menuTopPosition и smTopPosition (вертикальное положение подменю) можно переместить меню и подменю в желаемое положение.

Slide Animation

Хотя Fade и является основной анимацией, она все же может быть расширена за счет применения {bgOffsetLeft:XX, bgOffsetTop:YY}, для создания слайдов. Эти свойства определяют начальное положение фонового изображения и могут иметь, как положительное, так и отрицательное значение. Кроме того, используя свойства abMenu можно сделать смену слайдов справа налево.

<div id="menu2" class="abmenu">
    <ul>
        <li bgsrc="backgrounds/b1.jpg"><a href="#home">Главная</a></li>
        <li bgsrc="backgrounds/b2.jpg"><a href="#about">О нас</a></li>
        <li bgsrc="backgrounds/b3.jpg"><a href="#portfolio">Портфолио</a></li>
        <li bgsrc="backgrounds/b4.jpg"><a href="#blog">Дневник</a></li>
        <li bgsrc="backgrounds/b5.jpg"><a href="#contact">Контакты</a></li>
    </ul>
</div>

Shift & Fade Animation + TextBox
В этом примере используется слайд анимация с небольшим смещением, что создает эффект плавного движения по диагонали. Кроме того, в данном примере, используется sliding box - контейнер с содержащимся внутри контентом,который будет появляться после наведения курсора мыши на пункт меню.

Плагин предлагает 18 свойств для тонкой настройки, вот такие значения установлены по умолчанию:

  • menuTopPosition:undefined,
  • menuFloat:undefined,
  • menuLeaveDelay:1,
  • bgOffsetLeft:'0px',
  • bgOffsetTop:'0px',
  • bgAnimationTime:0.5,
  • bgStartDelay:0,
  • bgEasing:'easeInOutCubic',
  • smSlideUpTime:0.5,
  • smSlideUpEasing:'easeOutCubic',
  • smSlideDownTime:0.2,
  • smSlideDownEasing:'easeOutCubic',
  • smTopPosition:0.74,
  • infoShowTime:0.5,
  • infoShowDelay:0.0,
  • infoShowEasing:'easeOutCubic',
  • infoHideTime:0.3,
  • infoHideEasing:'easeInCubic'

CSS

JS

Вызовем наш плагин:

$(document).ready(function(){
    $('#menu1').abmenu({textShowDelay:0.7});
});
$(document).ready(function(){
    $('#menu2').abmenu({bgOffsetTop: '-100px',menuTopPosition:0.1,menuFloat:'left'});
});
$(document).ready(function(){
    $('#menu3').abmenu({bgOffsetLeft:'-7px',bgOffsetTop:'-7px',bgAnimationTime:1,smTopPosition:'auto',menuTopPosition:0.2});
});
Скачать 820Загрузок 212,2 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи