Простое вертикальное меню
Html код выглядит таким образом: [HTML]<ul class="menukos"> <li><a href="#"><img src="/demo/12502-xml.png" style="vertical-align:middle;" /> Ссылка №1</a></li> <li><a href="#"><img src="/demo/145027-browser-16.png" style="vertical-align:middle;" /> Ссылка №2</a></li> <li><a href="#"><img src="/demo/145027-browser-16.png" style="vertical-align:middle;" /> Ссылка №3</a></li> <li><a href="#"><img src="/demo/145027-browser-16.png" style="vertical-align:middle;" /> Ссылка №4</a></li> </ul>[/HTML] Ну и самое главное, что прибавит красоты менюшке - это стили: [CSS]ul.menukos { margin: 0; padding: 0; border: 1px solid #c4c4c4; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; display: inline-block; background-color: #e8e8e8; width: 99%; list-style-type: none; } ul.menukos li a { color:#000; padding: 6px 12px 6px; font-size: 13px; font-weight: bold; text-decoration: none; display: block; border-top: 1px solid #c4c4c4; } ul.menukos li a:hover { background-color: #550155; color:#fff; } ul.menukos li:first-child a { border-top: none; } ul.menukos li:first-child a:hover { border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; } ul.menukos li:last-child a:hover { border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; }[/CSS] Если вы хотите другой фон меню, то всё очень просто, нужно заменить в классе ul.menukos строка background-color: #e8e8e8; код цвета на ваш. Так же, что-бы изменить цвет фона :hover, то в классе ul.menukos li a:hover.
|
Категория: 
Опубликовал: 
Используемый код:
|
СКАЧАТЬ
Размер файла: 1.1 Kb
Посмотреть |
Комменты
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
