Создаем меню с уменьшенными изображениями с использованием 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
Перевод — Дежурка
Смотрите также:
549