В этом примере создадим Красивое объемное горизонтальное меню для сайта на css. Меню будет использовать единственный список с классом и три изображения. Для фона - первое, другие для эффекта при наведении и текущего меню. Вы можете поменять картинку так как вам нравится. 6 различных цветов картинок приложены в архиве.
Итак приступим. Сперва создадим код CSS и вставим его в теге head страницы.
<style type="text/css">
.menu { /*элемент с классом menu - наш список*/
padding:0 0 0 1em; /*внутренние отступы сверху, справа, снизу, слева*/
margin:0; /*внешние отступы все 0*/
list-style:none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
height:35px; /*высота*/
background:url(menu.gif); /*фоновое изображение и путь к нему*/
}
.menu li { /*элемент li элемента с классом menu*/
float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
}
.menu li a { /*ссылка элемента li элемента с классом menu*/
display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
height:35px; /*высота*/
line-height:33px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
color:#aaa; /*цвет*/
text-decoration:none; /*подчеркивание отсутствует*/
font-family:arial, verdana, sans-serif; /*шрифт*/
text-align:center; /*выравнивание текста по центру*/
padding:0 0 0 14px; /*внутренние отступы сверху, справа, снизу, слева*/
cursor:pointer;/*задаем тип курсора - обычный в виде руки*/
font-size:11px; /*размер шрифта*/
}
.menu li a b { /*тег b ссылки элемента li элемента с классом menu*/
float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
padding:0 28px 0 14px; /*внутренние отступы сверху, справа, снизу, слева*/
}
.menu li.current a { /*ссылка элемента li с классом current элемента с классом menu*/
color:#fff; /*цвет*/
background:url(menu_cur.gif); /*фоновое изображение и путь к нему*/
}
.menu li.current a b { /*тег b ссылки элемента li с классом current элемента с классом menu*/
background:url(menu_cur.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (повторять), отобразить справа сверху*/
}
.menu li a:hover { /*ссылка элемента li элемента с классом menu при наведении курсора*/
color:#fff; /*цвет*/
background: url(menu_h.gif); /*фоновое изображение и путь к нему*/
}
.menu li a:hover b { /*тег b ссылки элемента li элемента с классом menu при наведении курсора*/
background:url(menu_h.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (повторять), отобразить справа сверху*/
}
.menu li.current a:hover { /*элемента li с классом current ссылки при наведении курсора элемента с классом menu*/
color:#fff; /*цвет*/
background: url(menu_cur.gif); /*фоновое изображение и путь к нему*/
cursor:default;/*задаем тип курсора - по умолчанию*/
}
.menu li.current a:hover b { /*тег b элемента li с классом current ссылки при наведении курсора элемента с классом menu*/
background:url(menu_cur.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (повторять), отобразить справа сверху*/
}
</style>Далее создаем код HTML самого меню, он будет у нас в виде списка. При необходимости title выставите сами. Замените # на свои ссылки, можете сменить имя класса, сменив его и в коде CSS. Не забывайте следить за кодировкой и путями к изображениям. Элементу li присвоен класс current для наглядности.
<ul class="menu">
<li><a href="http://www.menuforsite.ru"><b>Главная</b></a></li>
<li class="current"><a href="#"><b>Ссылка1</b></a></li>
<li><a href="#"><b>Ссылка2</b></a></li>
<li><a href="#"><b>Ссылка3</b></a></li>
<li><a href="#"><b>Ссылка4</b></a></li>
</ul>Вот архив с изображениями
На этом все.
Теги: 
Добавить пост 