Від автора: Меню – мабуть, найважливіший елемент сайту для користувачів, оскільки саме завдяки йому можлива навігація по ресурсу і швидкий перехід у цікаві розділи. Давайте подивимося, як відбувається створення меню сайту.
Навігація в wordpress
У кожному шаблоні ви можете в візуальному режимі створити своє меню і поставити його в одну з можливих областей. Для цього перейдіть Зовнішній вигляд – Меню. Тут ви можете створити або редагувати вже наявне.
В навігацію можна додати рубрики, сторінки, а також посилання на інші сторінки, в тому числі і вншние. Тобто цими довільними посиланнями можуть бути будь-які посилання, як би примітивно це не звучало. В тому числі посилання на інші сайти або на якісь ваші записи.
У візуальному режимі ви можете просто наповнити навігацію посиланнями, а також вибрати область для її відображення. Взагалі кількість і позиції таких областей залежать від шаблоні. В одному 1 така сфера, в іншому може бути 4-6.
Що робити, якщо ви хочете змінити саме зовнішній вигляд? Для цього корисно буде скористатися інструментом для розробників – відладчиком. Хоча ви не розробник, він вам стане в нагоді.
Для його запуску в Google Chrome або Яндекс. Браузері натисніть F12. Вам потрібно знайти, який шматочок коду відповідальний за виведення блоку меню. А точніше, нам потрібно виявити стильової клас або ідентифікатор у навігаційного блоку. Якщо це вийде, то можна буде знайти в css-стилі для цього елемента і змінити їх на свої.
При наведенні на html-код відладчик буде підсвічувати вам елемент, який він формує. Так можна знайти потрібний елемент швидко і просто. Всього лише в 2 кличу знайшли, що наше меню знаходиться в блоці з класом all-width і лежить в тезі nav.
Праворуч буде відображатися css-код елемента. Наприклад, ви можете вибрати сам список, його пункти або посилання, клацнувши по ним в налагоджувач, а праворуч з’являться стилі для них. Редагуючи стилі, ви відразу зможете бачити результат. Це дуже корисно. Ви можете змінити зовнішній вигляд меню так, як вам треба. Але пам’ятайте, що зміна коду в налагоджувач ніяк не впливає на реальний вигляд меню. Після цього вам потрібно зайти на сервер і відредагувати style.css вручну, внісши потрібні поправки.
Меню з допомогою html
Тепер можна подивитися, як насправді в коді виглядає практично будь-меню. Для його створення сьогодні прийнято використовувати контейнер nav. Це парний html-тег, який зазвичай поміщають важливі посилання, які є на сторінці. Виводять такі посилання зазвичай маркованим списком, в ньому розташовуються пункти списку, а вже у них – самі посилання, тобто теги із зазначенням обов’язкового атрибута href та інших атрибутів, якщо вони будуть необхідні.
За замовчуванням таке меню буде вертикальним. Вже в css виконується настройка зовнішнього вигляду. По-перше, прибирають маркери у списку. По-друге, відображають меню таким чином, як воно повинно бути відображено. Тобто якщо воно має бути горизонтальним, то блокові елементи перетворюють в терміново-блокові, або роблять їх плаваючими.
Загалом, створення меню сайту в html виглядає приблизно так:
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
І виглядає ось так:
У реальному меню, зрозуміло, в атрибуті href повинні бути посилання на різні сторінки. Ідентифікатор можна задати як для nav, так і для самого контейнера списку, це не так важливо.
Власне, подальша робота відбувається в css. Наприклад, якщо вам потрібно прибрати маркери і зробити всі пункти в ряд, то використовують наступні властивості:
#menu ul{
list-style: none;
}
#menu li{
float: left;
padding: 15px;
}
І ось наша навігація виглядає вже більш цивілізовано. А саме, ось так:
Залишається зробити наші посилання блочними елементами і застосувати до них потрібні стилі. Наприклад, це може бути колір фону, відступи, колір тексту і т. д. Також для того, щоб оживити навігацію, зазвичай стилі змінюють при наведенні на пункт.
#menu li a{
display: block;
background: purple;
padding: 10px;
color: #fff;
}
#menu li a:hover{
background: #333;
}
І тепер навігація придбала людський вигляд:
Можна і далі продовжувати працювати зі стилями і довести оформлення до того стану, яке вам необхідно. Якщо ви верстаєте меню чисто для себе, то просто можете вибрати для себе оптимальні кольору, вибрати оптимальні розміри посилань і реалізувати все це в коді. Ну а якщо вищенаведений код був для вас не дуже зрозумілий, рекомендую вам пройти серію уроків по css для новачків, це дозволить вам навчитися оформляти html-елементи і розуміти, як працюють ці технології у зв’язці.
Що ж, у мене на цьому все. Тепер можна практикуватися і створювати своє унікальне оформлення для навігації на будь-якому веб-ресурсі.
