В данном разделе можно ознакомиться с тем, как создаются меню картинок с помощью jQuery. Будут колонки с черно-белыми фотографиями, при клике по одной из них будет открываться блок с некоторой информацией. При клике фотография плавно перейдет из черно-белой в цветную, благодаря чему, создается изящный эффект. Структура HTML состоит из главного контейнера и ненумерованного списка, каждый из элементов которого - наша колонка. Этому контейнеру мы дадим класс “ei_menu” и идентификатор “ei_menu”. В каждом элементе списка будет ссылка, состоящая из двух элементов span и блока div с контентом. Один span предназначен для первой фотографии, которая видится вначале, а второй - для цветной, которая отобразится при клике на элемент. Так как есть один блок для двух изображений, необходимо задать атрибут background position. Для этого нужно создать специальные классы “pos1” - “pos5”.
<div id="ei_menu" class="ei_menu">
<ul>
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Gary</h2>
<h3>Vocals</h3>
<p>Some text here...</p>
</div>
</li>
<li> ... </li>
</ul>
</div>
Далее приступаем к дизайну

CSS

Блок со списком  растягиваем на всю страницу, и отображаем только область внутри элемента, т.к. желательно, чтобы при скрытии того или иного элемента списка показывалось что-то ненужное.
.ei_menu{
background:#111;
width:100%;
overflow:hidden;
}
Зададим списку достаточную ширину, чтобы элементы не переходили на следующую “строку” при клике на один из них.
.ei_menu ul{
height:350px;
margin-left:50px;
position:relative;
display:block;
width:1300px;
}
У элементов списка overflow тоже будет hidden, так как контент каждого из них достаточно большой. И он будет отображаться только один раз при клике по нему, для этого мы увеличим его ширину.
.ei_menu ul li{
float:left;
width:75px;
height:350px;
position:relative;
overflow:hidden;
border-right:2px solid #111;
}
В спане “ei_preview” будет черно-белое изображение, он будет позиционирован абсолютно.
.ei_preview{
width:75px;
height:350px;
cursor:pointer;
position:absolute;
top:0px;
left:0px;
background:transparent url(../images/bw.jpg) no-repeat top left;
}
В спане “ei_image” будет цветное фоновое изображение. Он будет почти прозрачным. Мы создадим прикольный эффект, с плавными переходами прозрачности и позиционированием.
.ei_image{
position:absolute;
left:75px;
top:0px;
width:75px;
height:350px;
opacity:0.2;
background:transparent url(../images/color.jpg) no-repeat top left;
}
Чтобы задать позиции каждому спану, определим классы, которые зададим ссылкам-родителям спанов.
.pos1 span{
background-position:0px 0px;
}
.pos2 span{
background-position:-75px 0px;
}
.pos3 span{
background-position:-152px 0px;
}
.pos4 span{
background-position:-227px 0px;
}
.pos5 span{
background-position:-302px 0px;
}
.pos6 span{
background-position:-377px 0px;
}
Блок с контентом также будет позиционирован абсолютно, а значение атрибута left должно равняться ширине спанов
.ei_descr{
position:absolute;
width:278px;
height:310px;
border-right:7px solid #f0f0f0;
padding:20px;
left:75px;
top:0px;
background:#fff;
}
Немного оживим заголовок контента прикольным шрифтом от Google. Также добавим изящные полосы.
.ei_descr h2{
font-family: 'Rock Salt', arial, serif;
font-size:26px;
color:#333;
padding:10px;
text-shadow:0px 0px 1px #fff;
background:#fff url(../images/stripe_light.gif) repeat top left;
}
Для подзаголовка также зададим специальный шрифт:
.ei_descr h3{
font-family: 'Raleway', arial, serif;
color:#fff;
text-shadow:0px 0px 1px #000;
font-style:normal;
padding:10px;
background:#333;
}
В завершении, стилизуем абзацы:
.ei_descr p{
color:#000;
padding:10px 5px 0px 5px;
line-height:18px;
font-size:11px;
font-family: Arial, sans-serif;
text-transform:uppercase;
}
Вот и все на стилях. Не забудьте подключить шрифты Google:
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
Добавьте эти строки в начале HTML файла.

JavaScript

Идея заключается в том, чтобы раскрыть элемент меню при клике. Это значит, что увеличится ширина элемента списка до 400 пикселей (начальная ширина в 75 пикселей + ширина контента вместе с отступами и рамкой, что составляет 325 пикселей). Вместе с этим мы плавно отобразим второй спан с цветной фотографией и плавно поменяем прозрачность. Мы также увеличим прозрачность остальных элементов списка. Будет выглядеть так, как будто они потемнели, потому что у нас черный цвет фона. Начнем с того, что закэшируем некоторые элементы:
001
var $menu               = $('#ei_menu > ul'),
002 $menuItems          = $menu.children('li'),
003 $menuItemsImgWrapper= $menuItems.children('a'),
004 $menuItemsPreview   = $menuItemsImgWrapper.children('.ei_preview'),
005 totalMenuItems      = $menuItems.length,
006
007 Теперь функционал:
008
009 ExpandingMenu   = (function(){
010 /*
011 @current
012 индекс элемента, который отобразится при первой загрузке, если -1, то все будут скрыты       */
013 var current             = -1,
014 /*
015 @anim
016 если хотите, чтобы открытый по умолчанию элемент анимировался, задайте true
017 */
018 anim                = true,
019 /*
020 проверят на валидность текущий элемент-
021 между 0 и количеством элементов
022 */
023 validCurrent        = function() {
024 return (current >= 0 && current < totalMenuItems);
025 },
026 init                = function() {
027 /* если current валиден, отобразить элемент по умолчанию */
028 if(validCurrent())
029 configureMenu();
030
031 initEventsHandler();
032 },
033 configureMenu       = function() {
034 /* устанавливает значение для current */
035 var $item   = $menuItems.eq(current);
036 /* если anim = true, анимировать элемент */
037 if(anim)
038 slideOutItem($item, true, 900, 'easeInQuint');
039 else{
040 /* если нет, просто отобразить */
041 $item.css({width : '400px'})
042 .find('.ei_image')
043 .css({left:'0px', opacity:1});
044
045 /* увеличить прозрачность остальных элементов */
046 $menuItems.not($item)
047 .children('.ei_preview')
048 .css({opacity:0.2});
049 }
050 },
051 initEventsHandler   = function() {
052 /*
053 при клике на один из элементов может произойти:
054 1) он уже открыт - закрыть его!
055 2) он закрыт - открыть его! (если другой элемент открыт, то закрыть его!)
056 */
057 $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
058 var $this = $(this).parent(),
059 idx     = $this.index();
060
061 if(current === idx) {
062 slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
063 current = -1;
064 }
065 else{
066 if(validCurrent() && current !== idx)
067 slideOutItem($menuItems.eq(current), false, 250, 'jswing');
068
069 current = idx;
070 slideOutItem($this, true, 250, 'jswing');
071 }
072 return false;
073 });
074 },
075 /* если вы хотите запустить открытие какого-либо элемента */
076 openItem            = function(idx) {
077 $menuItemsImgWrapper.eq(idx).click();
078 },
079 /*
080 открывает или закрывает элемент
081 заметьте, что "mLeave" =- true, когда все элементы скрыты,
082 в этом случае мы возвращаем им начальную прозрачность.
083 по значению "dir" (true | false) мы узнаем, закрыт или открыт элемент
084 */
085 slideOutItem        = function($item, dir, speed, easing, mLeave) {
086 var $ei_image   = $item.find('.ei_image'),
087
088 itemParam   = (dir) ? {width : '400px'} : {width : '75px'},
089 imageParam  = (dir) ? {left : '0px'} : {left : '75px'};
090
091 /*
092 при открытии задаем непрозрачность = 0.1.
093 это вместо того, что закомментировано:
094 */
095 if(dir)
096 /*
097 alternative:
098 $menuItemsPreview.not($menuItemsPreview.eq(current))
099 .stop()
100 .animate({opacity:0.1}, 500);
101 */
102 $menuItemsPreview.stop()
103 .animate({opacity:0.1}, 1000);
104 else if(mLeave)
105 $menuItemsPreview.stop()
106 .animate({opacity:1}, 1500);
107
108 /* элемент <li> расширяется или сужается */
109 $item.stop().animate(itemParam, speed, easing);
110 /* изображение в span (color) меняется */
111 $ei_image.stop().animate(imageParam, speed, easing, function() {
112 /*
113 при открытии, прозрачность плавно переходит в 1,
114 иначе, оставляем как было.
115 */
116 if(dir)
117 $ei_image.animate({opacity:1}, 2000);
118 else
119 $ei_image.css('opacity', 0.2);
120 });
121 };
122
123 return {
124 init        : init,
125 openItem    : openItem
126 };
127 })();
128
129 /*
130 вызываем метод init из ExpandingMenu
131 */
132 ExpandingMenu.init();
133
134 /*
135 если вы захотите скрыть или отобразить какой-то конкретный элемент, можете сделать это так:
136 ExpandingMenu.openItem(3); // раскрывает элемент с индексом 3 (первый индекс = 0)
137 */
138
</li>
На этом всё.