В даному уроці ми зробимо навігаційну панель, яка залишається на своєму місці при прокручуванні вмісту сторінки. І, звичайно ж, можна застосувати пару хитрощів для поліпшення зовнішнього вигляду і функціоналу.
Стрічки є досить популярним елементом веб дизайну. Їх досить часто можна зустріти в варіанті з трикутними кінцями. Стрічки ненав'язливо розривають плоску парадигму дизайну на окремі блоки. В даному уроці ми продемонструємо альтернативний спосіб для формування зовнішнього вигляду стрічок, який надає їм більш елегантний вигляд на відміну від звичайних трикутних решт.
В даному уроці ми будемо використовувати елемент HTML5 nav в якості контейнера для горизонтально списку посилань. А також опишемо, як зробити його більш приємним для очей за допомогою CSS.
Крок 1. Контейнер для навігації
Безсумнівно, що ви вже знайомі з великим набором нових елементів введених HTML5. В даному прикладі ми використовуємо два з них.
Ми будемо використовувати явне визначення ширини для навігаційної панелі. Вона буде на 28px ширше контейнера змісту, а її положення її виступів забезпечуються негативним лівим полем. Також забезпечимо злегка закруглені кути верхньої межі за допомогою border - * - radius і невеликий довільно певний відступ.
Потім ми додаємо невпорядкований список посилань в панель навігації і встановлюємо для його пунктів властивість display: inline-block. щоб виводити їх в одну лінію. Нам не потрібні ніякі мітки списку, тому додамо властивість list-style: none.
На даний момент наша панель буде виглядати приблизно так:
Крок 2. Закруглені кінці стрічки
Тепер, якби CSS допускав можливість мати безліч псевдо елементів (наприклад. After :: after), ми б могли зробити округлені кінці навігаційної панелі семантично правильним способом. Але, нам доведеться використовувати два випадають з семантики елемента div в кінці nav. Визначимо для них класи nav-left і nav-right. Вони мають 14px ширини і 14px висоти, позиціонуються абсолютно в 14px від низу nav.
Сімейство властивостей border-radius може приймати 2 значення для кожного кута. Також можна використовувати відсотки для установки ширини, що є досить зручним методом - дозволяє автоматично адаптувати радіус заокруглення до змін розмірів прямокутника.
Невеликі "тіні", які завершують створення зовнішнього вигляду панелі, створені за допомогою псевдо-елементів. after. Їх висота і ширина, також як і радіус заокруглення рамки встановлюються у відсотках.
Тепер панель навігації буде виглядати так:
Крок 3. Скрипт
Включаємо jQuery і Waypoints в код сторінки.
Перше, що потрібно зробити, зареєструвати точку за допомогою методу .waypoint () для елемента. Звичайно, нічого не відбувається - потрібно визначити функцію для обробки події. Найпростіший спосіб визначення функції -Передача параметрів функції .waypoint ().
Ви можете спробувати плагін в дії: додати наступний код в скрипт і поспостерігати за повідомленням, яке буде спливати під час прокручування панелі навігації.
Тепер, щоб отримати бажаний ефект, потрібно ускладнити процес. Спочатку укладемо нашу навігаційну панель в контейнер, який буде точкою і служить як зручне місце розміщення (дивись код нижче).
В CSS створюємо наступне правило.
І змінюємо скрипт наступним чином:
Ви цілком правомочні задати питання: "Що тут відбувається?". Ймовірно ви здогадалися, що ми прив'язуємо точку до контейнера nav-container. але в цей раз ми користуємося іншим способом. Замість безпосередньої передачі функції обробника методу .waypoint () ми інкапсуліруем її в об'єкт. Великої різниці для функціонування немає. Об'єкт, який ми передаємо, може містити кілька інших опцій, що зробить його досить зручним для використання в подальшому.
Функція обробник, яку ми визначили, приймає два параметри. Перший - стандартний об'єкт jQuery event. який нам не цікавий. Другий - специфічний для плагіна Waypoints, є рядком 'down' або 'up'. в залежності від напрямку прокручування, яким досягається точка.
Круто? Однак, якщо ви повільно перейдіть вниз за точку, яка тільки що створена, то зможете помітити "стрибок" змісту, викликаний видаленням панелі навігації з потоку документа. Крім зіпсованого зовнішнього вигляду, така поведінка може призвести незрозумілим помилок при виведенні змісту сторінки. На щастя, таку помилку легко виправити - додаємо наступний код в функцію обробки, і стрибка не буде.
Крок 4. Вертикальний зсув
Перше, що треба врахувати - додатковий простір над фіксованим елементом. Використання змінної offset полегшує вирішення: для зміщення в 15px додаємо offset: 15px до опцій методу .waypoint () і міняємо top: 0px на top: 15px в правилах класу .sticky.
Невеликий градієнт над панеллю навігації може поліпшити дизайн. Додати його легко за допомогою додаткового елемента div в елемент nav і коду CSS для нього:
Крок 5. Функція зсуву
Одна з чудових можливостей плагіна - динамічне визначення зміщення точки:
В даному прикладі обробник буде запускатися в момент, коли користувач вже прокрутив сторінку на 50px нижче нижньої межі елемента (знати висоту елемента не потрібно).
Примітка: такі генеруються зміщення (також, як і задані у відсотках) будуть обчислюватися кожен раз при зміні розмірів вікна. додавання нових точок або модифікації опцій точок. Якщо ви виконуєте операції, що впливають на позиціонування точок (такі як зміна шаблону DOM або сторінки) потрібно викликати $ .waypoints ( 'refresh') для перерахунку позицій.
У контексті нашого уроку ми використовуємо даний функціонал для плавного вислизання навігаційної панелі зверху:
Тут стандартні операції jQuery: додавання або видалення класу sticky до елементу nav. змінюємо вертикальне позиціонування за допомогою методу .css (). і потім виконуємо .animate (). Метод .stop () служить для запобігання можливих помилок, очищаючи чергу подій jQuery.
Крок 6. Виділення і плавна прокрутка
Дуже корисним може виявитися визначення контактних осіб, відповідних сучасному стану на сторінці. За допомогою плагіна Waypoints завдання легко вирішується. Потрібно додати в скрипт наступні рядки:
Код, який ми використовуємо в обробнику досить очевидний:
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!