Велике меню, маленький екран, адаптивна багаторівнева навігація.
Якщо вам доводилося працювати над адаптивним сайтом, то, напевно, чимало часу пішло на вирішення одного з суттєвих завдань у цій темі, що активно розвивається: навігації. Для простої навігації рішення може бути прямолінійним та очевидним. Однак для більш складних випадків, наприклад, багаторівневих вкладених списків, що випадають, може знадобитися більш витончене перебудовування пунктів меню.
У запропонованому підході ми будемо використовувати медіа-запити та jQuery для адаптації багаторівневого навігаційного меню, щоб зберегти простоту розмітки та звести до мінімуму використання зовнішніх ресурсів.
Мета: адаптивне меню, що випадає
Ось що ми хочемо отримати у результаті:
- На великих екранах виводиться горизонтальне меню, що випадає, з двома підрівнями, які виводяться при наведенні курсору миші на відповідний пункт.
- На маленьких екранах з'являється кнопка меню, яка відкриває вертикальне меню, підпункти виводяться при натисканні/торканні відповідного пункту.
Наша розмітка складається із простого невпорядкованого списку, в якому є вкладені списки у межах пункту. Класи та ID навмисно не застосовуємо для пунктів списку, за винятком батьківського елемента, щоб меню можна було поєднати з CMS.
Базові стилі
Додамо базові стилі, щоби наш список виглядав як панель навігації.
Ми просто вибудовуємо пункти списку в горизонтальну лінію, встановлюємо кольори та приховуємо підпункти за допомогою абсолютного позиціонування.
Горизонтальне меню, що випадає
Оскільки ми використовуємо абсолютне позиціонування для приховування підпунктів, додамо правила .hover ,які позиціонуватимуть підпункти щодо їхніх батьківських елементів у разі подання (використовуємо jQuery).
Додамо пару рядків jQuery для підключення класу .hover до елементів списку, на які наводиться курсор миші.
Тепер у нас є функціонуюче горизонтальне багаторівневе меню.
Вертикальне меню
Але наше чудове меню виглядає погано на маленьких екранах мобільних пристроїв. Додамо масштабування в мобільних браузерах за допомогою мета-тега viewport.
Звичайно, навіть тепер меню виглядає жахливо, хоча і поміщається на екрані. Потрібно використовувати медіа запит для встановлення відповідних стилів, щоб виводити наш список вертикально після того, як розмір екрану досягне точки розриву. Точка розриву визначається значенням ширини екрана, коли меню починає шикуватися в два рядки, для нашого прикладу - 800px.
У точці розриву видалимо обтікання та встановимо для пунктів та списку властивість width: 100%. Тепер, при наведенні курсору на пункт меню, його список виводиться поверх решти змісту. Нам потрібно, щоб інші пункти батьківського рівня зміщувалися. Замість зміни для неупорядкованого списку положення left, встановимо для властивості position значення static.
Конвертуємо hover у click
Оскільки на сенсорних екранах подія hover недоступна (поки що), створимо код для перевірки ширини вікна та встановлення подій click() та hover() .
Для подій click потрібно змінити цільовий елемент із пункту списку на батьківський пункт, оскільки натискання на батьківському пункті відкриває вкладений список. Проблема полягає в тому, що натискання на посилання призводить до перезавантаження сторінки, але ми не можемо запобігти стандартній поведінці для всіхпосилань, оскільки вкладені пункти містять посилання.
Для вирішення додамо короткий код jQuery, щоб встановити клас .parent для будь-якого пункту, спадкоємці якого мають сестринські елементи, і потім будемо використовувати тільки такі посилання.
Кнопка "Меню"
Тепер наше меню виглядає чудово на мобільних пристроях, але займає дуже багато місця. Популярне рішення для таких випадків - використання кнопки, яка вмикає/вимикає меню.
Додаткові "рюшечки"
Оскільки у нас використовується клас для батьківських елементів, чому б не додати покажчики те що, що у пункті є вкладення?
Так як нам потрібно перевіряти ширину вікна браузера при завантаженні сторінки та зміні розмірів, помістимо весь код умов у спеціальну функцію adjustMenu .
Для виклику функції при зміні вікна браузера використовуємо функцію bind для зв'язки з подіями resize та orientationchange. У цих подіях перевизначимо змінну ww новим значенням ширини вікна браузера.
На цьому етапі у нас з'явилися нові проблеми:
- Все меню зникає, якщо вікно змінюватиметься від маленького розміру до великого.
- Подія hover продовжує працювати за варіантом для мобільних пристроїв.
Висновок та приховування
Проблему зі зникненням легко виправити: потрібно додати $("nav").show() в умову "більше, ніж точка зламу". Таке рішення працює, але має один недолік. Так як код виконується щоразу при зміні розмірів вікна браузера, то відкрите меню буде закриватися. На деяких мобільних пристроях подія resize генерується при прокручуванні сторінки по вертикалі, що призводить до поганої реакції нашого меню.
Для вирішення потрібно перевіряти станменю. Скористайтеся додатковим класом для кнопки "меню", що також можна використовувати для додаткового візуального подання. Кнопка не тільки включатиме/вимикатиме меню, але додаватиме/прибиратиме клас .active . В умови "вже, чим точка зламу", додамо код, який приховуватиме меню, якщо кнопка має клас .active.
Відв'язуємо подію hover
Для вирішення проблеми з реагуванням мобільної версії меню на подію hover скористаємося функцією unbind() всередині умовного блоку "вже, ніж точка зламу".
Однак є ще одна проблема: подія click не працює, якщо змінити розмір браузера з великих значень до маленьких. Причина полягає в тому, що вся функція виконується повністю щоразу при зміні вікна браузера. Для того, щоб проводити перемикання в правильному місці, потрібно відв'язати подію click перед його повторним прив'язуванням.
При зміні розмірів вікна від маленького до великого у нас буде відсутня обробка події hover, оскільки ми її видалили при зменшенні розмірів вікна. Також видалімо всі пункти списку з класом .hover , щоб запобігти наявності відкритих частин меню зі збільшенням вікна браузера.
Задовольняємо IE
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того як здійснити завантаження файлу черезPHP та jQuery ajax.