Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки 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>

Результат:



На базе полученных знаний из этого урока вы сможете сделать красивое оригинальное меню (многое зависит от фантазии).



◄ Предыдущий урок Содержание Следующий урок ►