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

22

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

Від автора: я вже писав підручник про те, як зробити мобільний навігацію для адаптивного дизайну, тепер я відкрив нову методику створення адаптивного меню без застосування Javascript’а. У ньому використовується чистий семантична розмітка HTML5. Меню можна вирівнювати по лівій стороні, по центру або праворуч. На відміну від попереднього підручника, де його потрібно перемикати, це меню перемикається при проведенні мишею, що більш зручно для користувача. У ньому також є індикатор, що показує активний/поточний елемент меню. Воно працює у всіх мобільних і настільних браузерах, включаючи Internet Explorer!

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

Мета уроку «Створення адаптивного меню для сайту»

Мета уроку щодо створення адаптивного меню для сайту — показати вам, як на маленькому дисплеї перетворити звичайне меню-список випадаюче меню.

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

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

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

Розмітка nav HTML

Ось розмітка адаптивного меню для сайту. Тег nav потрібно для створення випадного меню з властивістю css position:absolute. Пізніше в підручнику я це поясню. Клас .current показує активну/поточну посилання меню.

  • Portfolio
  • Illustration
  • Web Design
  • Print Media
  • Graphic Design

CSS

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

/* nav */
.nav {
position: relative;
margin: 0 20px;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 10px 5px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}

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

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

/* правий nav */
.nav.right ul {
text-align: right;
}
/* центральний nav */
.nav.center ul {
text-align: center;
}

Підтримка 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. Побачити остаточний результат можна на демоверсії.

@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: 1px solid #aaa;
background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* приховайте всі елементи <li> */
margin: 0;
}
.nav .current {
display: block; /* показуйте тільки поточний елемент <li> */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* при проведенні мишею */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}
/* по правій стороні */
.nav.right ul {
left: auto;
right: 0;
}
/*по центру */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}