| Уроки CSS |
| Создание горизонтального меню CSS |
Создание горизонтального меню может оказаться сложнее и дольше по времени, чем вертикального меню.
В этом уроке будет показано "конструирование" простого, красивого, зелёного меню.
Для этого понадобятся 3 картинки:
Изображение на заднем фоне:
Изображение для неактивного пункта меню:
Изображение для пункта меню, на который навели курсор мышки (hover):
Так же будет ещё одно состояние – активный пункт меню. Для него будет применено тоже самое изображение, что и для события hover.
(Вместо этих картинок вы можете подключать свои - "поинтересней", так как в уроке показан только основной принцип).
Само меню будет представлять из себя списки, к которым будут применены некоторые "особые" стили. Сами пункты меню должны находится в странице расширения .html, к которой будет подключаться файл со стилем, имеющий расширение .css
В коде страницы с CSS-стилями следует обратить внимание на следующее:
background: … repeat-x - означает повтор изображения только по оси X;
background: … 12px 5px no-repeat – параметры для пунктов меню (отступы);
Величина отступа сверху равна 5 пикселям - то есть она регулирует высоту пунктов меню;
float: left – данный параметр определяет, что пункты меню будут прижиматься к левому краю; И следует заметить, что благодаря параметру - float: left меню становиться горизонтальным а не вертикальным.
С помощью параметров padding-left: 40px; и padding-right: 35px; можно регулировать длину пунктов меню;
И так, исходный код меню.
Содержание файла gor_menu.css
.gor_menu {
margin: auto;
padding: 0;
height: 30px;
width: 100%;
background: url("images/gor_menu_fon.png") repeat-x;
}
.gor_menu li {
list-style:none;
}
.gor_menu li a {
font-size: 14px Arial;
text-decoration: none;
color: White;
background: url("images/gor_menu_punkt.png") 12px 5px no-repeat;
float: left;
padding-left: 35px;
}
.gor_menu li a span {
line-height: 30px;
float: left;
padding-right: 30px;
background: url("images/gor_menu_punkt.png") 100% 5px no-repeat;
}
.gor_menu li a:hover {
background: url("images/gor_menu_hover.png") 12px 5px no-repeat;
}
.gor_menu li a:hover span {
background: url("images/gor_menu_hover.png") 12px 5px no-repeat;
}
Содержание файла test_gor_menu.html
<!DOCTYPE html>
<html>
<head>
<title>Горизонтальное меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="gor_menu.css" type="text/css" />
</head>
<body>
<ul class="gor_menu">
<li><a href="#" ><span>Главная</span></a></li>
<li><a href="#" class="active"><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>
Есть и другие – более изощрённые способы создания горизонтального меню. Например, если бы все цвета состояний меню находились в одном изображении, а в css-коде было бы прописано определение – какая часть картинки должна применять к тому или иному классу. Или если бы картинка представляла бы из себя тонкую разноцветную вертикальную черту и в css-коде задавалось бы определение – какая часть полоски на протяжении скольких-то пикселей должна повторяться и другие.
| ◄ Предыдущий урок | Содержание | Следующий урок ► |