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

Для начала нам необходимо создать разметку HTML. Структура HTML состоит из главного контейнера и ненумерованного списка, каждый из элементов которого — наша колонка. Этому контейнеру мы дадим класс “ei_menu” и идентификатор “ei_menu”. В каждом элементе списка будет ссылка, состоящая из двух элементов span и блока div с контентом.

Один span предназначен для первой фотографии, которую мы видим вначале, а второй — для цветной, которая отобразится при клике на элемент. Так как у нас один блок для двух изображений, необходимо задать атрибут background position. Для этого мы создадим специальные классы “pos1” — “pos5”. Теперь рассмотрим стили CSS. Блок со списком мы растянем на всю страницу, и отобразим только область внутри элемента. Мы ведь не хотим, чтобы при скрытии того или иного элемента списка показывалось что-то ненужное.

Зададим списку достаточную ширину, чтобы элементы не переходили на следующую “строку” при клике на один из них.

У элементов списка overflow тоже будет hidden, так как контент каждого из них достаточно большой. И он будет отображаться только один раз при клике по нему, для этого мы увеличим его ширину.

В спане “ei_preview” будет черно-белое изображение, он будет позиционирован абсолютно.

В спане “ei_image” будет цветное фоновое изображение. Он будет почти прозрачным. Мы создадим прикольный эффект, с плавными переходами прозрачности и позиционированием.

Чтобы задать позиции каждому спану, определим классы, которые зададим ссылкам-родителям спанов.

Блок с контентом также будет позиционирован абсолютно, а значение атрибута leftдолжно равняться ширине спанов:

Немного оживим заголовок контента прикольным шрифтом от Google. Также добавим изящные полосы.

Для подзаголовка также зададим специальный шрифт:

Теперь рассмотрим JavaScritp. Идея заключается в том, чтобы раскрыть элемент меню при клике. Это значит, что увеличится ширина элемента списка до 400 пикселей (начальная ширина в 75 пикселей + ширина контента вместе с отступами и рамкой, что составляет 325 пикселей). Вместе с этим мы плавно отобразим второй спан с цветной фотографией и плавно поменяем прозрачность.

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