Як зробити в html5 меню

21

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

У чому відмінності

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

Ну добре, а чим відрізняється створення головної навігації (меню), раз ви вже читаєте статтю на цю тему, то якісь відмінності точно повинні бути. Ну а як раніше створювалося меню? Зазвичай для цього використовували маркірований список, який поміщали в додатковий контейнер для всієї навігації – звичайний div.

Так от, з появою нових тегів тепер можна вчинити більш правильно – замість тега div обернути меню в nav – новий семантичний елемент, який створений спеціально для того, щоб збирати в нього найголовніші посилання, групувати їх разом.

В nav можна помістити як список, так і просто набір посилань. Мені здається, це навіть більш просте і правильне рішення, хоча в багатьох шаблонах як і раніше видно реалізацію меню за допомогою тегів ul, li, a.

Цікаво, що контейнер nav створений саме для пріоритетних посилань на сторінці. Насправді таких конйтенеров на сторінці може бути більше одного, але поміщати в них варто тільки ті посилання, які дійсно формують головну навігацію (наприклад, верхнє головне меню і його дубль у футері сторінки).

Як зробити з допомогою html5 горизонтальне меню

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

Головна
Послуги
Контакти
Відгуки

Навіть не потрібно ніякого обрамлення в список, все спочатку буде відображатися в один рядок, так як посилання – рядкові елементи.

Інша справа, що по оформленню вони дуже обмежені із-за своїх малих властивостей. Ви зможете оперувати тільки такими властивостями як: колір, розмір шрифту, зовнішні відступи. Якщо ж ви захочете встановити певний колір тла, зробити роздільники й додати внутрішні відступи (або визначити розмір кожного пункту меню) то з рядком так зробити не вийде.

Тут нам доведеться перетворювати наші пункти в блокові елементи. Для цього їм потрібно записати властивість:

display: block;

Тепер вони йдуть зверху вниз, тобто наша навігація стала вертикальної. Щоб знову перетворити її на горизонтальну, потрібно додати певні властивості. Наприклад, замість блочного типу визначити для них блочно-рядковий, або задати їм (float: left). Читайте докладніше про цих способах тут.

Як зробити в html5 меню

Вертикальна навігація

Зазвичай, щоб зробити вертикальне меню в html5 використовують список, але нам годиться і та розмітка, яку я дав вам вище. Як ви побачили, якщо перетворити посилання в блокові, то вони автоматично вишикуються один за одним зверху вниз, тому що два блоки не можуть стояти на одному рядку.

Тепер ви можете застосувати до них потрібні правила оформлення. На блоки діє набагато більше властивостей, ніж на рядковий елемент, тому ви маєте значно більше можливостей. Для прикладу я додав такі:

a{
text-decoration: none;
color: #fff;
padding: 5px;
font-size: 22px;
display: block;
background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
width: 200px;
text-align: center
}

Як зробити в html5 меню

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

Що ще можна зробити

Нарешті, давайте подивимося, як можна зробити меню в html5 з зміною кольору пунктів при наведенні. За додавання стилів до елементу при наведенні відповідає псевдоклас: hover. Відповідно, досить додати до посилань і написати потрібні стилі.

nav a:hover{
color: #000;
background: #fff;
}

Як зробити в html5 меню

Тепер при наведенні на посилання вона буде чорного кольору, а фоновий колір буде білим. Якщо вам потрібно змінити плавно, допишіть властивість transition, значенням якого виступає час в секундах, за який повинні помінятися стилі.

Ну а що ще можна зробити з нашої навігацією, це вже ви самі можете вирішити. Це був просто приклад того, як її можна створити і оформити. Ви можете скористатися будь-якими css-властивості, які тільки знаєте. До речі, для дуже ефектного оформлення будь-яких елементів на веб-сторінці я рекомендую вам переглянути відеокурс по CSS3, який є в нашому преміум-розділі.

Там ви можете знайти всю відповідну інформацію: тіні, повороти, трансформації, напівпрозорість і т. д. Всі кращі прийоми з нової технології ви можете знайти там.

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