Меню для сайта на jQuery, с эффектом наложения

jquery меню

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

Перед тем, как мы приступим к созданию меню для сайта на jQuery, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Итак, давайте начнем!

Разметка

Структура HTML будет состоять из основного упаковщика меню div, содержащего наложение, и неупорядоченного списка для меню. Само меню получит ссылку и элемент div, как подменю в своих элементах списка. Каждый из элементов подменю будет содержать списки для колонок подменю, где каждый получит заголовок элемента списка:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

У каждого из div’ов подменю будут назначены inline-стили для позиций слева. Посмотрев на стиль, мы увидим, что нужно установить это значение, если хотим, чтобы подменю было абсолютно позиционировано, но внутри относительно позиционированного контейнера. Так что для позиционирования всех div’ов подменю вначале всего меню нам нужно "оттащить" каждый div побольше влево, следовательно, так мы получим отрицательное левое значение для каждого div’а (уменьшение на 112px).

Давайте посмотрим на стиль.

CSS

Убедитесь сначала, что вы сбросили все стили (нам для списка не нужно никаких отступов или полей, определенных браузером). Мы начнем с наложения в теле (body), которое является простым div’ом с исходной непрозрачностью, установленной на 0:

Position будет установлен на fixed, так как нам нужно, чтобы он всегда оставался в левом верхнем углу, заполняя весь экран.

Список основного меню получит следующий стиль:

Вы, возможно, хотели бы применить его способность свободно перемещаться, если планируете его интегрировать куда-нибудь на свой сайт. Что действительно важно — так это расположение пунктов списка.

Они будут позиционированы относительно, так, чтобы у нас были абсолютно расположенные элементы подменю.

Гиперссылка меню верхнего слоя получит следующий стиль, формирующий блок:

В свой JavaScript мы добавим к основному ul’у класс "hovered" так, чтобы при проведении мышью над меню можно было изменить все указатели на белые:

Элемент подменю сначала не будет виден, а выскальзывать станет тогда, когда мы проведем мышью над элементом списка верхнего слоя:

Стиль для ссылок внутри списков подменю:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Один из списков подменю будет одиночным, так что нам нужно, чтобы он занял все пространство:

А если не одиночный, то нужно, чтобы ширина у него была 150px, и можно было разместить 3 скользящих элемента рядом:

Наконец, нам нужен заголовок списка подменю для выделения:

И это все, что касается стилей! Давайте при помощи jQuery продолжим работать с эффектами.

Код меню сайта на jQuery

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

Сначала давайте кэшируем некоторые элементы:

При установлении функции hover любому пункту меню мы добавляем к ему классы "slided" и "selected". Соответствующий div подменю будет выскальзывать, а все прочие будут скрываться. Мы также передаем очень высокий z-индекс текущему подменю. При убирании с него мыши мы удаляем класс "selected":

Класс "selected" нужен стилю, когда класс "slided" является вспомогательным, что позволяет нам определить, который из пунктов в данный момент используется.

Теперь мы позаботимся о наложении, определив, что происходит, когда мы вводим упаковщик всего меню. Мы постепенно изменим наложение до непрозрачности 0.6 и добавим к упаковщику класс "hovered", так что указатели останутся белыми:

Вот и все! Надеемся, что этот учебник не показался скучным, и вы нашли его полезным!

киберсант-вебмастер

Автор: Mary Lou

На этом урок по созданию меню для сайта с эффектом наложения, средствами HTML+CSS+jQuery завершен.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Ольга

    Здравствуйте! А все это можно воспроизвести на joomla?

    • Андрей Кудлай

      Здравствуйте.
      Конечно, можно при наличии определенных навыков работы с данной CMS.

  2. Ольга

    Спасибо, Андрей! тогда — в закладочки!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree