JQuery :: Красивая навигация с динамическим фоном

130510

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

Кроме того, сверху фона будут расположены подменю, которые выполнены на полупрозрачном фоне трех разных цветов.

Также мы будем использовать Background-Position Animation Plugin, написанный Александром Фаркасом.

Фотографии, которые мы будем использовать взяты из B&W collection.

В скрипте будет немного CSS3, но оно не будет сказываться на поддержку кода браузерами. И вообще, кроссбраузерность у этого скрипта достаточно хорошо соблюдена. Он прекрасно работает в Google Chrome, Firefox, Opera, Safari, IE8, IE7 и даже в IE6.

Итак, давайте приступать к работе!

Разметка

The CSS

.menuWrapper{
	    font-family: "Trebuchet MS", Arial, sans-serif;;
	    font-size: 15px;
	    font-style: normal;
	    font-weight: normal;
	    text-transform:uppercase;
	    letter-spacing: normal;
	    line-height: 1.45em;
	    position:relative;
	    margin:20px auto;
	    height:542px;
	    width:797px;
	    background-position:0 0;
	    background-repeat:no-repeat;
	    background-color:transparent;
	}

ul.menu{
	    list-style:none;
	    width:797px;
	}
ul.menu > li{
	    float:left;
	    width:265px;
	    height:542px;
	    border-right:1px solid #777;
	    background-repeat:no-repeat;
	    background-color:transparent;
	}
ul.menu > li.last{
	    border:none;
	}

Селектор «>» применяется только к Li элементам первого слоя и не будет применяться ни к одномц из пунктов подменю. Мы присвоили последнему элементу Li класс «last», чтобы удалить правую границу. Следующие три класса определяют фоновые изображения:

	.bg1{
	    background-image: url(../images/1.jpg);
	}
	.bg2{
	    background-image: url(../images/2.jpg);
	}
	.bg3{
	    background-image: url(../images/3.jpg);
	}

Давайте определим связь элементов в списке первого слоя:

	ul.menu > li > a{
	    float:left;
	    width:265px;
	    height:50px;
	    margin-top:450px;
	    text-align:center;
	    line-height:50px;
	    color:#ddd;
	    background-color:#333;
	    letter-spacing:1px;
	    cursor:pointer;
	    text-decoration:none;
	    text-shadow:0px 0px 1px #fff;
	}

Чтобы разместить текст ссылки посередине мы должны задать высоту строки, равную высоте элемента.

	ul.menu > li ul{
	    list-style:none;
	    float:left;
	    margin-top:-180px;
	    width:100%;
	    height:110px;
	    padding-top:20px;
	    background-repeat:no-repeat;
	    background-color:transparent;
	}

Элементы li в подменю делаем невидимыми.

	ul.menu > li ul li{
	    display:none;
	}

Зададим стили для фоновых изображений подменю:

	ul.menu > li ul.sub1{
	    background-image:url(../images/bg1sub.png);
	}
	ul.menu > li ul.sub2{
	    background-image:url(../images/bg2sub.png);
	}
	ul.menu > li ul.sub3{
	    background-image:url(../images/bg3sub.png);
	}

Ссылки в элементах li будут иметь следующий стиль:

	ul.menu > li ul li a{
	    color:#fff;
	    text-decoration:none;
	    line-height:30px;
	    margin-left:20px;
	    text-shadow:1px 1px 1px #444;
	    font-size:11px;
	}

	ul.menu > li ul li a:hover{
	    border-bottom:1px dotted #fff;
	}

Список из первого подменю должен быть показан в самом начале:

	ul.menu > li ul.sub1 li{
	    display:block;
	}

Со стилями разобрались. Переходим к JS

The JavaScript

