Створення плаваючого HTML меню з використанням jQuery, CSS

19

На зв’язку Андрій Бернацький.

З даною статтею ми відкриваємо новий розділ на нашому блозі. Даний розділ буде називатися jQuery.

jQuery — бібліотека JavaScript, фокусується на взаємодії JavaScript і HTML.

Втім, без зайвих слів починаємо розглядати нашу першу статті по даній темі.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую завантажити вихідний код, щоб він був у Вас під рукою.

Також результат того, що ми будемо робити, Ви можете подивитися тут.

Для всіх, хто має справу з довгими веб-сторінками і кому необхідно прокрутити вверх сторінки до меню, є хороша альтернатива: плаваюче меню, яке переміщується при прокручуванні сторінки. Це робиться за допомогою HTML, CSS і JQuery, і повністю сумісна з W3C.

Що ми будуємо

У цій статті описується, як створити «плаваюче меню» з використанням HTML, CSS і JQuery. Підкреслюю, плаваюче меню залишається видимим, навіть якщо ви прокрутіть вниз веб-сторінку. Вони анімаційні, тому рухаються вгору і вниз при прокрутці вікна браузера, вгору або вниз. Я збираюся показати вам, як зробити плаваючим меню за допомогою JQuery і CSS, і ми сподіваємося, що з’являться нові учні JQuery:D.

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

Створення плаваючого HTML меню з використанням jQuery, CSS
Створення плаваючого HTML меню з використанням jQuery, CSS

Крок 1

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

  • Home
  • Table of content
  • Exam
  • Wiki
  • Technical support

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

…</ div> у рядку 01, який інкапсулює все меню. Три списки використовуються тільки для демонстрації структури, яка може бути змінена у відповідності з вашими потребами. У цьому випадку, є три розділу в меню, що представлено трьома ненумерованными списками.

Це справа звички, але я відключаю клік по посиланню (href =»#»). Щоб бути впевненим, що клік по посиланню не відправить до початку сторінки, завжди можна поставити OnClick = «Return FALSE;». Цей метод дозволяє додати пункт у меню функцій, таких як lightboxing — те, що змушує сторінку залишитися на своєму нинішньому вертикальному положенні, коли користувач клацає по посиланню меню.

Крок 2

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

body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px «Lucida Grande», «Lucida Sans», «Trebuchet MS», verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}

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

Атрибут «position» використовується, коли потрібно видалити елемент з потоку документа і встановити його в точній місці на вашій сторінці. Якщо ви використовуєте функцію масштабування тексту в браузері, елемент з абсолютним позиціонуванням не буде рухатися, навіть якщо текст навколо нього збільшується в розмірах.

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

Інші елементи таблиці стилів керують візуальним дизайном.

Крок 3

Тепер у нас є меню з трьох пунктів, що з’являється у верхньому правому куті сторінки. Для підвищення ефекту наведення біля пунктів меню, давайте додамо класи menu1, menu2 і menu3 для кожного пункту відповідно (для кожного елемента

    ). У нас буде 3 різних суб-меню завдяки трьом елементам

      . Код є модифікацією коду HTML показаного в кроці 1:

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

      #floatMenu ul.menu1 li a:hover {
      border-color:#09f;
      }
      #floatMenu ul.menu2 li a:hover {
      border-color:#9f0;
      }
      #floatMenu ul.menu3 li a:hover {
      border-color:#f09;
      }

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

      Крок 4

      У нас є приємні оку меню, і ми можемо зупинитися на цьому, але ми хочемо плаваюче меню, так що прийшов час додати jQuery. Вам необхідно завантажити бібліотеку jQuery і Dimensions плагін. Цей плагін буде використаний для захоплення інформації про вікні браузера (ширина, висота, прокрутки тощо). Ви можете зв’язати бібліотеку і плагін jQuery з вашим файлом HTML в розділі …. Тільки не забудьте змінити URL шляху, в відповідності з тими, які відповідають розміщенню jQuery бібліотеки на вашому сервері.

      Нам знадобиться невеликий користувальницький код jQuery, так що починаємо новий розділ , також в рамках частини … Вашого HTML документа:

      Додайте наступний код jQuery всередині розділу:

      $(document).ready(function(){
      // code will go here
      });

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

      Крок 5

      Нам потрібен переглядач для події «прокрутка сторінки». Наш користувацький jQuery сценарій тепер виглядає наступним чином:

      $(document).ready(function(){
      $(window).scroll(function () {
      // code will go here
      });
      });

      Переглядач події перебувати в режимі очікування певної події. Для нашої сторінки – це прокручування вгору та вниз.

      Крок 6

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

      var name = «#floatMenu»;
      var menuYloc = null;
      $(document).ready(function(){
      menuYloc = parseInt($(name).css(«top»).substring(0,$(name).css(«top»).indexOf(«px»)))
      $(window).scroll(function () {
      // code will go here
      });
      });

      Рядки 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 нижче, показується новий код:

      var name = «#floatMenu»;
      var menuYloc = null;
      $(document).ready(function(){
      menuYloc = parseInt($(name).css(«top»).substring(0,$(name).css(«top»).indexOf(«px»)))
      $(window).scroll(function () {
      var offset = menuYloc+$(document).scrollTop()+»px»;
      $(name).animate({top:offset},{duration:500,queue:false});
      });
      });

      Змінна «offset», у рядку 07 вище, містить різницю між початковим розташуванням меню (menuYloc) і виділяє значення ($ (document). ScrollTop ()), в піксельному вимірі. Щоб зробити його робочим, як правило CSS, ми додаємо необхідні одиниці виміру, «px», після числового значення. Тепер ми можемо застосувати вертикальне зміщення, розрахувати позицію в меню, і таким чином змусити його рухатися.

      Щоб зробити так, щоб все це краще виглядало, давайте використовувати варіанти анімації jQuery’s. У нас зберігається назва меню змінної «name» і ми можемо обнулити його в разі необхідності, використовувати його разом з функцією .Animate (). Функція анімації вимагає два значення: (1) властивості стилю, і (2) властивості анімації. У цій статті нам просто потрібно анімувати CSS властивість «top», але щоб вказати додаткові параметри, відокремлюйте кожну пару властивість: значення комою (,).

      Ми використовуємо тут два параметра. «duration» є довжиною анімації в мілісекундах, а «queue» є списком всіх позицій, коли ми хочемо, щоб наш об’єкт був анімованим. Оскільки ми лише хочемо оживити наш об’єкт в місці установки (поточне положення прокрутки браузера), ми встановили «queue» на брехню.

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