Простое меню построенное только на HTML и CSS3
827материалов
228тем на форуме
3003комментария
6152пользователя

Простое меню построенное только на HTML и CSS3


Простое меню построенное только на HTML и CSS3 

УСТАНОВКА: 

ШАГ 1. 

Установите этот HTML код туда, где вам удобно ( где хотите видеть меню ). 
Код
<ul class="menukos">   
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #1</a></li>   
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #2</a></li>   
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #3</a></li>   
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #4</a></li>   
</ul>

ШАГ 2. 
Ну и самое главное, что прибавит красоты менюшке - это стили. Установите следующий CSS код в вашу Таблицу Стилей 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;   
}
Если вы хотите другой фон меню, то всё очень просто, нужно заменить в классе ul.menukos строка background-color: #e8e8e8; код цвета на ваш. 
Так же, что-бы изменить цвет фона :hover, то в классе ul.menukos li a:hover.

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 14.04.2014 в 11:33
Материал просмотрен: 719 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта