| Уроки CSS |
| Создание вертикального меню CSS |
Из предыдущего урока вы могли узнать, как сделать простое (и симпатичное) меню управляя параметрами рамки у тегов <li> </li> . Но нередко бывает необходимость сделать нечто более оригинальное.
В данном уроке будет рассмотрено создание вертикального меню с использованием изображения – то есть пунктами в меню будут картинки (если сказать по-простому)
Картинка обычного пункта:
Картинки при наведении курсора мышки:
Эти две картинки должны находится в папке images
Меню будет предстовлять из себя список: теги <li></li> заключённые между тегами <ul></ul>
Для тегов <ul></ul> с помощью идентификаторов будут заданы стили:
ul#my_menu – общий стиль для тегов <ul></ul>
ul#my_menu li a – стилья для ссылки заключённой между тегами <li></li>
ul#my_menu li a:hover – стиль пунктов меню при наведении курсора на один из них
ul#my_menu li a span – стиль для текста (названий пунктов в меню)
Создайте два файла: my_menu.css и test_menu.html;
Они должны находиться в одной директории (или напишите путь к папке, где находится файл my_menu.css)
Стиль для меню будет подключаться между тегов <head> </head> в файле test_menu.html
Код в файле my_menu.css
ul#my_menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#my_menu li a{
color: White;
background: url(images/vert_css_menu_0.png) no-repeat 0 0;
text-decoration: none;
width: 200px;
height: 43px;
display: block;
border: none;
}
ul#my_menu li a:hover{
background: url(images/vert_css_menu_1.png) no-repeat 0 0;
width: 200px;
height: 43px;
color: White;
}
ul#my_menu li a span{
font-size: 18px;
padding: 10px 0 0 22px;
display: block;
}
Код в файле test_menu.html
<!DOCTYPE html>
<html>
<head>
<title>Вертикальное меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="my_menu.css" type="text/css" />
</head>
<body>
<ul id="my_menu">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Контакты</span></a></li>
<li><a href="#"><span>О сайте</span></a></li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>Ссылки</span></a></li>
</ul>
</body>
</html>
Результат:
На базе полученных знаний из этого урока вы сможете сделать красивое оригинальное меню (многое зависит от фантазии).
| ◄ Предыдущий урок | Содержание | Следующий урок ► |