Останнім часом деякі сайти, такі як This is Brigade або All You. почали використовувати динамічне анімоване меню, яке змінює розмір при прокручуванні сторінки вниз. Зменшення розміру панелі навігації залишає більше місця для контенту. У цьому уроці я покажу, як зробити таке плаваюче меню, використовуючи HTML5, CSS3 і трохи jQuery.
Меню такого типу відмінно підходить, якщо ви хочете сфокусувати увагу користувача на вмісті і в той же час зробити велику панель навігації. В цьому випадку, при відкритті сторінки можна відобразити, наприклад, великий логотип, а при прокручуванні сторінки панель навігації буде зменшуватися, фокусуючи основну увагу на вмісті.
Є кілька способів створення такого меню. У цьому уроці я покажу, як створити плаваюче меню, яке буде змінювати висоту разом з логотипом, створивши просту зменшену версію. Ви також можете замінити логотип на інший варіант зображення, наприклад, ініціали або іконку.
Перш, ніж ми почнемо, ви можете подивитися демо або завантажити вихідні прикладу.
Тепер додамо код для меню, а також деякі інші деталі в head нашого HTML-файлу.
Створення базової HTML-структури
Ми почнемо з написання основного HTML-коду, який нам знадобиться. Відправною точкою буде дуже проста структура HTML5.
В
ми додали мета-тег author, щоб вказати творця файлу; далі ми підключили знаменитий reset.css Еріка Мейєра для того, щоб скинути дефолтні стилі елементів в HTML-файлі, отримавши для роботи чистіший і простий документ. І, оскільки ми будемо використовувати JQuery пізніше, в останньому рядку елемента head ми підключаємо його через JQuery CDN.
Я підключив більшість файлів віддалено, щоб зберегти документ як можна більш простим, але, якщо ви віддаєте перевагу, ви можете завантажити останні версії всіх цих файлів і використовувати їх локально, і це може запобігти можливим проблемам сумісності або зміни цих файлів в майбутньому.
В
ми використовували стандартний елемент HTML5 . наш буде розтягуватися на всю ширину і підстроюватися під велику й маленьку версію меню. Елементу header ми додали клас «large», за допомогою якого зможемо змінювати її властивості CSS при перемиканні меню на зменшену версію. елемент