Створюємо навігаційне меню для сайту, в стилі Lava Lamp

344

Від Автора: Пару тижнів тому я створив скрінкасти, в якому демонстрував, як побудувати трирівневе навігаційне меню. У матчі-е-мейлі один з наших читачів попросив написати підручник про те, як створити навігаційне меню для сайту в стилі Lava Lamp. На щастя, це досить просте завдання, особливо коли використовуєш бібліотеки JavaScript. Сьогодні ми побудуємо одне таке «з нуля».

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Створюємо навігаційне меню для сайту, в стилі Lava Lamp

Крок 1 Створюємо розмітку для нашого навігаційного меню

До того, як створити цю витончену функціональність, нам потрібна основа, з якої ми почнемо працювати. В своєму улюбленому редакторі коду створіть ненумерованний список для навігації і з допомогою Google імпортуйте як jQuery, так і jQuery UI.

SpasticNav Plugin

  • Home
  • About
  • Blog
  • More About My Portfolio
  • Contact
  • Зверніть увагу, що ми призначили id «selected» домашній сторінці. Для більшості сайтів це досить стандартний підхід; він дозволяє відстежити поточну сторінку в списку (прим. перекл. у меню Lava Lamp), відповідно назвавши його конкретний пункт.

    Потім нам потрібно вирішити, як найкраще реалізувати функціональність Lava Lamp. Щоб мати можливість багаторазового використання, ми оформимо цей маленький скрипт як плагін і назвемо його ось так:

    $(‘#nav’).spasticNav();

    Так як ми вирішили побудувати плагін, давайте продовжимо — створимо новий файл для цього скрипта і зробимо на нього посилання в нашій розмітці. Ми назвемо її jquery.spasticNav.js.

    $(‘#nav’).spasticNav();

    Крок 2 Починаємо робити плагін

    Щоб скоротити кількість глобальних змінних, які ми повинні створити, а також прибрати будь-яку можливість конфлікту символу $ з іншими бібліотеками JavaScript, давайте обернем наш плагін в самовыполняющуюся анонімну функцію.

    (function($) {
    })(jQuery);

    Тепер jQuery буде переданий в наш плагін і там буде позначатися як символ $.

    Далі, зазвичай найкраща практика – дати користувачам плагіна як можна більше гнучкості. По суті, ми здійснюємо передачу опцій при виклику плагіна у вигляді об’єктної константи, яка буде містити набір змінюваних параметрів. На мою думку, вони повинні забезпечувати можливість:

    Встановити величину перекриття для нашого маленького потовщення (тобто курсору), наскільки курсор перевищить висоту навігаційного меню.

    Встановити швидкість

    Встановити повернення у вихідне положення, який змусить курсор повернутися назад до позиції поточної сторінки (за умови, що користувач не натискає на посилання)

    Встановити колір курсора. Ця установка також може бути виконана за допомогою CSS, проте використання опції плагіна більш зручно.

    Встановити ефект пом’якшення.

    Тепер ми назвемо свій плагін та призначимо йому функцію. $.fn – це просто псевдонім для jquery.prototype.

    $.fn.spasticNav = function(options) {
    };

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

    Крок 3 Опції конфігурації

    Тепер, коли ми позначили свій плагін, наступним кроком буде створення опцій конфігурації.

    options = $.extend({
    overlap : 20,
    speed : 500,
    reset : 1500,
    color : ‘#0b2b61’,
    easing : ‘easeOutExpo’
    }, options);

    Вище ми встановлюємо змінну опцій, визначаючи деякі властивості і значення за замовчуванням, а потім розширюючи їх значеннями, яке передає користувач, коли викликає плагін. Таким чином, передаються опції заміщають наші установки за замовчуванням. Наприклад, коли я викликаю цей плагін, то передаю:

    $(‘#nav’).spasticNav({
    speed : 2000,
    easing : ‘easeOutElastic’
    });

    Ці дві властивості замінять установки за замовчуванням в той час, як інші налаштування залишаться тими ж самими.

    Крок 4 Реалізуємо функціональність

    Тепер ми готові пройтися по кожному елементу налаштувань, переданим цього плагіну, і реалізувати функціональність Lava Lamp. Запам’ятайте, ми не можемо припускати, що користувач збирається передати цьому плагіну один єдиний елемент. Він може, якщо захоче, передати посилання на клас, який посилається на кілька елементів, з яких ми повинні отримати необхідну функціональність. По суті, ми викличемо this.each, щоб обійти кожен елемент замкнутого безлічі.

    return this.each(function() {
    });

    Усередині цієї функції ми створимо кілька змінних. Не всі з них тут же отримають значення, але так як движок JavaScript у будь-якому випадку піднімає всі назви змінних наверх функції (за лаштунки сцени), в цілому, краща практика – це оголосити їх нагорі, а пізніше ініціалізувати.

    var nav = $(this),
    currentPageItem = $(‘#selected’, nav),
    blob,
    reset;

    nav: “Кешує” this, обгорнутий в об’єкт jQuery.

    currentPageItem: Містить елемент списку у якого атрибут id встановлений на “selected”. Ми передаємо другий параметр, щоб встановити контекст, звідки починати пошук. Таким чином, нам не потрібно обходити весь dom, щоб знайти цей елемент.

    blob: за відсутністю кращого слова ця змінна буде посилатися на підсвітку, яка буде слідувати за мишею, коли ми будемо проводити над нею меню.

    reset: Ця буде зберігати посилання на функцію setTimeout, яку ми створимо пізніше. Вона потрібна для того, щоб викликати clearTimeout. Детальніше про це потім…

    Тепер, коли ми оголосили/ініціалізувати змінні, давайте створимо, так би мовити, сам курсор.

    $(‘

  • ‘).css({
    width : currentPageItem.outerWidth(),
    height : currentPageItem.outerHeight() + options.overlap,
    left : currentPageItem.position().left,
    top : currentPageItem.position().top – options.overlap / 2,
    backgroundColor : options.color
    }).appendTo(this);

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

    width: Отримати ширину currentPageItem, включаючи будь-які рамки і відступи.

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

    left: Встановлює властивість left курсору ідентично лівої позиції currentPageItem. (Ми повинні встановити контекст позиціонування в нашому CSS для цієї величини, щоб це дія спрацювало).

    top: Точно так само встановлює верхнє значення і центрує курсор вертикально.

    backgroundColor: Встановлює колір фону.

    Нарешті ми додаємо цей новий елемент до списку this або #nav.

    Далі, нам потрібно зберегти на #blob. Таким чином, нам не доведеться здійснювати пошук в DOM кожен раз, коли ми хочемо отримати до нього доступ. Ми вже оголосили змінну blob вгорі функції. Тепер давайте ініціалізуємо її.

    blob = $(‘#blob’, nav);

    Крок 5 Подію Hover

    Тепер ми повинні “прослуховувати”, коли користувач проводить над (hovers over) одним з елементів списку (за винятком курсору, зрозуміло) в нашому навігаційному меню. Коли він це зробить, ми встановимо властивості ширини та лівого краю курсору рівними того елементу списку, над яким тільки що провели мишею.

    $(‘li:not(#blob)’, nav).hover(function() {
    // mouse over
    clearTimeout(reset);
    blob.animate(
    {
    left : $(this).position().left,
    width : $(this).width()
    },
    {
    duration : options.speed,
    easing : options.easing,
    queue : false
    }
    );
    }, function() {
    // mouse out
    reset = setTimeout(function() {
    blob.animate({
    width : currentPageItem.outerWidth(),
    left : currentPageItem.position().left
    }, options.speed)
    }, options.reset);
    });

    Щоб резюмувати написане вище…

    Отримуємо усі елементи списку – не #blob – всередині навігаційного меню, і, коли над ними проведуть мишею, запускаємо функцію.

    Анимируем курсор і встановлюємо його властивості лівого краю і ширини, рівними елементу списку, над яким провели мишею.

    Передаємо об’єктну константу як другий параметр анімації, встановлюючи тривалість і ефект пом’якшення рівними тим, що ми визначили в наших конфігураційних опцій. Параметр queue (черга) встановлений false (брехня), щоб запобігти повтори анімації.

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

    Ось і все, що потрібно! Це – суперпростой плагін. Наступним кроком буде дизайн нашого навігаційного меню.

    Крок 6 Оформлення меню

    Без стилів, наше навігаційне меню для сайту має виглядати схожим на це:

    Створюємо навігаційне меню для сайту, в стилі Lava Lamp

    Давайте спочатку оформимо “nav” ul. Відкрийте файл style.css і додайте:

    #nav {
    position: relative;
    background: #292929;
    float: left;
    }

    Створюємо навігаційне меню для сайту, в стилі Lava Lamp

    Потім оформимо кожен елемент списку.

    #nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
    }

    Цей стиль просто дає можливість вільно переміщатися кожному елементу списку ліворуч і додає з кожної сторони краю.

    Створюємо навігаційне меню для сайту, в стилі Lava Lamp

    Рухаючись далі, ми повинні оформити теги гіперпосилань у нашому навігаційному меню.

    #nav li a {
    color: #e3e3e3;
    position: relative;
    z-index: 2;
    float: left;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 30px 45px;
    }

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

    Створюємо навігаційне меню для сайту, в стилі Lava Lamp

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

    ul, li {
    margin: 0; padding: 0;
    }

    Останній крок – застосувати стиль до самого курсору!

    #blob {
    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    position: absolute;
    top: 0;
    z-index : 1;
    background: #0b2b61;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left, top, left bottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
    }

    І тут ми знову встановлюємо гарні кольори для кордонів і додаємо кольору фону (включаючи градієнти/кордону/тіні CSS3 для браузерів Firefox і Safari/Chrome). Тут ми ще раз бачимо те саме властивість z-index. Без нього курсор буде відображатися поверх усього тексту в навігаційному меню (тобто закривати його). Щоб протистояти цьому, ми повинні бути впевнені, що його властивість z-index МЕНШЕ, ніж властивість елемента у списку! Ми також повинні встановити абсолютне позиціонування, щоб мати можливість регулювати значення left і top в коді нашого плагіна.

    Створюємо навігаційне меню для сайту, в стилі Lava Lamp

    Висновок

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

    Перегляд Demo

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

    E-mail: [email protected]

    Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

    P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.