Раскрывающееся меню картинок на 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-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Несчастен тот человек, у которого есть любимый ресторан и нет любимого автора. Он нашел любимое место, где можно накормить тело, но не нашел любимого места, где можно накормить свой ум Рон Джим - выдающийся американский бизнес-тренер и мотиватор, разрабатывал стратегию работы компаний I.B.M., Coca-Cola, Xerox, General Motors и др. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.