Уроки веб-дизайну. Як зробити навігаційне меню в модному flat-стилі
Меню, що випадає - це зручно, але сьогодні воно вже не актуальне. Ми писали про деякі альтернативи такому виду навігації, а сьогодні навчимося робити ще щось стильне і цікаве: меню з химерними ефектами при наведенні.
Виконано воно буде в плоскому стилі. Це тренд, який тримається на піку вже кілька років. Візьмемо чисті яскраві кольори і прості іконки.
Будемо використовувати різні прийоми CSS, так що розібратися в створенні меню зможе навіть початківець дизайнер.
Кваліфікаційні вимоги знання HTML і CSS.
концепція меню
Ось так буде виглядати наше меню:
У ньому використані іконки з набору Linecons і шрифт Google Webfonts - Dosis. Плоскому стилю відповідають чисті кольори і прості квадратні кнопки.
Принцип роботи меню простий - коли ви наводите мишку на кнопку, збоку праворуч з`являється напис того ж кольору, якого сама кнопка (батьківський блок).
Як виглядає кінцевий результат
Крок 1. HTML
Перш ніж почати роботу з будь-яким стилем, необхідно побудувати конструкцію в HTML. Елементи HTML5, такі як (Задає навігацію по сайту- в нього поміщають пріоритетні посилання), підтримуються в навіть через IE, за допомогою плагінів, таких як html5shiv.
Flat Nav
Home
About
Portfolio
Contact
Відео: Створюємо Landing page в стилі Flat design Навчання веб дизайну Урок 2
Як бачите, файл має звичайну структуру HTML-документа. Шрифт DOSIS налаштований за допомогою Google Web Fonts, додається його таблиця стилів. Фактична структура меню навігації укладена в навігаційний тег , всередині якого - типовий невпорядкований список. Кожен елемент списку містить посилання. Щоб встановити свій стиль для кожного посилання, ми уклали її назву в тег.
Крок 2. CSS
Прописуємо стилі для списку всередині елемента навігації .
nav ul {
list-style: none; overflow: hidden- position: relative;
}
nav ul li {
float: left; margin: 0 20px 0 0;
}
Стиль меню починається зі зміни зовнішнього вигляду маркованого списку шляхом видалення точок (list-style: none) І установки кожного пліч-о-пліч.
Виходить ось така картина:
nav ul li a {
display: block- width: 120px; height: 120px;
background-image: url (icons.jpg) - background-repeat: no-repeat;
}
nav ul li: nth-child (1) a {
background-color: # 5bb2fc;
background-position: 28px 28px;
}
nav ul li: nth-child (2) a {
background-color: # 58ebd3;
background-position: 28px -96px;
}
nav ul li: nth-child (3) a {
background-color: # ffa659;
background-position: 28px -222px;
}
nav ul li: nth-child (4) a {
background-color: # ff7a85;
background-position: 28px -342px;
}
Тепер кожен анкор всередині списку стилізуємо під квадрат зі стороною 120 пікс ... Перетворимо його з сатиричного в блоковий елемент за допомогою властивості display зі значенням block. Всі ікони були експортовані з Photoshop в одному спрайт, тому файл icons.jpg додається в якості фонового зображення для всіх анкоров, з використанням універсального селектора - nav ul li a.
Будь унікальний стиль для кожного окремого анкора потім додається за допомогою селектора nth-child, із зазначенням номера, для кожного окремого, грунтуючись на їх порядку. Так нам не потрібно додавати окремі класи в HTML-документ, і тим самим захаращувати його.
Потім задаємо колір фону для кожного блоку, і вказуємо координати потрібної іконки на спрайт (background-position).
результат:
Як бачимо, вже вималювалися наші кнопки. Тепер потрібно доопрацювати посилання.
nav ul li a span {
font: 50px «Dosis», sans-serif- text-transform: uppercase;
position: absolute- left: 580px; top: 29px;
display: none;
}
Прописуємо стилі для селектора nav ul li a span, тобто вмісту всередині кожного тега .
Задаємо стиль шрифту Dosis, встановлюємо розмір - 50 пікселів. властивість text-transform допоможе перевести шрифт у верхній регістр (немов написано капс).
За замовчуванням кожна мітка вирівнюється в лівому верхньому кутку кожного блоку навігації, але нам потрібно, щоб вони всі були праворуч від меню. Для цього ми просто додаємо position: absolute. Пам`ятаємо, що для nav ul раніше ми встановили position: relative, тому відлік буде вестися від краю батьківського елементу, а не від краю вікна браузера.
Вийшло ось що:
Тому ще потрібно попрацювати зі стилями.
nav ul li a: hover span {
display: block;
}
nav ul li: nth-child (1) a span {
color: # 5bb2fc;
}
nav ul li: nth-child (2) a span {
color: # 58ebd3;
}
nav ul li: nth-child (3) a span {
color: # ffa659;
}
nav ul li: nth-child (4) a span {
color: # ff7a85;
}
Всі номери показуються відкритими одночасно. Ми прописували раніше для nav ul li a spanвластивість display: none. Щоб при наведенні мишки показувалася певна напис, пишемо протилежне значення для nav ul li a:hover span - display: block. Тепер залишається тільки прописати колір для кожного посилання, такий же, як у кнопок.
весь CSS
Ось весь CSS-файл, щоб ви могли його скопіювати собі.
nav ul {
list-style: none; overflow: hidden- position: relative;
}
nav ul li {
float: left; margin: 0 20px 0 0;
}
nav ul li a {
display: block- width: 120px; height: 120px;
background-image: url (icons.jpg) - background-repeat: no-repeat;
Відео: Уроки веб-дизайну в Photoshop
}
nav ul li: nth-child (1) a {
background-color: # 5bb2fc;
background-position: 28px 28px;
}
nav ul li: nth-child (2) a {
background-color: # 58ebd3;
background-position: 28px -96px;
}
nav ul li: nth-child (3) a {
background-color: # ffa659;
background-position: 28px -222px;
}
nav ul li: nth-child (4) a {
background-color: # ff7a85;
background-position: 28px -342px;
}
nav ul li a span {
font: 50px «Dosis», sans-serif- text-transform: uppercase;
position: absolute- left: 580px; top: 29px;
display: none;
}
nav ul li a: hover span {
display: block;
}
nav ul li: nth-child (1) a span {
color: # 5bb2fc;
}
nav ul li: nth-child (2) a span {
color: # 58ebd3;
}
nav ul li: nth-child (3) a span {
color: # ffa659;
}
nav ul li: nth-child (4) a span {
color: # ff7a85;
}
Ось фінальний вигляд меню:
Посилання на демо-версію
От і все. Тепер ви можете використовувати таке стильне меню на своєму сайті-портфоліо.
