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

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



Уроки 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-коде задавалось бы определение – какая часть полоски на протяжении скольких-то пикселей должна повторяться и другие.



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