Раскрывающееся меню картинок на jQuery
Сегодня вы научитесь создавать меню картинок с помощью jQuery. У нас будут колонки с черно-белыми фотографиями, при клике по одной из них будет открываться блок с некоторой информацией. При клике фотография плавно перейдет из черно-белой в цветную, так мы создадим изящный эффект.
Мы возьмем работы талантливого фотографа Роберта Бежила, которые можно посмотреть на Flickr.
Итак, давайте приступим!
Создаем каркас
Структура 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 пикселей). Вместе с этим мы плавно отобразим второй спан с цветной фотографией и плавно поменяем прозрачность. Мы также увеличим прозрачность остальных элементов списка. Будет выглядеть так, как будто они потемнели, потому что у нас черный цвет фона.
Начнем с того, что закэшируем некоторые элементы:
var $menu = $('#ei_menu > ul'), $menuItems = $menu.children('li'), $menuItemsImgWrapper= $menuItems.children('a'), $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'), totalMenuItems = $menuItems.length, Теперь функционал: ExpandingMenu = (function(){ /* @current индекс элемента, который отобразится при первой загрузке, если -1, то все будут скрыты */ var current = -1, /* @anim если хотите, чтобы открытый по умолчанию элемент анимировался, задайте true */ anim = true, /* проверят на валидность текущий элемент- между 0 и количеством элементов */ validCurrent = function() { return (current >= 0 && current < totalMenuItems); }, init = function() { /* если current валиден, отобразить элемент по умолчанию */ if(validCurrent()) configureMenu(); initEventsHandler(); }, configureMenu = function() { /* устанавливает значение для current */ var $item = $menuItems.eq(current); /* если anim = true, анимировать элемент */ if(anim) slideOutItem($item, true, 900, 'easeInQuint'); else{ /* если нет, просто отобразить */ $item.css({width : '400px'}) .find('.ei_image') .css({left:'0px', opacity:1}); /* увеличить прозрачность остальных элементов */ $menuItems.not($item) .children('.ei_preview') .css({opacity:0.2}); } }, initEventsHandler = function() { /* при клике на один из элементов может произойти: 1) он уже открыт - закрыть его! 2) он закрыт - открыть его! (если другой элемент открыт, то закрыть его!) */ $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) { var $this = $(this).parent(), idx = $this.index(); if(current === idx) { slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true); current = -1; } else{ if(validCurrent() && current !== idx) slideOutItem($menuItems.eq(current), false, 250, 'jswing'); current = idx; slideOutItem($this, true, 250, 'jswing'); } return false; }); }, /* если вы хотите запустить открытие какого-либо элемента */ openItem = function(idx) { $menuItemsImgWrapper.eq(idx).click(); }, /* открывает или закрывает элемент заметьте, что "mLeave" =- true, когда все элементы скрыты, в этом случае мы возвращаем им начальную прозрачность. по значению "dir" (true | false) мы узнаем, закрыт или открыт элемент */ slideOutItem = function($item, dir, speed, easing, mLeave) { var $ei_image = $item.find('.ei_image'), itemParam = (dir) ? {width : '400px'} : {width : '75px'}, imageParam = (dir) ? {left : '0px'} : {left : '75px'}; /* при открытии задаем непрозрачность = 0.1. это вместо того, что закомментировано: */ if(dir) /* alternative: $menuItemsPreview.not($menuItemsPreview.eq(current)) .stop() .animate({opacity:0.1}, 500); */ $menuItemsPreview.stop() .animate({opacity:0.1}, 1000); else if(mLeave) $menuItemsPreview.stop() .animate({opacity:1}, 1500); /* элементрасширяется или сужается */ $item.stop().animate(itemParam, speed, easing); /* изображение в span (color) меняется */ $ei_image.stop().animate(imageParam, speed, easing, function() { /* при открытии, прозрачность плавно переходит в 1, иначе, оставляем как было. */ if(dir) $ei_image.animate({opacity:1}, 2000); else $ei_image.css('opacity', 0.2); }); }; return { init : init, openItem : openItem }; })(); /* вызываем метод init из ExpandingMenu */ ExpandingMenu.init(); /* если вы захотите скрыть или отобразить какой-то конкретный элемент, можете сделать это так: ExpandingMenu.openItem(3); // раскрывает элемент с индексом 3 (первый индекс = 0) */
На этом всё.
Вариации
Если поменять немножко скрипт, можно получить такие варианты меню:
Надеюсь, вам понравился урок.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mBtF394qscY/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.