Несомненно, меню для сайта является незаменимым средством навигации пользователя по сайту. Но, как правило, навигация на сайтах скучная и обыденная. В данном уроке мы рассмотрим как создать замечательное раскрывающееся меню с помощью css и jquery. Идея заключается в том, что прямоугольник с пунктами меню при наведении мыши выскальзывает вниз, а миниатюра выскакивает наверх. Также в меню есть также прямоугольник для подменю, которое имеется у некоторых пунктов меню. Подменю будет выскальзывать влево или вправо..

И так, приступим, для начала мы рассмотрим создание достаточно простой HTML-разметки, в который содержится в качестве пунктов ссылку на основной пункт и элемент div для подменю:

В случае если подменю нет, то элемент div можно просто опустить. Изображение сначала не будет выводиться, так как мы установим для него ширину и высоту равной 0 в CSS.

Теперь рассмотрим стили CSS, для неупорядоченного списка:

Также мы сбросим свойства text-decoration и outline для всех ссылок в нашем меню:

Пункт списка будет смещаться влево и позиционироваться относительно, так как элементы внутри него будут позиционироваться абсолютно:

Стиль для основного элемента ссылки, в котором имеются два элемента span для заголовка и описания:

Обратите внимание на свойство z-index: мы будем определять порядок расположения всех важных элементов, поэтому нужный всегда будет оставаться наверху. Мы используем фоновое изображение, которое создает эффект стекла с помощью полупрозрачного градиента.

Также можно изменять тени – установка значений 2px 2px 6px #000 inset создает прелестный эффект. Изображения будут иметь следующие стили:

Мы будем анимировать изображения так, как будто они появляются снизу, поэтому они позиционируются абсолютно с использованием свойства “bottom” в качестве исходной точки. Также используются тени. Первые два значения 0 устанавливают равномерное распределение тени вокруг изображения. Контейнер для элементов span заголовка и описания будет иметь следующий стиль:

Если вы будете использовать более длинный текст, вам надо адаптировать данные значения. Также нужно скорректировать значения в анимации JavaScript.

Стили для элементов span и ссылок в прямоугольниках:

Заголовок и описание будут иметь следующие стили:

Прямоугольник подменю изначально скрыт под серым прямоугольником. Затем, мы анимируем его выдвижение вправо или влево в зависимости от расположения пункта меню.

Первая ссылка в подменю должна иметь отступ сверху:

Теперь рассмотрим JavaScript, Когда курсор мыши заходит на элемент списка, мы увеличиваем изображение и выводим оба элемента span sdt_active и sdt_wrap.

Если элемент имеет подменю (sdt_box), то его надо выдвинуть. Если элемент последний в списке, то подменю будет выдвигаться влево, а в остальных случаях вправо. Вот и все, меню готово к работе.

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