Графическое CSS меню

Графическое CSS меню - 4.5 out of 5 based on 2 votes

В этом уроке мы создадим графическое CSS меню при помощи маркированных списков и полностью валидного HTML и CSS, без использования JavaScript!

Графическое CSS меню - демо и исходники

Демо
Материалы по теме:

Для начала нам понадобятся графические элементы, мы будем использовать следующий набор:

1. menu_1
2. menu_2
3. menu_3
4. menu_4
5. menu_5

Примечание переводчика: 

Если вы хотите узнать, как сделать графику для этого меню то ознакомьтесь с уроком Красивое вертикальное меню, сделайте меню так как показано в уроке, а затем можете разрезать его на необходимые части или используйте уже готовые графические элементы представленные выше.

Сначала мы должны сделать HTML каркас для нашего меню:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Sample menu</title> 
<link href="/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="menu"> 
<div id="menubody"> 
<ul id="menulist"> 
<li>
<a href="#">Position 1</a>
</li> 
<li>
<a href="#">Position 2</a></li> 
<li><a href="#">Position 3</a></li> 
<li><a href="#">Position 4</a></li> 
<li><a href="#">Position 5</a></li> 
</ul> 
</div> 
<div id="menubottom"></div> 
</div> 
</body> 
</html>

Разъяснение:

<link href="/style.css" rel="stylesheet" type="text/css" /> - при помощи данной строки мы присоединяем внешний CSS файл в котором хранятся стили нашего меню;

<div id="menu"> ...</ div> - содержит всю структуру меню (в него же мы будем вставлять верхнее изображение для меню);

<div id="menubody"> ...</ div> - содержит неупорядоченный список (в него будет вставляться изображение номер 2 которое будет повторяться по вертикали и создавать фон меню);

<ul id="menulist"> ...</ UL> - это непосредственно структура самого меню представленная ненумерованным списком;

<li> <a href="#"> Позиция 1 </ A> </ LI> - это одна из позиций меню, в a href="#" можно вставить необходимую ссылку;

<div id="menubottom"> </ div> - содержит нижнюю часть меню изображение номер 4.

Создайте из этого кода html файл и сохраните его как menu.html.

Теперь пришло время для самой важной части - CSS:

 
* {margin:0; padding:0;} 
div#menu {width:184px; background:url(menu_1.gif) top no-repeat; padding-top:44px;} 
div#menubody {background:url(menu_2.gif) repeat-y; padding-left:21px;} 
div#menubottom {height:26px; background:url(menu_4.gif) bottom no-repeat;} 
ul#menulist {width:144px; list-style-type:none;} 
ul#menulist li {height:27px; background:url(menu_3.gif) bottom repeat-x;} 
ul#menulist a {width:122px; height:20px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 10px; display:block !important; display:inline-block;} 
ul#menulist a:hover {background:url(menu_5.jpg) left repeat-y;}

Разъяснение:

* {margin:0; padding:0;} - это глобальный сброс, который устанавливает внешние и внутренние отступы равные 0. Я использую его практически для всех проектов;

div#menu - устанавливает ширину меню, а также внутренний отступ от верха 44px т. е. равен высоте 1-го изображения которое сюда вставлено;

div#menubody - вставлено фоновое изображение с повторением по оси Y, а также задан внутренний отступ слева;

div#menubottom - заданна высота и фоновое изображение для нижней части меню;

ul#menulist - используется свойство и значение list-style-type:none; чтобы скрыть не нужные нам в данном случае пункты в виде точек;

ul#menulist li - установлена высота, а в качестве фонового изображения заданно маленькое изображение номер 3 которое повторяется по горизонтали и делает линию;

ul#menulist a - мы устанавливаем ширину и высоту каждого пункта меню, с левой стороны каждого пункта меню устанавливаем border равным 10px и задаем HTML цвет, также задан шрифт, цвет текста и отступы. Последнее свойство display имеет два значения первое display:block оно предназначено для браузеров Firefox, Opera и других и значение display:inline-block специально для браузера InternetExplorer, первое значение он игнорирует.

ul#menulist - заданно фоновое изображение номер 5 повторяющееся по оси Y оно используется для создания ховер эффекта.

Файлы для скачивания
  • Название: Исходники меню
  • Ссылка: rarimage-CSS-menu.rar2.83 KB
  • Фрмат: RAR

Перевод подготовлен проектом: webmastermix.ru
Источник

Рекомендуем ознакомиться:
1 1 1 1 1 1 1 1 1 1 Рейтинг 4.75 (2 Голосов)
Подробности
Опубликовано: 09 Март 2010
Обновлено: 04 Сентябрь 2013
Просмотров: 20638