Адаптивне меню для сайту на CSS

У цьому уроці ми навчимося створювати адаптивне меню за допомогою CSS.

сайту

адаптивне

Практичний курс з верстки адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Цей прийом практично застосовувати при навігації з безліччю посилань як нижче на скріншоті. Всі кнопки можна стиснути в елегантне меню.

меню

Розмітка nav HTML

CSS-код для адаптивного меню сайту (з точки зору комп'ютера-десктопа) досить простий і нехитрий, тому я не збираюся вдаватися до деталей. Зверніть увагу, що я поставив елемент nav li display:inline-block замість float:left. Це дає можливість кнопкам меню вирівнюватися зліва, центру або праворуч шляхом визначення text-align для елемента ul.

сайту

Практичний курс з верстки адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Вирівнювання по центру та правій стороні

Як мовилося раніше, змінювати вирівнювання кнопок можна з допомогою властивості text-align.

Підтримка Internet Explorer'а

Тег HTML5 nav і медізапит не підтримується Internet Explorer'ом 8 і старішими версіями. Для альтернативної підтримки увімкніть css3-mediaqueries.js (або respond.js) та html5shim.js. Якщо не хочете додавати html5shim.js, замініть тэг nav на div.

Створення адаптивності меню у сайті

Тепер починається найцікавіше – робимо меню адаптивним за допомогою медіа-запиту! Прочитайте мої попередні статті про адаптивний дизайн та медіа-запит, якщо раніше з ними не знайомі.

На контрольній точці 600px я поставлю елементу nav у відносне позиціонування для того, щоб розмістити список меню ul зверху в абсолютній позиції. Приховую всеелементи li вказуючи display:none, але продовжую показувати .current li як блок. Потім у nav hover я встановлюю все li знову на display:block (так згенерується результат випадаючого списку). Я додав графічне зображення іконки «галочки» до поточного елемента .current, щоб показати його активність. Щоб вирівняти меню по центру та правій стороні, застосуємо до списку ul властивості left та right. Побачити остаточний результат можна на демоверсії.