Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем меню с уменьшенными изображениями с использованием jQuery

25 декабря 2013 | Опубликовано в css | 1 Комментарий »

В этом уроке мы создадим фиксированное меню с прокручиваемыми уменьшенными изображениями.  Основная задача — создать меню, привязанное к низу страницы, и позволить вертикально расположенному набору уменьшенных изображений появляться, когда указатель мыши наведен на элемент меню. Уменьшенные изображения можно прокрутить, двигая мышь вверх-вниз, что создаст интересный эффект. Мы добавим свойства CSS3 для оригинальности.

 

 


 Демо – Скачать исходный код

Наш jQuery код будет основан на вертикально прокручиваемом меню от Andrew Valums.

Изображения, использованные в примере, взяты из невероятной коллекции фотографий kk+ с сайта flickr.

Итак, давайте начнем!

Разметка

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

<ul id="menu">

    <li>

        <a href="#">Brand 1</a>

        <div>

            <div>

                <a href=""><img src="images/1.jpg" alt=""/></a>

                <a href=""><img src="images/2.jpg" alt=""/></a>

                ...

            </div>

        </div>

    </li>

    ...
</ul>

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

Давайте рассмотрим стили.

CSS

Сначала мы настроим так, чтобы переполнение тела документа не приводило к появлению полос прокрутки:

body{

    overflow:hidden;
}

Это не является необходимым для того, чтобы все работало, но так будет лучше выглядеть, и если на странице не очень много данных, то это не создаст проблем.

/* Стиль навигации */

ul.menu{

    list-style:none;

    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: fixed;

    bottom:0px;

    left:0px;

    width:700px;

    height:100%;
}

Если Вы хотите, чтобы страница прокручивалась, убедитесь, что вы сделали меню фиксированным, чтобы оно прилипало к низу страницы. Список элементов и ссылки будут иметь такой стиль:

ul.menu li{

    float:left;

    position:relative;

    height:100%;

    width:130px;

}

ul.menu li > a{

    position:absolute;

    bottom:0px;

    left:0px;

    width:130px;

    height:40px;

    text-align:center;

    line-height:40px;

    color:#ddd;

    background-color:#291A2F;

    letter-spacing:1px;

    cursor:pointer;

    text-decoration:none;

    text-shadow:0px 0px 1px #fff;

    -moz-box-shadow:-1px 0px 5px #000;

    -webkit-box-shadow:-1px 0px 5px #000;

    box-shadow:-1px 0px 5px #000;

    opacity:0.9;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

Нам необязательно использовать ссылочный элемент, мы можем использовать тег span или что-то другое. Но в этом примере мы используем традиционный метод.

С помощью белой тени текста за белым текстом мы получим легкое размытие шрифта, которое дает эффект сглаживания, особенно в браузере Chrome. Последнее свойство — это фильтр прозрачности для браузера Internet Explorer. Будьте осторожны, используя этот фильтр для изображений в формате png, у которых есть прозрачные и полупрозрачные части: браузер Internet Explorer заполнит их черным.

Стиль для блока, содержащего уменьшенные изображения, будет таким:

/* Стиль прокручивающихся уменьшенных изображений */

div.sc_menu_wrapper {

    position: absolute;

    top:0px;

    width:150px;

    overflow: hidden;

    bottom:0px;

    left:0px;

    visibility:hidden;

}

div.sc_menu {

    width:130px;

    visibility:hidden;
}

Почему мы используем здесь свойство visibility:hidden? У нас есть две причины: первая — мы хотим, чтобы уменьшенные изображения появлялись так, как если бы мы располагали их от низа до верха, так что мы уже разместили эти элементы здесь и затем просто сделали их видимыми. Посмотрите, как это сделано с помощью Javascript. Со свойством display:none элемент не занимает места на странице, но со свойством visibility:hidden место будет занято, а элемент просто не будет виден.

Мы задаем это свойство блоку, чтобы функция прокручивания в jQuery получила высоту элементов. Если наши элементы не показаны, то получение высоты невозможно. Свойство видимости решает эту проблему.

Стиль ссылок и уменьшенных изображений такой:

.sc_menu a {

    display: block;

    background-color:#22002F;

    color: #fff;

    text-align:center;

    -moz-box-shadow:3px -3px 3px #3B0F4F;

    box-shadow:3px -3px 3px #3B0F4F;

    -webkit-box-shadow:3px -3px 3px #3B0F4F;

}

.sc_menu img {

    display: block;

    border: none;

    opacity:0.3;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

Это были стили, а теперь давайте добавим магию!

JavaScript

Основная задача — показать меню с уменьшенными изображениями, когда мы наводим указатель мыши на основные элементы навигации. Мы показываем уменьшенные изображения в порядке расположения, один за другим, с задержкой.

Функция buildThumbs позволит нам прокручивать уменьшенные изображения без полосы прокрутки, двигая мышь вертикально.

Функция inactiveMargin позволит нам добраться до самого верхнего и до самого нижнего уменьшенного изображения так, что мы сможем увидеть все изображение целиком, а не обрезанным.

Изначально мы хотим начать снизу, так что мы прокручиваем вниз.

Когда мы выходим из главного списка элементов, мы возвращаем все к нормальному состоянию, прячем все снова.

Когда мы наведем указатель мыши на уменьшенное изображение, прозрачность изменится.

$(function(){

    /* Функция, которая делает меню с уменьшенными изображениями прокручиваемым */

    function buildThumbs($elem){

        var $wrapper        = $elem.next();

        var $menu           = $wrapper.find('.sc_menu');

        var inactiveMargin  = 150;

        /* Сдвинуть прокрутку вниз к началу - сдвинуть на высоту меню */

        $wrapper.scrollTop($menu.outerHeight());

        /* Когда указатель мыши перемещается вниз или вверх, блок перемещается-прокручивается вниз или вверх */

        $wrapper.bind('mousemove',function(e){

            var wrapperHeight   = $wrapper.height();

            var menuHeight  = $menu.outerHeight() + 2 * inactiveMargin;

            var top     = (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;

            $wrapper.scrollTop(top+10);

        });

    }

    var stacktime;

    $('#menu li > a').bind('mouseover',function () {

        var $this = $(this);

        buildThumbs($this);

        var pos =   $this.next().find('a').size();

        var f   =   function(){

            if(pos==0) clearTimeout(stacktime);

            $this.next()

                 .find('a:nth-child('+pos+')')

                 .css('visibility','visible');

            --pos;

        };

        /* Каждое уменьшенное изображение будет появляться с задержкой */

        stacktime = setInterval(f , 50);

    });

    /* После того, как указатель мыши вышел за пределы меню, весь список прокручиваемой области прячется */

    $('#menu li').bind('mouseleave',function () {

        var $this = $(this);

        clearTimeout(stacktime);

        $this.find('.sc_menu')

             .css('visibility','hidden')

             .find('a')

             .css('visibility','hidden');

        $this.find('.sc_menu_wrapper')

             .css('visibility','hidden');

    });

    /* Когда указатель мыши наведен на уменьшенное изображение, изменить его прозрачность */

    $('.sc_menu a').hover(

        function () {

            var $this = $(this);

            $this.find('img')

            .stop()

            .animate({'opacity':'1.0'},400);

        },

        function () {

            var $this = $(this);

            $this.find('img')

            .stop()

            .animate({'opacity':'0.3'},400);

        }

    );
});

Это все! Наслаждайтесь! 

Демо - Скачать исходный код

 

Автор урока Mary Lou
Перевод — Дежурка

Смотрите также:




Комментарии

Оставить ответ


восемь − = 5

Вставить изображение