Як створити css3 респонсівное меню

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

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

У цьому уроці ми покажемо як створити респонсівное меню навігації, яке буде адаптуватися під різні розміри екрану, за допомогою CSS медіа-запитів.

Параметри дизайну: від маленького до великого екрану

Дизайн меню ми почнемо з його адаптації під мобільні пристрої. По суті, такий підхід має на увазі стратегію дизайну спершу для мобільних пристроїв, а потім для великих екранів настільних моніторів. Базовий дизайн розроблений для популярних розмірів мобільних пристроїв - 320 х 480. Ми будемо використовувати медіа запити для масштабування під великі розміри екранів.

Розміри екранів, для яких призначається меню:

Усередині header ми додали два nav тега, один для кнопки, яка відкриває меню, в той час як інший тег містить пункти меню. Кожен пункт меню містить a span для презентації значка-іконки.

З метою приховування кнопки # menu-button, коли екран досить широкий, щоб меню було постійно видимим поруч з логотипом, ми помістили # menu-drink після # banner-inner-wrapper всередині header. Це дозволить нам розташувати меню поруч або під логотипом.

Ми оспользуем таблицю CSS, щоб встановити розташування контенту хедера - display: table для # banner-inner-wrapper, display: table-row для # banner-inner і display: table-cell для #title і menu-nav.

Навіщо використовувати таблиці CSS? Тому що вони надійніше проти змін макета та вимагає менше роботи, ніж поплавці й display: inline-block, якщо ви хочете зберегти колонки пліч-о-пліч.

Ми також вказали логотипу зменшуватися до доступного простору свого контейнера, застосувавши max-width: 100%. Це запобігає зображення від перебування більше, ніж ширина дана його контейнеру.

Одна зі стратегій, яку слід зазначити, це використання em замість px. Корисною властивістю даного пристрою є те, що він приємно масштабується до поточного розміру шрифту елемента. Щоб вирішити це завдання, розділіть число пікселів на поточний розмір шрифту (в даному випадку 16px).

Ми стилізували кнопку, яка відкриває меню, великою кількістю CSS3 коду. Зокрема, ми використовували border-radius, box-shadow і background-image: linear-gradient (.). Ми також використовували transition властивість, щоб згладити перехід між різними станами кнопки.

Відзначимо, що в CSS, ми виключили браузер / постачальник специфічні властивості, такі як -moz-transition і -webkit-box-shadow, для простоти. У самому файлі CSS ці властивості включені.

Ми змінили стиль кнопки: active, щоб дозволити їй міняти зовнішній вигляд, коли вона була обрана. Крім того, ми додали до неї негативне нижній маржін. щоб вона опустилася, роблячи ВТД, що її обрали / кликнули.

А ось і результат нашого CSS

Щоб переконатися, що меню не займає весь екран, коли воно з'являється, ми розглянули три наступні варіанти:

Варіант 1: відображати всі елементи вертикально, кожен в окремому рядку
Варіант 2: відображати по два елементи в кожному рядку
Варіант 3: Відображати всі елементи по горизонталі, все в один ряд

Варіант 1 був би кращим вибором, якщо єдине обмеження полягало б у ширині екрану, тому що не потрібно було б турбуватися про стиснення елементів. На жаль, висота у нас дуже обмежена, тому ми вибираємо варіант 2.

Для реалізації варіанту 2, ми встановили ширину li до 50%.

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

Переходимо до jQuery коду для меню. Ми використовували jQuery, щоб показати або приховати меню, коли обрана кнопка, а також при зміні розмірів вікна.

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

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.