Створюємо динамічний і анімаційне меню

Попередня ◈ Наступна

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

МАГАЗИН Лендінзі УНІВЕРСИТЕТ АКЦІЇ ВІД ПАРТНЕРІВ

Створюємо динамічний і анімаційне меню

Напевно ви бачили на деяких веб-сайтах динамічні і анімовані меню, які змінюються при прокручуванні вниз. Мінімізуючи головне меню навігації, ви залишаєте більше місця для утримання. У цьому уроці ми пояснимо, як ви можете створити меню самостійно за допомогою HTML5, CSS3 і трохи jQuery.

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

Створення базової структури в HTML5

Ми почнемо з створення основного HTML коду, який нам знадобиться. Для початку, ми будемо дотримуватися дуже простої структури HTML5.


Тепер, коли наш початковий HTML код написаний, ми додамо код для меню, а також деякі інші деталі для хедера нашого HTML файлу.

Оскільки у нас тут немає ніякого контенту,

буде використовуватися, щоб розтягнути сторінку і змусити діяти прокрутку.

І це все за HTML частини. Тепер нам потрібно стилізувати елементи за допомогою CSS і зробити меню динамічним.

Стилізація меню і сторінок

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


Трохи цього CSS зробить наше меню 960px шириною по центру, при організації нашого меню праворуч і логотипу зліва. Ми також імпортуємо Amaranth шрифт від Google Web Fonts, щоб використовувати його для нашого тексту на сторінці.


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


Тут ми закінчуємо основну стилізацію нашого заголовка.

слугуватиме нашим меню контейнером. Він буде містити наш
Попередня ◈ Наступна