2 512 Скрипты / 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 (вертикальное положение подменю) можно переместить меню и подменю в желаемое положение.

<div id="menu1" class="abmenu">
    <ul>
        <li bgsrc="backgrounds/b4.jpg"><a href="#home">Главная</a></li>
        
        <li bgsrc="backgrounds/b5.jpg"><a href="#about">О нас</a>
            <ul>
                <li><a href="#art">Искусство</a></li>
                <li><a href="#beauty">Красота</a></li>
                <li><a href="#coffee">Кофе</a></li>
            </ul>
        </li>
        <li bgsrc="backgrounds/b3.jpg"><a href="#portfolio">Портфолио</a>
            <ul>
                <li><a href="#style">Стиль</a></li>
                <li><a href="#fashion">Мода</a></li>
                <li><a href="#experience">Опыт</a></li>
            </ul>
        </li>
        <li bgsrc="backgrounds/b2.jpg"><a href="#blog">Дневник</a>
            <ul>
                <li><a href="#blog1">Блог 1</a></li>
                <li><a href="#blog2">Блог 2</a></li>
            </ul>
        </li>
        <li bgsrc="backgrounds/b1.jpg"><a href="#contact">Контакты</a>
            <ul>
                <li><a href="mailto: mail@example.com">Почта</a></li>
            </ul>
        </li>
    </ul>
</div>

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'
<div id="menu3" class="abmenu">
    <ul>
        <li bgsrc="backgrounds/bw4.jpg"><a href="#home">Главная</a></li>
        <li bgsrc="backgrounds/bw2.jpg"><a href="#about">О нас</a>
            <span>
             <h3>Информация</h3>
             <p><img style="float:left; margin: 5px;" src="backgrounds/bw1_small.jpg"/>
             Бруклинский мост (англ. Brooklyn Bridge) — один из старейших висячих мостов в США, его длина составляет 1825 метров, он пересекает пролив Ист-Ривер и соединяет Бруклин и Манхэттен в городе Нью-Йорк. Боковые полосы используются автомобилями, а средняя, на значительном возвышении, пешеходами и велосипедистами.
             </p>
             </span>
        </li>
         <li bgsrc="backgrounds/bw3.jpg"><a href="#portfolio">Портфолио</a>
            <ul class="black">
            <li style="width: 120px;">
                <p style="float:left;">
                    <a href="#art">Искусство</a><br/>
                    <a href="#fasion">Мода</a><br/>
                    <a href="#design">Дизайн</a><br/>
                </p>
                    <p style="float:right;">
                    <a href="#style">Стиль</a><br/>
                    <a href="#beauty">Красота</a><br/>
                </p>
            </li>
            </ul>            
            <span>  
            <h3>Интересно</h3>
                <p><img style="float:left; margin: 5px;" src="backgrounds/bw2_small.jpg"/>
                В начале 2006 года рабочие, проводившие ремонт Бруклинского моста, обнаружили секретное бомбоубежище, созданное в 1950-е годы XX века, в самый разгар холодной войны. Вход в него был замаскирован в стене опоры моста со стороны Манхэттена. В тайнике были найдены значительные припасы — 350 тыс. металлических банок с галетами, воздухоочистительные установки, одеяла...
                </p>
            </span>
        </li>
        <li bgsrc="backgrounds/bw1.jpg"><a href="#contact">Контакты</a>
            <ul class="black">
                <li><a href="mailto: contact@domain.com">Почта</a></li>
            </ul>
            <span>
                <h3>Интересно</h3>
                <p>Мост фигурирует и играет определённую роль в сюжете фильмов как замечательный памятник архитектуры города.</p>
            </span>
        </li>
    </ul>
</div>

CSS

/* menus adjustments */
#menu1 ul li ul a{
    color: #444;
}
#menu2 a{
    font-family: Tahoma,sans;
    font-size: 18px;
    color: #fff;
    background-color: #333;
    text-decoration: none;
    padding: 0 3px;
}
#menu2 a:hover{
    color: #000;
    background-color: #fff;
}
#menu3{
    width: 800px;
    height: 200px;
}
#menu3 a{
    color: #fff;
    text-decoration: none;
}
#menu3 a:hover{
    text-decoration: line-through;
}
#menu3 .black{
    background-image:url(images/black1px.png);
}
#menu3 #infobox{
    color: #f1f1f1;
    font-size: 12px;
    line-height: 15px;
}
/* menu */
.abmenu ul,.abmenu li {
    margin:0;
    padding:0;
}
.abmenu {
    overflow:hidden;
    position:relative;
    width:900px;
    height:100px;
}
.abmenu ul {
    position:relative;
    float:right;
    z-index:20;
    list-style:none outside none;
    padding-bottom:26px;
    padding-top:40px;
    margin:0 10px;
}
.abmenu ul li {
    float:left;
    padding:2px 10px;
}
.abmenu ul li span {
    display:none;
}
.abmenu ul li a {
    font-family:'Architects Daughter', serif;
    font-size:22px;
    font-weight:700;
    text-decoration:none;
    color:#fff;
    line-height:30px;
    outline:none;
}
.abmenu ul li ul {
    display:block;
    position:absolute;
    float:none;
    top:100%;
    left:10px;
    background-image:url(images/white1px.png);
    padding:0;
}
.abmenu ul li ul li a {
    font-family:Tahoma, sans;
    font-size:11px;
    line-height:20px;
    font-weight: normal;
    color:#fff;
}
.abmenu #front-image {
    position:absolute;
    z-index:10;
}
.abmenu #back-image {
    position:absolute;
    z-index:5;
}
.abmenu .infobox {
    position:relative;
    z-index:15;
    background-image:url(images/black1px.png);
    height:100%;
    top:100%;
    color:#fff;
    font-size:15px;
    font-family:Arial, sans-serif;
    overflow:inherit;
    padding:0 10px;
}
.abmenu ul li a:hover,.abmenu ul li ul li a:hover {
    text-decoration:underline;
}

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});
});
Скачать 806Загрузок 212,2 Kb
Демо

Комментарии

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

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