Создание плавающего HTML меню с использованием jQuery и CSS

jQuery

На связи Андрей Бернацкий.

С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Впрочем, без лишних слов начинаем рассматривать нашу первую статью по данной теме.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую скачать исходный код, чтоб он у Вас был под рукой.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Также результат того, что мы будем делать, Вы можете посмотреть здесь.

Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.

Что мы строим

В этой статье описывается, как создать «плавающее меню» с использованием HTML, CSS и JQuery. Подчеркиваю, плавающее меню остается видимым, даже если вы прокрутите вниз веб-страницу. Они анимационные, поэтому движутся вверх и вниз при прокрутке окна браузера, вверх или вниз. Я собираюсь показать вам, как сделать плавающим меню с помощью JQuery и CSS, и мы надеемся, что появятся новые ученики JQuery:D.

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

jQuery
jQuery

Шаг 1

Давайте начнем с HTML разметки для приятного меню, состоящего из трех суб-меню:

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

в строке 01, который инкапсулирует все меню. Три списка используются только для демонстрации структуры, которая может быть изменена в соответствии с вашими потребностями. В этом случае, есть три раздела в меню, что представлено тремя ненумерованными списками.

Это дело привычки, но я отключаю клик по ссылке (href =»#»). Чтобы быть уверенным, что клик по ссылке не отправит к началу страницы, всегда можно поставить OnClick = «Return FALSE;» в <a href>. Этот метод позволяет добавить пункт в меню функций, таких как lightboxing — то, что заставляет страницу остаться на своем нынешнем вертикальном положении, когда пользователь кликает по ссылке меню.

Шаг 2

Теперь нам нужны некоторые правила CSS для оформления и позиционирования меню. (Я использовал сброс CSS Эрика А. Мейера «CSS Reset», поэтому нет margin:0 или padding:0 у элемента ul):

Высота body (строка 03, выше) была установлена только для получения достаточного места для нашего меню для прокрутки вверх и вниз нашей страницы. Она должна быть удалена в реальной странице. Две другие вещи должны быть приняты обязательно position:absolute (строка 08) и left:50% (строка 10), оба они в #floatMenu (строка 07), выше.

Атрибут "position" используется, когда нужно удалить элемент из потока документа и установить его в точном месте на вашей странице. Если вы используете функцию масштабирования текста в браузере, элемент с абсолютным позиционированием не будет двигаться, даже если текст вокруг него увеличивается в размерах.

Атрибут "left" используется для позиционирования конкретного Div-а по горизонтали. Значение должно быть определено в процентах в том случае, если мы хотим центрированный дизайн. С 50% значением, левая сторона ячейки расположена в средней части страницы. Чтобы расположить его слева или справа, мы должны использовать атрибут «margin-left» (строка 11), с отрицательным значением смещения влево и положительным для смещения с правой стороны.

Другие элементы в таблице стилей управляют визуальным дизайном.

Шаг 3

Теперь у нас есть меню из трех пунктов, появляющееся в верхнем правом углу страницы. Для повышения эффекта наведения у пунктов меню, давайте добавим классы menu1, menu2 и menu3 для каждого пункта соответственно (для каждого элемента <ul>). У нас будет 3 различных суб-меню благодаря трем элементам <ul>. Код является модификацией кода HTML показанного в шаге 1:

Теперь давайте определим некоторые CSS эффекты наведения, которые будут различными для каждого пункта меню.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Теперь каждый пункт меню будет отображаться различным цветом при наведении указателя мыши на пункт меню. Если вы хотите, вы также можете добавить правила для других состояний ссылок с помощью псевдоклассов :link, :visited, :hover и :active. Порядок, в котором вы должны написать к ним можно легко запомнить так: LOve и HAte, где заглавные буквы представляют собой первую букву каждого пункта.

Шаг 4

У нас есть приятные глазу меню, и мы можем остановиться на этом, но мы хотим плавающее меню, так что пришло время добавить jQuery. Вам необходимо загрузить библиотеку jQuery и Dimensions плагин. Этот плагин будет использован для захвата информации об окне браузера (ширина, высота, прокрутки и т.д.). Вы можете связать библиотеку и плагин jQuery с вашим HTML файлом в разделе <head> …</ head>. Только не забудьте изменить URL пути, в соответствии с теми, которые соответствуют размещению jQuery библиотеки на вашем сервере.

Нам понадобится небольшой пользовательский код jQuery, так что начинаем новый раздел <script>, также в рамках части <head> …</ head> Вашего HTML документа:

Добавьте следующий код jQuery внутри <script> раздела:

$ (document). ready () функция аналогична window.onload, но улучшенная. С window.onload функцией, браузер должен ждать, пока вся страница (DOM and отображение) не загрузится. С функцией $(document). Ready () браузер лишь ждет, пока не будет загружен DOM, что означает, что jQuery может начать манипуляции элементами раньше.

Шаг 5

Нам нужен просмотрщик для события «прокрутка страницы». Наш пользовательский jQuery сценарий теперь выглядит следующим образом:

Просмотрщик события находиться в режиме ожидания определенного события. Для нашей страницы – это прокрутка вверх и вниз.

Шаг 6

Поскольку наше меню будет «плавать» пока страница прокручивается, мы должны отслеживать его первоначальное положение. Вместо жесткого кодирования в jQuery, мы будем читать это положение с помощью Dimensions плагина jQuery. Мы будем делать то же самое с названием нашего меню. Давайте добавим два определения переменных (Строки 01, 02), так что наш код выглядит так:

Строки 01 и 02 определяют переменные "name" и "menuYloc". Строка 05 устанавливает значение "menuYloc". Переменная «name» будет использоваться для ссылки на наше плавающее меню. "MenuYloc" переменная будет содержать оригинальные вертикальные позиции нашего меню.

Давайте посмотрим, какие значения menuYloc устанавливаются в линию 05. Это заявление является примером мощной функции-сцепления в jQuery. Сначала считается значение атрибута "top" из правил CSS нашего элемента меню (которое является "150px", в шаге 2). Затем убираем "px" в конце, так как нам нужна только "150". Чтобы сделать это, jQuery вызывает функции .CSS ("top") находит первое значение атрибута top в меню. (Этот атрибут был установлен в строке 09 кода в шаге 2, выше). Будет получено значение "150px". Потом функция .IndexOf () находит, где начинается "px" в "150px", и функция .substring () гарантирует, что мы сохраняем все перед "px". Функция .ParseInt () возвращает строку "150" в качестве целого числа.

Шаг 7

Сейчас мы пришли к интересной части этой статьи: анимировать меню сделать его "плавующим". Для этого нам необходимо определить, насколько страница прокручивается в пиксельном измерении. Мы имеем исходное расположение меню, хранящееся в переменной "menuYloc". Нам необходимо смещение полосы прокрутки, которое мы можем получить командной $ (document). ScrollTop (), определенной в Dimensions плагине JQuery. После захвата смещения можно добавить анимационную команду. Строки 07 и 08 ниже, показывается новый код:

Переменная "offset", в строке 07 выше, содержит разницу между первоначальным расположением меню (menuYloc) и выделяет значение ($ (document). ScrollTop ()), в пиксельном измерении. Чтобы сделать его рабочим, как правило CSS, мы добавляем необходимые единицы измерения, "px", после числового значения. Теперь мы можем применить вертикальное смещение, рассчитать позицию в меню, и таким образом заставить его двигаться.

Чтобы сделать так, чтобы все это лучше смотрелось, давайте использовать варианты анимации jQuery’s. У нас хранится название меню в переменной "name" и мы можем обнулить его в случае необходимости, использовать его вместе с функцией .Animate (). Функция анимации требует два параметра: (1) свойства стиля, и (2) свойства анимации. В этой статье нам просто нужно анимировать CSS свойство "top", но чтобы указать дополнительные параметры, отделяйте каждую пару свойство: значение запятой (,).

Мы используем здесь два параметра. "duration" является длиной анимации в миллисекундах, а "queue" является списком всех позиций, когда мы хотим, чтобы наш объект был анимированным. Поскольку мы лишь хотим оживить наш объект в месте установки (текущее положение прокрутки браузера), мы установили "queue" на ложь.

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

Источник: //net.tutsplus.com

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Верстка сайта для начинающих

Научитесь верстать сайты с нуля.

Смотреть

Метки: , , ,

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

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

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