Вертикальне меню css - уроки css

Створення вертикального меню CSS

З попереднього уроку ви могли дізнатися, як зробити просте (і симпатичне) меню керуючи параметрами рамки у тегів

. Але нерідко буває необхідність зробити щось більш оригінальне.

В даному уроці буде розглянуто створення вертикального меню з використанням зображення - тобто пунктами в меню будуть картинки (якщо сказати по-простому)

Картинка звичайного пункту:

Картинки при наведенні курсору мишки:

Ці дві картинки повинні знаходиться в папці images

Меню буде предстовляю з себе список: теги

ув'язнені між тегами

для тегів

за допомогою ідентифікаторів будуть задані стилі:

ul # my_menu - загальний стиль для тегів

ul # my_menu li a - стиль для посилання укладеної між тегами

ul # my_menu li a: hover - стиль пунктів меню при наведенні курсору на один з них
ul # my_menu li a span - стиль для тексту (назв пунктів в меню)

Створіть два файли: my_menu.css і test_menu.html;
Вони повинні знаходитися в одній директорії (або напишіть шлях до папки, де знаходиться файл my_menu.css)
Стиль для меню буде підключатися між тегів в файлі test_menu.html

Код в файлі my_menu.css

Код в файлі test_menu.html

На базі отриманих знань з цього уроку ви зможете зробити красиве оригінальне меню (багато що залежить від фантазії).