Сценарий скрипта прост как все гениальное – сначала мы проверяем откуда пришла мышка и делаем соответствующую анимацию фонового изображения основного меню, а затем и анимацию для фонового изображения подменю:

	$(function() {
	    /* position of the
	
  •  that is currently shown */
	    var current = 0;

	    $('#bg1,#bg2,#bg3').mouseover(function(e){

	        var $this = $(this);
	        /* if we hover the current one, then don't do anything */
	        if($this.parent().index() == current)
	            return;

	        /* item is bg1 or bg2 or bg3, depending where we are hovering */
	        var item = e.target.id;

	        /*
	        this is the sub menu overlay. Let's hide the current one
	        if we hover the first
    • 
	
  •  or if we come from the last one,
	        then the overlay should move left -> right,
	        otherwise right->left
	         */
	        if(item == 'bg1' || current == 2)
	            $('#menu .sub'+parseInt(current+1))
	                .stop()
	                .animate({backgroundPosition:"(-266px 0)"},300,function(){
	                    $(this).find('li').hide();
	                });
	        else
	            $('#menu .sub'+parseInt(current+1))
	                .stop()
	                .animate({backgroundPosition:"(266px 0)"},300,function(){
	                    $(this).find('li').hide();
	                });

	        if(item == 'bg1' || current == 2){
	            /*
	            if we hover the first
    • 
	
  •  or if we come from
	            the last one, then the images should move left -> right
	            */
	            $('#menu > li')
	                .animate({backgroundPosition:"(-800px 0)"},0)
	                .removeClass('bg1 bg2 bg3')
	                .addClass(item);
	            move(1,item);
	        }
	        else{
	            /*
	            if we hover the first
    • 
	
  •  or if we come
	            from the last one, then the images should move
	            right -> left
	            */
	            $('#menu > li')
	                .animate({backgroundPosition:"(800px 0)"},0)
	                .removeClass('bg1 bg2 bg3')
	                .addClass(item);
	            move(0,item);
	        }

	        /*
	        We want that if we go from the first one to the last one
	        (without hovering the middle one), or from the last one
	        to the first one, the middle menu's overlay should also
	        slide, either from left to right or right to left.
	         */
	        if(current == 2 && item == 'bg1'){
	            $('#menu .sub'+parseInt(current))
	            .stop()
	            .animate({backgroundPosition:"(-266px 0)"},300);
	        }
	        if(current == 0 && item == 'bg3'){
	            $('#menu .sub'+parseInt(current+2))
	            .stop()
	            .animate({backgroundPosition:"(266px 0)"},300);
	        }

	        /* change the current element */
	        current = $this.parent().index();

	        /* let's make the overlay of the current one appear */

	        $('#menu .sub'+parseInt(current+1))
	            .stop().animate({backgroundPosition:"(0 0)"},300,function(){
	                $(this).find('li').fadeIn();
	            });
	    });
	    /*
	    dir:1 - move left->right
	    dir:0 - move right->left
	     */
	    function move(dir,item){
	        if(dir){
	            $('#bg1').parent()
	                     .stop()
	                     .animate({backgroundPosition:"(0 0)"},200);
	            $('#bg2').parent()
	                     .stop()
	                     .animate({backgroundPosition:"(-266px 0)"},300);
	            $('#bg3').parent()
	                     .stop()
	                     .animate({backgroundPosition:"(-532px 0)"},400,function(){
	                        $('#menuWrapper').removeClass('bg1 bg2 bg3')
	                                         .addClass(item);
	                     });
	        }
	        else{
	            $('#bg1').parent()
	                     .stop()
	                     .animate({backgroundPosition:"(0 0)"},400,function(){
	                        $('#menuWrapper').removeClass('bg1 bg2 bg3')
	                                         .addClass(item);
	                     });
	            $('#bg2').parent()
	                     .stop()
	                     .animate({backgroundPosition:"(-266px 0)"},300);
	            $('#bg3').parent()
	                     .stop()
	                     .animate({backgroundPosition:"(-532px 0)"},200);
	        }
	    }
	});
    •

    Ну вот и все. Пользуйтесь на здоровье!

    Скачать файлы можно отсюда.

    Посмотреть демо можно здесь.

    Перевод сделан DJ_Petrovich’ем по материалам сайта tympanus.net

    Posted in Архив | No Comments