У цьому уроці ми розглянемо приклад створення меню без зображень, в стилі Apple і всього лише за допомогою CSS3! Єдина проблема полягає в тому, що робота такого роду меню обмежується кількістю браузерів, які будуть в змозі правильно відобразити ваші старання (тільки Firefox і Safari). Тому якщо ви хочете забезпечити правильну роботу меню в інших браузерах, подбайте про належних зображеннях і альтернативному коді.
Перевага використання CSS3 полягає в тому, що це значно зменшує час завантаження сторінки. Чим швидше тим краще.
Зараз меню повинно виглядати так:
Тепер ми додамо ще один атрибут CSS3 під назвою border-radius, який закруглити куточки наших посилань на кожному кінці сторін. Зробити це можна за допомогою first-child і last-child.
Потрібно додати марджін в 1px (margin) вправо від нашого li, щоб створити простір, для показу нашого ul фону.
Додаємо градієнт до ul фону:
Тепер ми повинні додати наше hover і active стан. Це досить просто, той же код але різні селектори:
Для статусу - active:
Фінальний результат повинен виглядати так:
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
