Як зробити горизонтальне меню в html - html

Попередня ↔ Наступна

Горизонтальне меню зробити досить легко, потрібно лише трохи уяви і знання html і css. Для початку спробуємо зробити просте горизонтальне меню.

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

Головна
HTML
CSS
PHP
SEO

Видно, що це простий ненумерований список, де одному з пунктів присвоєно id. Він присвоєно пункту поточної сторінки, щоб цей пункт відображався по-іншому. Тобто на кожній сторінці він повинен бути присвоєний відповідним пунктом меню. # - URL посилання.
Тепер перейдемо до правил CSS. Перше що нам треба, це те, щоб пункти меню відображалися поруч один з одним, а не один під одним. Для цього пишемо наступне:

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

Далі створюємо самі прямокутники, куди будуть поміщені пункти і внутрішнє відстань в них.

Задаємо, як будуть виглядати відвідані, що не відвідані і пункти меню під покажчиком миші.

І, нарешті, вказуємо вид пункту поточної сторінки.

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