Демо версия меню !!!!!!
В этом примере создадим Простое горизонтальное меню для сайта. Это меню будет использовать единственный список, вложенный в div с идентификатором и две картинки, одна из которых будет фоном, другая - эффектом при наведении курсора. Это очень простое меню, оно не вызовет сложностей даже у новичков.
Сперва создадим код CSS и вставим его в теге head страницы.
<style type="text/css">
#menu{ /*элемент (наш div) с идентификатором menu*/
width:100%; /*ширина*/
height:60px; /*высота*/
background:url(img_bg.png) repeat-x; /*фоновое изображение и путь к изображению, растянуть (повторить) по оси x*/
}
#menu ul{ /*элемент ul элемента с идентификатором menu*/
list-style:none; /*задает стиль отображения маркеров - отобразить без маркера*/
margin:0 auto; /*внешние отступы все 0 (браузер сам определяет значение отступа)*/
}
#menu li{ /*элемент li элемента с идентификатором menu*/
list-style:none; /*задает стиль отображения маркеров - отобразить без маркера*/
display:block; /*блочный элемент - элементы начинаются с новой строки. После элемента также добавляется перенос строки*/
float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
height:60px; /*высота*/
line-height:60px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
}
#menu li a{ /*ссылка элемента li элемента с идентификатором menu*/
display:block; /*блочный элемент - элементы начинаются с новой строки. После элемента также добавляется перенос строки*/
float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
color:#a7a7a7; /*цвет текста*/
text-transform:uppercase; /*контролирует преобразование текста в строчные или прописные буквы - все символы будут прописными (верхний регистр).*/
font-size:11px; /*размер шрифта*/
font-weight:bold; /*начертание шрифта - стандартный полужирный шрифт (значение = 700)*/
line-height:60px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
text-decoration:none; /*подчеркивание отсутствует*/
padding:0 25px; /*внутренние отступы сверху-снизу, справа-слева*/
}
#menu li a:hover, #menu li a.current{ /*ссылка элемента li элемента с идентификатором menu при наведении курсора, ссылка класса current*/
color:#fff; /*цвет текста*/
background:url(img_h.png) no-repeat bottom; /*фоновое изображение и путь к изображению, не растягивать (не повторять), расположить по центру внизу*/
}
</style>
Далее создаем код HTML самого меню, он будет у нас в виде списка с идентификатором, вложенного в div menu. При необходимости title выставите сами. Замените # на свои ссылки, можете сменить имя идентификатора, сменив его и в коде CSS. Не забывайте следить за кодировкой.
<div>
<ul id="menu">
<li><a href="http://www.menuforsite.ru"><span>Главная</span></a></li>
<li><a class="current" href="#"><span>Ссылка1</span></a></li>
<li><a href="#"><span>Ссылка2</span></a></li>
<li><a href="#"><span>Ссылка3</span></a></li>
<li><a href="#"><span>Ссылка4</span></a></li>
</ul>
</div>
Фиолетовый, розовый, голубой, зеленый и желтый цвета картинок лежат в архиве. На этом все.